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
- Trigger cart drawer to update
- 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
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')
});