The Maximize theme leverages JavaScript extensively to optimize loading times and ensure seamless performance across features such as the cart drawer, quick add, and variant pickers.
In certain cases - such as integrating a third-party app or running custom scripts - you may need to hook into these events after they occur. This guide covers all available event listeners in the theme.
All objects returned in evt.detail are plain JavaScript objects and can be used however you need.
1. Event Listeners
🔹 Cart validate
Triggered when the customer clicks the Checkout button.
document.addEventListener('maximize:cart:validate', function(evt) {
console.log(evt.detail);
});
🔹 Show custom field in cart
Display invalid custom fields before proceeding to checkout.
document.addEventListener('maximize:cart:show-custom-field', function(evt) {
console.log(evt.detail);
});
🔹 Apply discount code
Triggered when the customer enters a discount code.
document.addEventListener('maximize:cart:discount-code:change', function(evt) {
console.log(evt.detail);
});
🔹 Cart updated
The JavaScript updates the cart object after the quantity is modified. This event is triggered once the cart markup has been updated and is open for customization.
document.addEventListener('maximize:cart:updated', function(evt) {
console.log(evt.detail);
});
🔹 Change product variant in Product Info/Quickview/Product showcase sections
Triggered when the customer changes a product variant inside a Product Info, Quick view, or Product showcase section. The event name is dynamic - replace ${section-id} with the actual section ID.
document.addEventListener(`maximize:variant-picker:updated:${section-id}`, function(evt) {
console.log(evt.detail);
});
🔹 Change product variant option when quick add in Product card
Triggered when the customer selects a variant option via quick add on the Product card. Retrieve the value of the data-choose-option-element-id attribute from the <choose-option> element.
document.addEventListener(`maximize:color-swatch:change:${dataset-choose-option-element-id}`, function(evt) {
console.log(evt.detail);
});
2. Support Information
Need help? Contact our support team at Omni Themes Support
