API for Pops apps and custom code (JS events)
Updated today
The Pops theme dispatches these DOM events for apps and custom code to listen to:
Event | Triggered when |
|---|---|
| A cart line update succeeds through the cart form. |
| A cart line quantity update succeeds, or a quantity-input plus/minus control changes the value. |
| A cart quantity is changed to 0. |
| A cart quantity update fails. |
| The cart drawer is viewed or opened. |
| The product-add flow adds a product to the cart. |
| A product page is viewed; on a product URL, product data is auto-retrieved. |
| A page is viewed. |
| A URL containing |
| A URL containing |
| A product variant swap completes and a valid current variant exists. |
| The quick-add modal opens or closes. |
| A drawer opens or closes. |
| The story viewer opens or closes. |
| The theme's slider changes slide. |
| Facet or sort form parameters are submitted. |
| Facet results are rendered. |
| An active facet is removed or cleared. |
| The search drawer form is submitted with a non-empty query. |
Listen to an event
These events are bubbling DOM CustomEvents, so listen with addEventListener on the document, a parent element, or any ancestor.
document.addEventListener("product-added-to-cart", (e) => {
console.log("A product was added to the cart. Here's the event: ", e);
});
// event.detail carries the event data
document.addEventListener("cart-update", (e) => {
console.log("The cart was updated. Here's the event data: ", e.detail);
});