JavaScript events for developers

As of Motion v6.0.0 you can use our custom JavaScript event listeners and triggers.

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.

There is no jQuery dependency for these events even though our theme uses it extensively. All objects returned are vanilla JS objects and can be manipulated however you see fit.

Stylesheet has loaded and page is visible

Added in v5.3.0

Necessary because we only load some critical CSS inline — enough to show the page loader and some base styles — before lazyloading the rest of the stylesheet. Use this listener instead of document.onload or $(document).ready().

document.addEventListener('page:loaded', function() {
  console.log('page:loaded');
});
Cart updated

Added in v6.0.0

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

Added in v6.0.0

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

Added in v6.0.0

Project object returned.

document.addEventListener('ajaxProduct:added', function(evt) {
  console.log(evt.detail.product);
});
Product failed to add to cart

Added in v6.0.0

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

Added in v6.0.0

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 = $('#AddToCartForm-' + evt.detail.productId);
    var $addToCart = $('#ProductSection-' + evt.detail.productId).find('.add-to-cart');
  }
});
Quick view modal loaded

Added in v6.0.0

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 = $('#AddToCartForm-' + evt.detail.productId);
});
Variant selection changed

Added in v6.0.0

Variant object returned.

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