Buy X get Y events

This page is for theme developers. The Buy X get Y banner host, <andor-bundle data-andor-widget="bxgy">, sends the shared widget events. The banner and the cart claim row also publish 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. andor:display:change fires only when the state really changed.
• Up to one second late. Treat a change event as a notice, not as the exact moment.
• The cart claim row is not a widget host. It sends no DOM events, only the andor:offer_* events.

Payloads

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

andor:display:change adds previous and current state objects (previous is null on the first change after mount). The banner 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.

Examples

React when the banner hides:

document.addEventListener("andor:display:change", (event) => {
  const { widgetType, previous, current } = event.detail.resource;
  if (widgetType !== "bxgy") return;
  if (previous?.visible && !current.visible) {
    console.log("Buy X get Y banner hid");
  }
});

Optional: count claims 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("upsell add", offerId, placement, valueCents);
});

Events the widget listens for

The banner and claim row redraw when your theme sends these Shopify events, so a theme that sends them gets the redraw for free:

• shopify:cart:lines-update: the cart changed. The widget reads it again.
• shopify:cart:view: the cart drawer opened.
• shopify:section:load: the theme editor re-rendered a section.

If you swap product markup with your own Ajax code, call AndOrDisplay.refresh() and AndOrEvents.refresh() afterwards. See JavaScript API.

Data attributes and states

Product page banner

The banner uses the same attributes as the bundle card. See Bundle card events.

Cart claim rows

Inside the claim host, the boxes use data-andor-state for their own progress, because no other script writes it there.

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