Next Commerce
Bundle Selector

Cart Mechanics

This page explains how the bundle selector manages cart state. You don't need to read this to get started — it's useful when debugging unexpected swap behavior or building on top of the bundle selector.


Tagged Items and the Retain-Replace Pattern

Every cart item written by the bundle selector is tagged with the selector's selectorId. This tag is what makes safe swapping possible when multiple bundles share the same package — items are identified for replacement by tag, not by package ID.

When a bundle is applied:

  1. Every item currently in the cart is read
  2. Items tagged to this selector are marked for replacement; all others are kept
  3. The new bundle's items are built and tagged with this selectorId
  4. A single window.next.cart.swapCart([...retained, ...newItems]) call replaces the full cart

Example — switching from "Starter" to "Duo" on selector-a:

Before swap:

PackageQtyTagged toAction
101selector-aReplaced
991Kept (toggle item)
422selector-bKept (other selector)

After swap:

PackageQtyTagged to
991Kept
422selector-bKept
101selector-aNew
201selector-aNew

Re-Entrant Guard

While a cart write is in flight, any further click or variant change is silently dropped. This prevents overlapping cart writes from a double-click or rapid selection.

TriggerBehavior
Card clicked — no write in progressCart write starts
Card clicked — write already in progressSilently ignored
Variant changed — no write in progressCart write starts
Variant changed — write already in progressSilently ignored

Failure Recovery

If a cart write fails (network error or API rejection):

StepWhat happens
1Visual selection reverts to the previous card (or clears if this was the first selection)
2The previous card's vouchers are re-applied
3The error is logged

A card only appears selected when its items are actually in the cart — the UI is always kept consistent with actual cart state.


Variant Change Apply

When the visitor changes a variant on a slot in the currently selected bundle (swap mode):

StepWhat happens
1The new package is resolved by matching all selected attribute values against the available packages
2The current slot state is saved as a snapshot
3The retain-replace pattern runs with the updated item list
4 (on failure)The slot snapshot is restored and the UI re-renders to match the previous state

On this page