change

change is a DOM event that occurs whenever the color is selected inside the h-color-swatches webcomponent.

Event body

The change body has a TColorSwatchesControlChangeEventDetail type which represents the details of the updated filter. It is optional so it might not exist.

Example

In this example we listen to change event and perform an action whenever it's emitted.

useStorefront(async (storefront) => {
    document.addEventListener('change', (event) => {
        const detail = event.detail;

        if (!detail) return;

        const { colors, values, $colorItem } = detail; 

        console.log(colors, 'have been changed to', values, ' in:', $colorItem);
    });
});