Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

ProductOptions

The ProductOptions container manages and displays product options on the product details page.

The container receives initial product data during initialization to preload the component and, being event-driven, updates with data emitted to pdp/data within the event scope.

ProductOptions configurations

The ProductOptions container provides the following configuration options:

Option Type Req? Description
hideSelectedValuebooleanNo Hides the selected value of the option.
onValuesfunctionNo A callback function that receives the selected option UIDs.
onErrorsfunctionNo A callback function that receives any errors encountered during option selection.
slotsobjectNo An object containing slot overrides for the Swatches component.
scopestringNo Unique identifier for the PDP context. Only containers rendered with this scope will respond to product events.

Example

The following example demonstrates how to configure the ProductOptions container:

return productRenderer.render(ProductOptions, {
slots: {
Swatches: (ctx) => {
const size = ctx.getSlotElement('product-swatch--fashion_size');
// Add link to Sizes
if (size) {
// Create Size Link
const link = document.createElement('a');
link.href = '#';
link.addEventListener('click', (e) => {
e.preventDefault();
console.log('Size Chart');
});
// append inside size
size.appendChild(link);
}
},
},
});