Get Started

Add data-next-bundle-selector to a container element. The bundle selector scans for child [data-next-bundle-card] elements and registers each one.

<div data-next-bundle-selector>
  <!-- bundle cards go here -->
</div>

Static Card Mode

Write bundle cards directly in HTML. This is the simplest approach when you have a fixed set of options.

<div data-next-bundle-selector data-next-selection-mode="swap">

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

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

</div>

Auto-Render Mode

Provide a JSON array of bundle definitions via data-next-bundles and a card template via data-next-bundle-template-id. The bundle selector renders one card per definition.

Bundle Definition Format

[
  {
    "id": "starter",
    "name": "Starter Kit",
    "badge": "Most Popular",
    "selected": true,
    "items": [
      { "packageId": 10, "quantity": 1 }
    ]
  },
  {
    "id": "value",
    "name": "Value Pack",
    "items": [
      { "packageId": 10, "quantity": 1 },
      { "packageId": 20, "quantity": 2 }
    ],
    "vouchers": ["SAVE10"]
  }
]

"selected": true pre-selects that card on init — equivalent to data-next-selected="true" on a static card.

Any field other than items and selected is available as {bundle.<fieldName>} in the card template.

Card Template Variables

Variable	Value
`{bundle.id}`	Bundle ID
`{bundle.name}`	Bundle name
`{bundle.itemCount}`	Number of visible items (excludes `noSlot` items)
`{bundle.totalQuantity}`	Total quantity across all visible items
`{bundle.<anyField>}`	Any other field from the bundle definition (except `items` and `selected`)

Example

<div data-next-bundle-selector
     data-next-bundles='[{"id":"s","name":"Starter","items":[{"packageId":10,"quantity":1}]},{"id":"v","name":"Value Pack","items":[{"packageId":10,"quantity":1},{"packageId":20,"quantity":2}]}]'
     data-next-bundle-template-id="bundle-tpl">
</div>

<template id="bundle-tpl">
  <div data-next-bundle-card data-next-bundle-id="{bundle.id}" data-next-bundle-name="{bundle.name}">
    <h3>{bundle.name}</h3>
    <p data-next-bundle-display="price"></p>
    <p>Save: <span data-next-bundle-display="discountAmount"></span></p>
  </div>
</template>

Next Steps

Show prices inside cards: Prices
Add per-item slot rows: Slots
Add color/size pickers: Variants
See all attributes: Attributes