Slot Templates

Add data-next-bundle-slot-template-id to the container and place a [data-next-bundle-slots] placeholder inside each card to render one row per bundle item with variant selectors.

<div data-next-bundle-selector
     data-next-bundle-slot-template-id="slot-tpl">

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

</div>

<template id="slot-tpl">
  <div class="slot-row">
    <img src="{item.image}" alt="{item.name}" />
    <strong>{item.name}</strong>
    <span>{item.price}</span>
  </div>
</template>

Slot Template Variables

Slot position:

Package identity:

Prices:

All values are pre-formatted currency strings (e.g. $10.00). {item.price} is the per-slot total — for a slot with quantity: 3, it is three times the unit price. Use {item.unitPrice} for the single-unit price. Currency is determined by the code returned from the bundle price fetch API; before the first fetch, the campaign's active currency is used.

Conditional helpers:

Conditional Display in Slots

Use data-next-show and data-next-hide on elements inside a slot template to toggle visibility based on slot variables.

• data-next-show="item.hasDiscount" — visible when the item has a discount, hidden otherwise
• data-next-hide="item.isRecurring" — hidden when the item is recurring, visible otherwise

Truthy values: "show", "true", or any non-empty string that is not "hide" or "false".

<template id="slot-tpl">
  <div class="slot-row">
    <img src="{item.image}" alt="{item.name}" />
    <strong>{item.name}</strong>
    <span>{item.price}</span>

    <div data-next-show="item.hasDiscount">
      Save {item.discountPercentage}!
      <del>{item.originalPrice}</del>
    </div>

    <div data-next-show="item.isRecurring">
      Billed {item.frequency} — {item.recurringPrice}
    </div>

    <div data-next-hide="item.isRecurring">
      One-time purchase
    </div>
  </div>
</template>

Any data-next-show / data-next-hide value that matches a slot variable (e.g. item.*, slot.*) is evaluated locally at render time. Store-based conditions like data-next-show="cart.itemCount > 0" still work inside slot templates — they are handled by the global ConditionalDisplayEnhancer after the slot enters the DOM.

Per-Slot Discount List

Place a data-next-discounts container inside the slot template to render discounts applied to each individual package in the bundle.

<template id="slot-tpl">
  <div class="slot-row">
    <img src="{item.image}" alt="{item.name}" />
    <strong>{item.name}</strong>
    <span>{item.price}</span>

    <div data-next-discounts>
      <template>
        <span class="badge">{discount.name}: -{discount.amount}</span>
      </template>
    </div>
  </div>
</template>

Discount row tokens

State classes

Per-slot discounts come from the per-line breakdown in the bundle price calculation. They are populated after each price fetch and cleared when the bundle is deselected.

External Slot Rendering

Use data-next-bundle-slots-for on an element outside the selector container to receive the slot rows for the currently selected bundle. The value must match data-next-selector-id on the container.

<div data-next-bundle-selector data-next-selector-id="my-selector" ...>
  <!-- bundle cards -->
</div>

<!-- Slots rendered here, outside the selector -->
<div data-next-bundle-slots-for="my-selector"></div>

Per-Unit Configuration (Configurable Items)

By default, a quantity-3 item renders as a single slot. Add "configurable": true to expand it into individual per-unit slots — one per unit — each with its own variant selectors.

[
  {
    "id": "pick3",
    "name": "Pick Your 3",
    "items": [
      { "packageId": 101, "quantity": 3, "configurable": true }
    ]
  }
]

This renders three slot rows, each with independent variant dropdowns. The cart is updated with the aggregated package quantities after all selections.

Silent Add-Ons (noSlot)

Set "noSlot": true on any bundle item to suppress its slot row. Useful for free gifts or invisible add-ons you want to include in the cart but not show in the slot list.

{
  "id": "premium",
  "items": [
    { "packageId": 10, "quantity": 1 },
    { "packageId": 99, "quantity": 1, "noSlot": true }
  ]
}