JavaScript events

modblo sections communicate via standard CustomEvent on document. Listen for them to wire your own scripts in, dispatch them from your code to trigger UI updates, or hook them into your analytics.

cart:updated

Dispatched after any modblo section successfully adds, removes, or modifies a cart line item via the Shopify Cart AJAX API. The Cart Drawer Upsell, Sticky Add to Cart, Quiz, Shoppable Hotspots, Wishlist, Bundle Builder, Recently Viewed, and Thank You Page Upsell all dispatch this event.

document.addEventListener('cart:updated', () => {
  // Refresh your cart count badge, mini-cart, etc.
  fetch('/cart.js')
    .then(r => r.json())
    .then(cart => {
      document.querySelector('.my-cart-count').textContent = cart.item_count;
    });
});

document.dispatchEvent(new CustomEvent('cart:updated'));

modblo-consent:updated

Dispatched by the Cookie Consent Banner whenever the visitor saves their preferences. The detail object contains booleans for each category. Use this to gate analytics, advertising, and other third-party scripts.

document.addEventListener('modblo-consent:updated', (e) => {
  if (e.detail.analytics) {
    // Load Google Analytics
    const s = document.createElement('script');
    s.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
    s.async = true;
    document.head.appendChild(s);
  }
  if (e.detail.marketing) {
    // Load Meta Pixel, TikTok Pixel, etc.
  }
});

The event fires on page load too (with the previously-stored consent), so you don’t need to handle the "already consented" case separately. You can also read the current state via the public API:

const consent = window.cbConsent.get();
// { necessary: true, analytics: true, marketing: false, functional: true, ts: 1715000000000 }

Re-opening the consent modal

Two ways from anywhere on the page:

// 1. Programmatic
window.cbConsent.open();

// 2. Declarative — add this to your footer link
<a href="#" data-modblo-cc-trigger>Cookie preferences</a>

modblo-wishlist:updated

Dispatched by the Wishlist section whenever an item is added or removed from the user’s wishlist. The detail.count property gives the new total. All heart-toggle buttons on the page auto-refresh their visual state when this fires.

document.addEventListener('modblo-wishlist:updated', (e) => {
  const badge = document.querySelector('.my-wishlist-badge');
  badge.textContent = e.detail.count;
  badge.hidden = e.detail.count === 0;
});

variant:changed

The Notify When Back, Sticky Add to Cart, and Variant Picker Pro all listen for the standard variant:changed event that most modern Shopify themes (Dawn, Refresh, Origin) dispatch on the product page when the buyer changes the selected variant. If your theme uses a custom variant-picker, dispatch this event so modblo sections can react:

document.addEventListener('your-theme:variant-changed', (e) => {
  // Re-dispatch as the standard event so modblo sections pick it up
  document.dispatchEvent(new CustomEvent('variant:changed', {
    detail: { variant: e.detail.variant }
  }));
});

Tracking these events in your analytics

Wire any of these events into your analytics stack of choice. Example with Google Analytics 4:

document.addEventListener('modblo-wishlist:updated', (e) => {
  if (window.gtag) {
    gtag('event', 'add_to_wishlist', {
      wishlist_total: e.detail.count
    });
  }
});

document.addEventListener('cart:updated', () => {
  fetch('/cart.js').then(r => r.json()).then(cart => {
    if (window.gtag) {
      gtag('event', 'cart_updated', {
        cart_value: cart.total_price / 100,
        cart_items: cart.item_count
      });
    }
  });
});

Public window APIs

Two sections expose programmatic APIs on window for opening from external triggers (footer links, hero CTAs, etc.):

• window.cbConsent.open() — open the cookie preferences modal. .get() returns current state. .reset() clears stored consent and re-shows the bar.
• window.cbCartDrawer.open() — open the Cart Drawer Upsell from anywhere (e.g. after a successful add-to-cart from your own custom code). .close() closes it.

Next: troubleshooting

See Troubleshooting for what to do when an event doesn’t fire (usually a theme that intercepts the cart form).