Custom Javascript event listeners and triggers in Be Yours

From Be Yours 6.0.0, you can use custom Javascript event listeners and triggers.

When you customize the theme, you may want to hook into some events after they happen to execute your custom script or integrate a 3rd 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
});

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