Variant Selectors
Place [data-next-variant-selectors] inside a slot template to inject variant controls. One block is rendered per variant attribute dimension (e.g. Color, Size).
Variant selectors require slot templates — add data-next-bundle-slot-template-id to the container first.
Default: <select> Dropdowns
When no custom option template is configured, the enhancer renders a labeled <select> per attribute. Unavailable options receive the HTML disabled attribute.
<template id="slot-tpl">
<div class="slot-row">
<strong>{item.name}</strong>
<div data-next-variant-selectors></div>
</div>
</template>Custom Option Template
Provide data-next-variant-option-template-id on the container to replace <select> dropdowns with custom elements (buttons, swatches, etc.).
Option template variables:
| Variable | Description |
|---|---|
{attr.code} | Attribute code (e.g. color) |
{attr.name} | Attribute label (e.g. Color) |
{option.value} | Option value (e.g. Red) |
{option.selected} | "true" / "false" |
{option.available} | "true" / "false" — false when this combination doesn't exist |
CSS classes and data attributes on option elements:
| Class / Attribute | When |
|---|---|
next-variant-selected class | Option is currently selected |
next-variant-unavailable class | Option is unavailable for the current combination |
data-selected="true" | Option is currently selected |
data-next-unavailable="true" | Option is unavailable for the current combination |
Clicks on unavailable options are silently ignored. Use data-next-unavailable for CSS targeting when you need both a class and an attribute hook.
Custom Variant Group Wrapper
Provide data-next-variant-selector-template-id alongside data-next-variant-option-template-id to wrap each attribute group in a custom outer element. Option elements are injected into [data-next-variant-options] inside the wrapper.
Variant selector template variables:
| Variable | Description |
|---|---|
{attr.code} | Attribute code (e.g. color) |
{attr.name} | Attribute label (e.g. Color) |
{attr.selectedValue} | Currently selected option value |
Example with Custom Swatches
<div data-next-bundle-selector
data-next-bundle-slot-template-id="slot-tpl"
data-next-variant-option-template-id="variant-opt-tpl">
<div data-next-bundle-card
data-next-bundle-id="pick3"
data-next-bundle-items='[{"packageId":101,"quantity":3,"configurable":true}]'
data-next-selected="true">
<h3>Pick Your 3</h3>
<div data-next-bundle-slots></div>
</div>
</div>
<template id="slot-tpl">
<div class="slot-row">
<img src="{item.image}" alt="{item.name}" />
<span>Unit {slot.unitNumber}</span>
<div data-next-variant-selectors></div>
</div>
</template>
<template id="variant-opt-tpl">
<button class="swatch" data-selected="{option.selected}">
{option.value}
</button>
</template>
<!-- Style unavailable options via CSS using data-next-unavailable -->
<style>
.swatch[data-next-unavailable="true"] { opacity: 0.4; pointer-events: none; }
.swatch[data-selected="true"] { outline: 2px solid currentColor; }
</style>