Select Mode

Use data-next-selection-mode="select" when a separate button should trigger the cart write. The bundle selector tracks which bundle is selected but does not update the cart on click.

In select mode you manage the add-to-cart action yourself by listening to bundle:selection-changed and calling the cart API when the button is clicked. The currently selected bundle ID is also reflected in data-selected-bundle on the container element.

<div id="my-bundle-selector"
     data-next-bundle-selector
     data-next-selection-mode="select">

  <div data-next-bundle-card
       data-next-bundle-id="starter"
       data-next-bundle-items='[{"packageId":10,"quantity":1}]'
       data-next-selected="true">
    Starter
  </div>

  <div data-next-bundle-card
       data-next-bundle-id="duo"
       data-next-bundle-items='[{"packageId":10,"quantity":1},{"packageId":20,"quantity":1}]'>
    Duo Bundle
  </div>

</div>

<button id="add-bundle-btn">Add to Cart</button>

<script>
window.nextReady.push(() => {
  let selectedItems = [];

  window.next.on('bundle:selection-changed', ({ items }) => {
    selectedItems = items;
  });

  document.getElementById('add-bundle-btn').addEventListener('click', () => {
    if (selectedItems.length) {
      window.next.cart.swapCart(selectedItems);
    }
  });
});
</script>

Do not use swap mode on a bundle selector that feeds a custom add-to-cart button. Clicking a card fires a cart write and then the button fires another, resulting in a double cart write. Use select mode when you need a separate button.

Listening to Bundle Events

window.nextReady.push(() => {
  window.next.on('bundle:selection-changed', ({ selectorId, items }) => {
    console.log('Selected bundle:', selectorId, items);
  });

  window.next.on('bundle:price-updated', ({ selectorId }) => {
    console.log('Price updated for selector:', selectorId);
  });
});

See reference/events.mdx for the full event reference.

Listening to Bundle Events

On this page