Campaign Theme Documentation

  1. Home
  2. Docs
  3. Campaign Theme Documentat...
  4. Campaign Theme Documentat...
  5. Advanced Javascript events for developers

Advanced Javascript events for developers

Utilize JavaScript events:

  • If you want to integrate third-party apps or run custom scripts, you can tap into the theme’s JavaScript events.
  • The theme’s custom JavaScript event listeners and triggers allow for this, enabling more dynamic features.
  • For example, you can listen for an event when an item is added to the cart and then run your custom script.

Remember, while customizing is beneficial, it’s essential to ensure that changes enhance the user experience and don’t create confusion or friction. It’s always a good idea to test changes thoroughly, preferably in a theme copy before applying them to the live store.

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

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

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

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

Variant selection changed

Variant object returned.document.addEventListener(‘variant:change’, function(evt) { console.log(evt.detail.variant); });

Collection page is re-rendered

Fired when the collection page is re-rendered after filters are updated.document.addEventListener(‘collection:reloaded’, function() {});

Related and complementary products loaded

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’

How can we help?