When you are on your store it is handy to be able to know when certain javascript events occur. For example, if you want to send a custom event to Google Analytics whenever someone uses your contact form. Below you will find a list of events and how to subscribe to them.
đ Important: These events only fire if Javascript is running and will also be dispatched right before a page reload. Thus, potentially not fully sending your events or triggering your actions. If concerned, have a look at webhooks as another solution.
Quote event
Success Code
document.addEventListener('quote-sent', function (e) {
console.log('new quote sent successfully', e.detail)
}, false);
Failure Code
document.addEventListener('quote-failed', function (e) {
console.log('new quote failed to be sent', e.detail)
}, false);
Product Quickview
Success Code
document.addEventListener('product-quickview-success', function (e) {
console.log('product quickview loaded successfully', e.detail)
}, false);
Failure Code
document.addEventListener('product-quickview-failed', function (e) {
console.log('product quickview failed to load', e.detail)
}, false);
Cart Events
Cart Load
document.addEventListener('cart-load-success', function (e) {
console.log('Cart page loaded successfully', e.detail);
}, false);
Add to cart
document.addEventListener('cart-add-success', function (e) {
console.log('added to the cart successfully', e.detail);
}, false);
Update cart totals : Recommended as the most flexible event
document.addEventListener('cart-total-update', function (e) {
console.log('Cart totals updated successfully', e.detail);
}, false);
Remove item from cart
document.addEventListener('cart-remove-success', function (e) {
console.log('Cart item removed successfully', e.detail);
}, false);
Registration pages
Registration from the /register page
document.addEventListener('register-form-success', function (e) {
console.log('User registered successfully', e.detail);
}, false);
Registration button on the Thank you page
document.addEventListener('register-thankyou-success', function (e) {
console.log('User registered successfully', e.detail);
}, false);
Registration in the checkout
document.addEventListener('register-checkout-success', function (e) {
console.log('User registered successfully', e.detail);
}, false);
Variants event
Product variants loaded event
document.addEventListener('product-variants-success', function (e) {
console.log('Variants loaded', e.detail);
}, false);Product variants filters AJAX request
$.ajax({
type: 'post',
url: '/api/product/variant-filters',
cache: false,
data: {
'variant_id': $('.variant-products-wrapper').data('productid'),
'filters': selectedfilters,
},
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function (response) {
productvariantfilters = response['filters'];
// create filters here
},
});Update product variants with filters
selectedfilters.attribute.attribute_id.push(filterId);
selectedfilters.attribute.value_id.push(selectedValue);
variants.fetchVariants();
Configurable Products with customer Javascript
function evoXProductChangeCallback() {
// Add content here, if it needs to be executed on the product page after a user makes selections on a configurable product.
}
Load more products event
Load more / Infinite scroll products loaded event
document.addEventListener('product-loadmore-success', function (e) {
console.log('More products loaded', e.detail);
}, false);
document.addEventListener('product-loadmore-failed', function (e) {
console.log('More products failed to load', e.detail);
}, false);
Product account switch
For stores using multiple accounts, this event fires when a user switches the account on a product and the product has been updated for the new account. It fires on product tiles in grids, lists, carousels and order pads, and on the product page. It does not fire in the product quick view.
document.addEventListener('product-account-switch-success', function (e) {
console.log('Product switched to account ' + e.detail.customer_id, e.detail);
}, false);e.detail contains:
item_id - the product's item ID.
customer_id - the ID of the account the user switched to.
element - where the switch happened, for example
product-tile-grid,product-tile-list,product-tile-carouselorproduct-page.tile - the updated product tile. On the product page, this is the add to cart area.
tiles - all updated elements. A carousel can show the same product more than once, so there can be more than one.
Live pricing and stock for the new account may still be loading when this event fires. To run code once they have loaded, use the live pricing and live inventory events below.
Live pricing
document.addEventListener('live-pricing-done', function () {
console.log('live pricing has just finished running');
}, false);If a product switched account using the event above product-account-switch-success, this event fires again for just that product. In that case e.detail.scope is account-switch, e.detail.customer_id is the selected account and e.detail.tiles lists the updated elements.
document.addEventListener('live-pricing-done', function (e) {
if (e.detail && e.detail.scope === 'account-switch') {
console.log('live pricing loaded for account ' + e.detail.customer_id, e.detail.tiles);
}
}, false);
Live inventory
document.addEventListener('live-inventory-done', function () {
console.log('live inventory has just finished running');
}, false);If a product switched account using the event above product-account-switch-success, this event fires again for just that product, with the same e.detail as live pricing above (scope, customer_id and tiles).
document.addEventListener('live-inventory-done', function (e) {
if (e.detail && e.detail.scope === 'account-switch') {
console.log('live inventory loaded for account ' + e.detail.customer_id, e.detail.tiles);
}
}, false);
Default contact form sent
document.addEventListener('contact-form-sent', function (e) {
console.log('Contact form email has been sent', e.detail);
}, false);
Default contact form failed to send
document.addEventListener('contact-form-failed', function (e) {
console.log('Contact form email failed to be sent', e.detail);
}, false);
Search success
document.addEventListener('search-success', function (e) {
console.log('Search has been successful', e.detail);
}, false);
Search - no results
document.addEventListener('search-noresults', function (e) {
console.log('Search returned no results', e.detail);
}, false);
DDS Specs success
document.addEventListener('dds-specs-success', function (e) {
console.log('DDS Specs successfully loaded', e.detail);
}, false);
DDS Specs failed
document.addEventListener('dds-specs-failed', function (e) {
console.log('DDS Specs failed to load', e.detail);
}, false);
Branch Finder Search success
document.addEventListener('branchfinder-search-success', function (e) {
console.log('Search branches finished');
}, false);