ProductOptions

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

ProductOptions configurations

The ProductOptions container provides the following configuration options:

Option	Type	Req?	Description
hideSelectedValue	boolean	No	Hides the selected value of the option.
onValues	function	No	A callback function that receives the selected option UIDs.
onErrors	function	No	A callback function that receives any errors encountered during option selection.
slots	object	No	An object containing slot overrides for the Swatches component.

Example

The following example demonstrates how to configure the ProductOptions container:

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);
          }
        },
},