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
hideSelectedValue	boolean	No	Hides the selected value of the option.
transform	function	No	Centralizes options transformation in product-transform for consistent option handling across all option types.
transformer	function	No	Enables custom option type conversion with error handling for advanced product configuration scenarios.
onValues	function	No	Callback that receives the selected option UIDs.
onErrors	function	No	Callback that receives errors encountered during option selection.
slots	object	No	Overrides slots for the Swatches component.
scope	string	No	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);
      }
    },
  },
});