Bundle card events

This page is for theme developers. The bundle card host, <andor-bundle data-andor-widget="bundle">, sends the shared widget events. Its views, clicks and adds are also published as upsell offer events for custom pixels.

All DOM events are CustomEvents that bubble, so you can listen on document. The andor:offer_* events are not DOM events. Subscribe to them in a custom pixel.

Note A custom pixel is optional. AndOr counts offers without one. Add a pixel only if you want the andor:offer_* events in your own tools.

Events

Rules worth knowing:

• No event on first paint. The first pass sends andor:widget:mount and stores the state silently.
• Deduped. If nothing in the state changed, nothing is sent.
• To react to the bundle being applied, style or watch the host’s data-andor-progress attribute. It reads won once checkout applies the bundle.

Payloads

andor:widget:mount, andor:widget:unmount and andor:display:change carry event.detail.resource:

andor:display:change adds previous and current state objects. The bundle host carries no discount, kind, mode, date or price attributes, so the useful field is visible:

The andor:offer_* events carry event.customData:

No customer data, cart token or product ids are sent. The value is an estimate for your reports.

Examples

Log when a bundle card mounts:

document.addEventListener("andor:widget:mount", (event) => {
  const { widgetType, widgetId } = event.detail.resource;
  if (widgetType === "bundle") {
    console.log("bundle card on the page, block", widgetId);
  }
});

Optional: count bundle adds in a custom pixel:

// Shopify admin: Settings > Customer events > Add custom pixel
analytics.subscribe("andor:offer_added", (event) => {
  const { offerId, placement, valueCents } = event.customData;
  console.log("bundle add", offerId, placement, valueCents);
});

Events the widget listens for

Add bundle to cart adds lines with the hidden line property _andor_offer_id, then opens the theme’s cart. The card re-reads the cart on shopify:cart:lines-update, so a theme that sends that event keeps the card in step. See Cart updates.

Data attributes and states

The Buy X get Y banner and the gift banner on the product page use the same attributes.

For the attributes every widget shares, like data-andor-state and data-andor-progress, see Data attributes and states.