JavaScript events for developers

Learn to use custom Javascript event listeners and triggers in Pebble theme

Pebble leverages JavaScript extensively to optimize loading times and ensure seamless performance of features, such as the quick view.

In certain cases, you may need to capture these events after they occur, enabling you to execute custom scripts or integrate third-party applications.

All objects returned are vanilla JS objects and can be edited however you see fit.

1. Page loaded

The event is triggered when the HTML document has been fully parsed, and all deferred scripts have finished downloading and running.

document.addEventListener('page:loaded', function() {
  // Page has loaded and theme assets are ready
})

2. Product successfully added to the Ajax cart

Product object returned.

document.addEventListener('product-ajax:added', function(evt) {
  console.log(evt.detail.product);
});

3. Product could not be added to the Ajax cart

The error message will let you know the problem. Most of the time it is quantity related.

document.addEventListener('product-ajax:error', function(evt) {
  console.log(evt.detail.errorMessage);
});

4. Cart updated

JavaScript updates the cart object once the quantity is modified. This event is triggered after the cart markup has been updated and is open to customization.

Cart object returned.

document.addEventListener('cart:updated', function(evt) {
    console.log(evt.detail.cart);
});

5. Quick view modal has been opened

The first time the modal is opened, certain elements, like the add-to-cart form, are lazy-loaded. These elements are not immediately available.

document.addEventListener('quick-view:open', function(evt) {
  console.log(evt.detail.productUrl);
});

6. Quick view modal has been loaded

Only fires the first time the modal is opened.

document.addEventListener('quick-view:loaded', function(evt) {
  console.log(evt.detail.productUrl);
});

7. Variant selection changed

Variant object returned.

document.addEventListener('variant:changed', function(evt) {
    console.log(evt.detail.variant);
});

8. Collection page is refreshed

Fired when the collection page is re-rendered after filters are updated.

document.addEventListener('collection:rerendered', function() {
    console.log('collection refreshed');
});

9. Trigger cart drawer to refresh

Set the open parameter to false if you don't want the cart drawer to be open after the update.

document.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true, detail: { open: true }
}));

10. Product recommendations loaded

Fired when product recommendations or related products are loaded dynamically (e.g. via AJAX).

This event is useful for third-party apps that need to re-initialize UI elements such as badges.

document.addEventListener('recommendations:loaded', (event) => {
  console.log(event, 'related products loaded complete');
  // Run your custom callback or re-init logic here
});