Selector lifecycle

Events: selector.*.

Selector lifecycle A selector is bound and picks its option: ?forceBundleId, the one in the cart, data-next-selected, else the first; selector.viewed comes once a page, when half of it is on screen. Options with no price from the last 10 minutes are being priced (selector.pricing), then priced (selector.priced); when every price is from the last 10 minutes it is priced at once, and those prices are checked again once a page (selector.priced again). Picking another option sends selector.selected. Changing the picked option’s quantity or a slot sends selector.updated and prices again; a coupon change prices again without selector.updated. Pricing that fails sends sdk.error and moves to unpriced: each option keeps its last price, else the package price; the next change prices again. A toggle follows the same lifecycle, its line priced while it is off. options need a price prices arrive pricing fails a change quantity or slot selector.updated every price is from the last 10 minutes another option selector.selected picked selector.viewed once half of it is on screen pricing selector.pricing priced selector.priced unpriced sdk.error

The lifecycle is one selector's (data-next-bundle-selector) on one page. An option is a card in it (data-next-bundle-card); option_id is its data-next-bundle-id. A toggle has its own, below.

StateMeans
pickedThe selector is bound and an option is picked; its options are priced at once
pricingThe options with no price from the last 10 minutes are being priced
pricedEvery option has a price
unpricedPricing failed; each option keeps its last price, else shows its package price
FromWhat happensToEvents, in order
noneThe selector is bound and picks its option: ?forceBundleId, the one in the cart, data-next-selected, else the firstpickednone; in swap mode cart.updated when the option was not in the cart yet
anyHalf of the selector comes on screen (at bind, in a browser without IntersectionObserver)same stateselector.viewed, once per selector on the page
pickedSome options have no price from the last 10 minutespricingselector.pricing
pickedEvery option has a price from the last 10 minutespricedselector.priced
pricingThe prices arrivepricedselector.priced
pricingPricing failsunpricedsdk.error (selector.price)
pricedPrices saved by an earlier page are checked again, once a pagepricedselector.priced with the fresh prices; if the check fails, sdk.error (selector.price) and the prices stay
anyAnother option is pickedsame stateselector.selected; in swap mode cart.updated follows
pricing, priced, unpricedThe picked option's quantity changes, or a slot of it (one unit of a configurable line) changes its variant or propertypricing, or priced if every price is from the last 10 minutesselector.updated, then selector.pricing or selector.priced; in swap mode cart.updated follows
pricing, priced, unpricedThe cart's coupons change, or the campaign arrives changed from its cached copyas aboveselector.pricing or selector.priced, after the change's own events

Picking

  • At bind: ?forceBundleId (<option>, or <selector>:<option>, comma-separated), else the option in the cart, else the card with data-next-selected="true", else the first card.
  • An option found in the cart comes back with its quantity and slots. A card with data-next-shipping-id also picks that shipping method: shipping.selected, in the cart lifecycle.
  • Markup bound again under the same selector id, such as with next.bind, keeps its pick while the option is still there, else picks again and sends selector.selected; no second selector.viewed.
  • The 0.4.x selector:selection-changed and bundle:selection-changed also come on the first bind.

Modes

  • Swap, the default (data-next-selection-mode): the picked option is the selector's own group in the cart, so cart.updated follows a pick, a quantity change and a slot change.
  • Select: the cart is left alone. Every selector on an upsell page (data-next-upsell) is select.
  • Offer (data-next-upsell-context, type: 'offer'): priced as an upsell, never put in the cart; see the upsell lifecycle.
  • While an order is being placed the cart is frozen: a swap selector ignores picks, quantity and slot changes and sends nothing.

Prices from the last 10 minutes

  • Each option is priced at its quantity and slots, with the cart's coupons, in the campaign's currency; a change to any of these prices it again.
  • Prices are kept 10 minutes in this browser, the newest 24.
  • A later page shows them at once with selector.priced, checks them once in the background without selector.pricing, then sends selector.priced again with the fresh prices.
  • A change while prices are pending drops that request without an event, and prices again as above.

Toggles

  • A toggle (data-next-toggle-card, a bump such as a warranty) has type: 'toggle', selector_id toggle:<package_id>, its one line and no options; selector.viewed when half of it is on screen.
  • While it is off its line is priced as if added: selector.pricing, then selector.priced; again when the rest of the cart, the coupons or its quantity change.
  • selector.selected when it is switched on, selector.deselected when its line leaves the cart: switched off, removed, set to 0, or the cart cleared; both just before that change's cart.updated.
  • Once on, its price comes with the cart on cart.*. A paid order empties the cart without events: no selector.deselected.

What each event carries

  • Every selector.* event carries the same Selector: selector_id, type, the picked option_id with its lines and total, the campaign's currency, and every option in options.
  • A line has the product as in the cart, and is priced once its option has a price; an option has total and original_total once priced.
  • The price that is paid comes with the cart on cart.*.

Errors

Each sends sdk.error with this action. The SDK lifecycle lists every action and code.

actionWhenWhat the SDK does next
selector.priceOptions or a toggle cannot be pricedEach option keeps its last price, else shows its package price; the next change prices again