Developer Document

1. Product form event

Product form Add To Cart before submit.

• To append custom data to the form data of Smind sections before submission, you can listen to the “smind:product-form:before-submit” event.

document.addEventListener('smind:product-form:before-submit', (event) => {
    try {
        const formData = event.detail.formData;

        if (this.sectionId === formData.get('section-id')) {
            formData.append('custom_key', custom_value);
        }
    } catch (error){
        console.log('error: ', error)
    }
});

custom_value: This is the element you want to add to the Smind add-to-cart form.

• After completing the “Add to Cart” action with a product using Smind’s section, if you want to perform additional actions after the submission is completed, you can listen to the “smind:product-form:submit-complete” event.

document.addEventListener('smind:product-form:submit-complete', (event) => {
        try {
         // Handle the action you want to perform after adding to cart here.
        } catch (error) {
          console.log('error: ', error
        }
      })

2. Product detail event

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

3. Cart Drawer event

If you’re using Smind’s cart drawer section but not the sections that provide Smind’s form data.

In this case, after successfully adding a product to the cart, you’ll need to manually trigger the following action to display the Smind’s Cart Drawer on the screen:

const drawer = new SMI_CartDrawer();
drawer.render();
drawer.onToggle();