Theme Events

This section is intended for experienced developers who wish to add custom functionalities to the theme based on merchant requirements.

1. Events that you can listen and run custom functionalities based on your requirements

✅ on:QuantityChange

The on:QuantityChange event is dispatched whenever the quantity input field's value changes. The event provides the new quantity through the quantity property.

How to Use the Event:

To use the on:QuantityChange event, you can listen for the event and execute your custom logic. Here’s an example of how to do this:

document.addEventListener('on:QuantityChange', function(event) {
    const quantity = event.detail.quantity;
    
    // Custom functionality here
    console.log('Quantity changed to:', quantity);
    

});

✅ action:showDrawer

The action:showDrawer event is dispatched to indicate that a specific drawer, identified by drawerType , should be shown. In this example, the drawer type is set to cart-drawer .

How to Use the Event:

To use the action:showDrawer event, you can listen for the event and implement custom functionality based on the drawer type. Here’s an example:

document.addEventListener('action:showDrawer', function(event) {
    const drawerType = event.detail.drawerType;

    // Custom functionality here
    console.log('Drawer type:', drawerType);
    
    // Example: Customize the content based on the drawer type
    if (drawerType === 'cart-drawer') {
        // Custom logic for the cart drawer
       // Add custom content or manipulate the drawer as needed
    }
});

✅ action:hideDrawer

The action:hideDrawer event is dispatched to signal that a specific drawer, identified by drawerType , should be hidden. In this example, the drawer type is set to cart-drawer .

How to Use the Event:

To use the action:hideDrawer event, you can listen for the event and implement custom functionality based on the drawer type. Here’s an example:

document.addEventListener('action:hideDrawer', function(event) {
    const drawerType = event.detail.drawerType;

    // Custom functionality here
    console.log('Hiding drawer of type:', drawerType);
    
    // Example: Perform actions when the pick-up availability drawer is hidden
    if (drawerType === 'cart-drawer) {
        // Custom logic for when the cart drawer is hidden
   // Additional actions, such as resetting UI elements or stopping certain processes
    }
});

2. Events that you can fire and theme will run functionalities for you

✅ action:cart:updateCartandShowCart

This event is used to show cart drawer based on the previous call you make to to add any new item to cart. You can dispatch this event to refresh the cart if the cart drawer is already open and perform additional actions if needed.

How to Use the Event:

HELPER_UTIL.dispatchCustomEvent(_EVENT_HELPER.updateAndShowCart, document);