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:

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
Collection page is re-rendered

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

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

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

Need Further Assistance

If you encounter any issues or need additional help with your BeYours 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.