JavaScript events for developers

Our theme makes heavy use of JavaScript to speed up loading times and make features like quick view really, well, quick. At times you may want to hook into these events after they happen to run your own custom script or integrate a third-party app.

All objects returned are vanilla JS objects and can be manipulated however you see fit.

Theme loaded

The theme is loaded and JS elements initialized. Useful if you need to measure elements or hook into theme features. Use this listener instead of document.onload.

document.addEventListener('page:loaded', function() {
  console.log('page:loaded');
});
Media query matches

Listen to changes in the theme's major breakpoints. You can also access theme.config.bpSmall anytime in your code to access the current breakpoint.

document.addEventListener('matchSmall', function() {
  // mobile layout
  // theme.config.bpSmall is true
});
document.addEventListener('unmatchSmall', function() {
  // large screen layout
  // theme.config.bpSmall is false
});
Cart updated

JavaScript updates the cart object after the quantity is changed. This event is triggered after the cart markup is updated and is free to customize.

Cart object returned.

document.addEventListener('cart:updated', function(evt) {
  console.log(evt.detail.cart);
});
Trigger cart drawer to update

You've adjusted the cart item quantity or need to reprint the entire cart drawer. Use cart:updated listener after to get cart object.

document.dispatchEvent(new CustomEvent('cart:build'));
Product added to the ajax cart

Product object returned.

document.addEventListener('ajaxProduct:added', function(evt) {
  console.log(evt.detail.product);

  // if addToCartBtn is returned, product was added by quick add feature
  if (evt.detail.addToCartBtn)
    console.log(evt.detail.addToCartBtn);
  }
});
Product failed to add to cart

The error message will let you know the problem. Most of the time it is quantity related.

document.addEventListener('ajaxProduct:error', function(evt) {
  console.log(evt.detail.errorMessage);
});
Quick view modal is opened

The first time the modal is opened some elements are lazyloaded, such as the add to cart form. Those elements are not available right away.

evt.detail.initialized will be true if the quick view modal is opened a second time and all elements are available immediately.

Only the product ID is returned along with the initialized state.

document.addEventListener('quickview:open', function(evt) {
  console.log(evt.detail.productId);

  if (evt.detail.initialized) {
    console.log('quickview:open | already initialized')
    var form = document.querySelector('#AddToCartForm-' + evt.detail.productId);
    var addToCart = document.querySelector('#ProductSection-' + evt.detail.productId + ' .add-to-cart');
  }
});
Quick view modal loaded

Only fires the first time the modal is opened.

Only the product ID is returned.

document.addEventListener('quickview:loaded', function(evt) {
  console.log(evt.detail.productId);
  var form = document.querySelector('#AddToCartForm-' + evt.detail.productId);
});
Quick add modal is loaded

Added in v1.0.3

Gives the ability to interact with the product form that opens with the Quick Add feature

document.addEventListener('quickadd:loaded', function(evt) {
  console.log(evt.detail.productId);
  console.log(evt.detail.handle);

  var form = document.querySelector('#QuickAddHolder .product-single__form');
});
Variant selection changed

Variant object returned.

document.addEventListener('variant:change', function(evt) {
  console.log(evt.detail.variant);
});