← Web Components

Web Components · PDP

PDPPlaceholder integration

The bridge between PDP_STORE and the placeholder engine. Exposes window.PDPPlaceholder — a singleton that auto-renders any element tagged data-pdp-render, re-renders on store updates, and gives you a clean API to template against live product data.

Overview

Not a custom element — this script just loads alongside the SDK and waits for both PDP_STORE and PDPPlaceholderEngine to be available. Once ready, it scans the DOM for any element with the data-pdp-render attribute, runs the rendered HTML through the engine, and subscribes to store changes so live edits propagate.

Attribute values also pass through the engine, so you can write things like alt="Photo of {{product.productInfo.name}}" and have them interpolated.

When to use

  • For static markup that needs to mirror live PDP data (alt text, meta tags, share captions).
  • For JSON-LD <script> blocks where you want product fields inlined.
  • For any custom widget you write that needs templating against the PDP store.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<!-- This element auto-renders -->
<div data-pdp-render>
  <h2>{{product.productInfo.name}}</h2>
  <p>{{product.productInfo.shortDescription | truncate:120}}</p>
</div>

window.PDPPlaceholder API

MethodReturnsDescriptionNotes
init()PDPPlaceholderEngine—Create the singleton engine from the current PDP_STORE.getState().
render(template)string—Render a template string against the current product data.
renderDeep(obj)object—Recursively render every string in the object.
update()voidsubscribedRefresh the engine with the latest PDP_STORE.getState(). Called automatically on store changes.
registerFilter(name, fn)void—Register a custom filter on the singleton engine.
get(path)any—Read a value by dot-notation path against the current product data.
getAvailablePlaceholders(maxDepth=5)string[]—List every valid {{path}} against the current product. Useful in editor UIs.
bindAttributesfunctionhelperRe-render any element's attributes through the engine. Useful for hooking custom widgets.

Auto-render rules

  • Any element with data-pdp-render has its inner HTML processed through the engine.
  • Attribute values containing {{ also get processed (alt text, aria-label, etc.).
  • When PDP_STORE emits a change, every data-pdp-render element re-renders.
  • If neither data-pdp-render elements nor explicit API calls are present, the integration is inert.

Examples

1. Auto-rendered banner

<div data-pdp-render class="hero">
  <h1>{{product.productInfo.name}}</h1>
  <p>Was ₹{{product.productInfo.originalPrice | currency}} — Now ₹{{product.productInfo.sellingPrice | currency}}</p>
</div>

2. Dynamic JSON-LD

<script type="application/ld+json" data-pdp-render>
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{product.productInfo.name}}",
  "image": "{{product.productInfo.media[0].src.full}}",
  "offers": {
    "@type": "Offer",
    "price": "{{product.productInfo.sellingPrice}}",
    "priceCurrency": "INR",
    "availability": "{{product.productInfo.available ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock'}}"
  }
}
</script>

3. Programmatic render outside the auto-DOM

const tweet = window.PDPPlaceholder.render(
  'Just spotted {{product.productInfo.name}} at {{product.productInfo.sellingPrice | currency}}! #shopping'
);
document.querySelector('#tweet-cta').setAttribute('href',
  'https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweet)
);

4. Custom filter — discount percentage

window.PDPPlaceholder.registerFilter('discountPct', (_v, original, sale) => {
  return Math.round(((original - sale) / original) * 100) + '%';
});

<span data-pdp-render>
  Save {{| discountPct : product.productInfo.originalPrice : product.productInfo.sellingPrice}}!
</span>