Select Page
Looking for help?

JavaScript Events

Ignite broadcasts custom JavaScript events to make extending it as easy as possible.

To add custom JavaScript to Ignite, we recommend creating a new JS file and referencing it in the theme, rather than modifying any of the JS files provided with the theme.

Custom Events

1. cart-remove

This event is triggered when a product is removed from the cart.

Returns:

  • cartData: A JSON object containing the updated cart details.

Example:

document.addEventListener('cart-remove', (event) => {
  const { cartData } = event.detail;
  console.log('Product removed from cart. Updated cart data:', cartData);
  // Your custom logic here
});

2. cart-add

This event fires when a product is added to the cart.

Returns:

  • variantId: The ID of the variant added to the cart.
  • cartData: A JSON object containing the updated cart details.

Example:

document.addEventListener('cart-add', (event) => {
  const { variantId, cartData } = event.detail;
  console.log(`Product with variant ID ${variantId} added to cart. Updated cart data:`, cartData);
  // Your custom logic here
});

3. cart-drawer-open

This event is triggered when the cart drawer has finished opening.

Returns: Nothing.

Example:

document.addEventListener('cart-drawer-open', () => {
  console.log('Cart drawer is now open.');
  // Your custom logic here
});

4. cart-drawer-closed

This event is triggered when the cart drawer has finished closing.

Returns: Nothing.

Example:

document.addEventListener('cart-drawer-closed', () => {
  console.log('Cart drawer is now closed.');
  // Your custom logic here
});

5. cart-update

This event is triggered when the quantity of a product in the cart is updated.

Returns:

  • variantId: The ID of the variant whose quantity was updated.
  • cartData: A JSON object containing the updated cart details.

Example:

document.addEventListener('cart-update', (event) => {
  const { variantId, cartData } = event.detail;
  console.log(`Cart updated for variant ID ${variantId}. Updated cart data:`, cartData);
  // Your custom logic here
});

6. variant-change

This event is fired when the variant of a product has finished changing, regardless of whether the variant picker is a dropdown or set of boxes.

Returns:

  • sectionId: A string representing the section where the variant change occurred.
  • variant: The full Shopify variant object for the selected variant.

Example:

document.addEventListener('variant-change', (event) => {
  const { sectionId, variant } = event.detail;
  console.log(`Variant changed in section ${sectionId}. Selected variant:`, variant);
  // Your custom logic here
});

7. cart-error

This event is triggered when there is an error related to the cart, such as an invalid quantity or product variant.

Returns:

  • error: An error object detailing what went wrong.

Example:

document.addEventListener('cart-error', (event) => {
  const { error } = event.detail;
  console.error('Cart error:', error);
  // Your custom error-handling logic here
});

8. quick-view-open

This event is triggered when the quick view has finished opening.

Returns: Nothing.

Example:

document.addEventListener('quick-view-open', () => {
  console.log('View view is now open.');
  // Your custom logic here
});

9. quick-view-closed

This event is triggered when the quick view has finished closing.

Returns: Nothing.

Example:

document.addEventListener('quick-view-closed', () => {
  console.log('Quick view is now closed.');
  // Your custom logic here
});
UpPromote Banner