JavaScript events for developers

Here's a list of all the public events that you, as a developer, can hook into and run your own custom script or integrate a third-party app. We only use vanilla JS in our themes, so everything can be manipulated in any way.

Trigger cart refresh

The most used interaction is to make the drawer cart show up after a custom app or code adds a product to the cart.

window.refreshCart();

Cart updated

When an item is removed from the cart or it's quantity is changed.

document.querySelector('cart-form').addEventListener('cart-updated', ()=>{
   const cartItems = document.querySelectorAll('[data-js-cart-item]'); 
   // get all cart items
});

Product added to the cart

When a product is added to the cart. Note that there might be many products in the page at once, so you need to add the event listener to all available product forms.

document.querySelector('product-form').addEventListener('add-to-cart', e=>{    
   const produdctId = e.target.querySelector('input[name="product-id"]').value);
   // get product id
});

Variant change

When the variant of a product is changed, you can get the selected variant object.

document.querySelector('product-variants').addEventListener('VARIANT_CHANGE', ()=>{
   const variant = document.querySelector('product-variants').currentVariant;
});