Custom Javascript event listeners and triggers in Concept

In Concept, you can use custom Javascript event listeners and triggers.

When customizing the theme, you may want to connect to some events after they happen to run your custom script or integrate with a third-party app. We provide JavaScript patterns for supported events.

Trigger page loaded

The HTML document has been completely parsed, and all deferred scripts.

    document.addEventListener('page:loaded', function() {
      // Page has loaded and theme assets are ready

Trigger card draw to update

Use this JavaScript pattern to update the cart object after the quantity is changed:

    document.addEventListener('cart:updated', function(evt) {

Product added to the ajax cart

    document.addEventListener('ajaxProduct:added', function(evt) {

Product failed to add to cart

    document.addEventListener('ajaxProduct:error', function(evt) {

Quick view modal is opened

    document.addEventListener('quickview:open', function(evt) {

Quick view modal loaded

    document.addEventListener('quickview:loaded', function(evt) {

Variant selection changed

    document.addEventListener('variant:change', function(evt) {

Collection page is re-rendered

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