API for apps and custom code (JS events)

Updated 4 weeks ago

The theme dispatches these DOM events for apps and custom code to listen to:

Event	Triggered when
`quantity-update`	A quantity input is updated.
`variant-change`	A product's selected variant changes.
`cart-error`	The cart returns an error.
`cart-update`	The cart is updated.
`cart:discount-removed`	A discount code is removed from the cart.
`modalClosed`	The quick-add modal is closed.
`rtlChange`	The `dir` attribute is updated. Introduced in v3.2.0.

section-refreshed (removed)

Introduced in v3.0.0 to fire when a section is refreshed. The current theme no longer dispatches this event.

Listen to an event

window.addEventListener("quantity-update", (e) => {
  console.log("The quantity input has been updated. Here's the event: ", e);
});

// or, scoped to one element
const myElement = document.querySelector('.my-element');
myElement.addEventListener("quantity-update", (e) => {
  console.log("My quantity input has been updated. Here's the event: ", e);
});

Was this helpful?