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.

• Page loaded
• Cart updated
• Product added to the ajax cart
• Product failed to add to cart
• Quick view modal is opened
• Quick view modal loaded
• Variant selection changed
• Collecction page is re-rendered
• Trigger cart drawer to update

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

Cart updated

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

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

Product added to the ajax cart

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

Product failed to add to cart

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

Quick view modal is opened

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

Quick view modal loaded

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

Variant selection changed

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

Collection page is re-rendered

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

Trigger cart drawer to update

document.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true, detail: { open: true }
}));

Set the open parameter to false if you don't want the cart drawer to be open after the update.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support guys via our Ticket System for assistance within 8 hours.

Scan the QR code below to join our WhatsApp community for updates, news, and announcements.