The Eurus theme uses JavaScript to power dynamic features such as the cart, quick view, variant picker, and collection filtering. In certain cases - such as integrating a third-party app or writing custom scripts - you may need to respond to these theme actions or trigger them from your own code.
This guide documents all available JavaScript events in the Eurus theme. There are two types:
- Event Listeners - events dispatched by the theme that your code can listen and respond to.
- Event Triggers - custom events your code dispatches to instruct the theme to perform an action.
🔍 Information: All data returned in evt.detail are plain JavaScript objects and can be used however you need.
1. Event Listeners
The theme fires the following events at key moments. Use document.addEventListener() to hook into them.
🔹 Page loaded
Fired when the HTML document has been completely parsed and all deferred scripts have executed. Use this as your entry point to run any initialization logic that depends on the theme being ready.
document.addEventListener('DOMContentLoaded', () => {
// Page has loaded and theme assets are ready
});🔹 Cart updated
Fired after the cart has been updated — for example, when a shopper changes item quantity. Use this to re-sync any custom cart UI or third-party integrations after the cart state changes.
document.addEventListener('eurus:cart:items-changed', () => {
// Cart has updated
});🔹 Product added to ajax cart
Fired when a product is successfully added to the cart via Ajax (e.g. from a product card, bundle section, or the product page). The evt.detail.product object contains the data of the added product.
document.addEventListener('eurus:product:added', (evt) => {
console.log(evt.detail.product);
});🔹 Product failed to add to cart
Fired when an Ajax add-to-cart request fails. The evt.detail.errorMessage string contains the reason for the failure (e.g. item out of stock, invalid quantity).
document.addEventListener('eurus:product:add-failed', (evt) => {
console.log(evt.detail.errorMessage);
});🔹 Quick view modal is opened
Fired when the quick view modal begins opening — for example, when a shopper clicks the quick view button on a product card or product list.
document.addEventListener('eurus:quickview:open', () => {
// Quick view modal is opening
});🔹 Quick view modal loaded
Fired after the quick view modal has fully loaded its content. The evt.detail.productUrl string contains the URL of the product displayed in the modal.
document.addEventListener('eurus:quickview:loaded', (evt) => {
console.log(evt.detail.productUrl);
});🔹 Variant selection changed
Fired whenever a shopper selects a different product variant. This applies to the product information section, product cards, bundle section, and video shopping/looping sections. The evt.detail.variant object contains the data of the newly selected variant.
document.addEventListener('eurus:variant:change', (evt) => {
console.log(evt.detail.variant);
});🔹 Collection page is re-rendered
Fired after the collection page has been re-rendered — for example, after a shopper applies or removes a filter, or changes the sort order.
document.addEventListener('eurus:collection:reloaded', () => {
console.log('collection:reloaded');
});2. Event Triggers
The following events can be dispatched from your code to instruct the theme to perform an action. Use document.dispatchEvent() to fire them.
🔸 Reload minicart / cart page
Dispatching this event tells the theme to reload the cart UI. The theme detects the current context automatically:
- If the shopper is on any page other than the cart page, the mini cart is reloaded.
- If the shopper is on the cart page, the full cart page is reloaded instead.
Use this when your custom code updates cart data outside of the theme's built-in flow and you need the UI to reflect the latest state.
document.dispatchEvent(new CustomEvent('eurus:cart:reload'));3. Support Information
Need help? Contact support@omnithemes.com or visit omnithemes.com.
