JavaScript events for developers

Streamline 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.

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

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

Project object returned.

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

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

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

When a modal is opened some elements are lazyloaded, such as the add to cart form. Those elements are not available right away. Use the quickview:loaded event if you want access to the elements.

Only the product ID is returned along with the initialized state (false).

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

Fires when the contents of the quickview modal have loaded onto the page.

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

Variant object returned.

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

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