Skip to main content

Storefront Javascript Events

See how to subscribe to add to cart and quote events on the storefront.

Niall Diamond avatar
Written by Niall Diamond
Updated over 8 months ago

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

Live pricing

document.addEventListener('live-pricing-done', function () {
console.log('live pricing has just finished running');
}, false);

Live inventory

document.addEventListener('live-inventory-done', function () {
console.log('live inventory has just finished running');
}, 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);

Did this answer your question?