Skip to main content
All CollectionsAdvanced Design
Storefront Javascript Events
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 a week 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);

Did this answer your question?