Product detail event

Variant has changed

• Selecting variant from variant picker of Smind

This event is fired whenever a user has changed the variant in a product selector, either in a product page, featured product section or quick view and quick add section

variant:change	detail: {variant}

variant: Is an object variant of Shopify (https://shopify.dev/docs/api/liquid/objects/variant)

The "change variant" event will be listened to by other components to update related elements such as product price, inventory status, SKU, add to cart button, and checkout.

Example usage:

document.addEventListener('variant:change', ({ detail: event }) => {
    try{
        const variant = event.variant;
        const variantId = event.variant?.id;
        console.log(variant);
        console.log(variantId);
    } catch (error) {
        console.log('error: ', error)
    }
});

• Changing the product variant without using Smind’s variant picker.

If you're replacing the variant selection using Smind’s variant picker with a third-party solution, please make sure to dispatch an event after selecting a variant so that other components can listen for the variant change.

The variant change event must be named "variant:change" and must include a variant object with the same structure as Shopify's default variant object. (https://shopify.dev/docs/api/liquid/objects/variant)

Example usage:

container.dispatchEvent(new CustomEvent("variant:change", {
    detail: {
      variant
    },
    bubbles: true
  }));

container	The section container that includes the variant picker
variant	Object variant that selected