Impulse JavaScript events for developers

This documentation is intended for developers and includes instructions that involve modifying the theme code.

Impulse relies heavily on JavaScript to optimize page load performance and enable dynamic features such as Quick View. In some cases, it may be necessary to hook into these JavaScript-driven events after they fire in order to execute custom scripts or integrate third-party applications.

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

Added in v3.4.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.

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

Added in v3.5.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);
});

Added in v3.5.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'));

Added in v3.5.0

Product object returned.

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

Added in v3.5.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);
});

Added in v3.5.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 (false).

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');
  }
});

Added in v3.5.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 = document.querySelector('#AddToCartForm-' + evt.detail.productId);
});

Added in v3.5.0

Variant object returned.

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

Added in v5.4.1

Fired when the collection page is re-rendered after filters are updated.

document.addEventListener('collection:reloaded', function() {});

This event will trigger when the product recommendations are done loading in.

document.addEventListener('recommendations:loaded', function(evt) {
  console.log(evt.detail.section);
  console.log(evt.detail.intent);
});

evt.detail.section will return the recommendations in the DOM.

evt.detail.intent will return a string detailing the type of product recommendations ‘related’ or ‘complementary’.