Attributes

Container Attributes

Core

Attribute	Description
`data-next-bundle-selector`	Marks the container; required to activate the enhancer
`data-next-selection-mode`	`swap` (default) or `select`. `swap` writes to cart immediately on card click; `select` only tracks selection — use with an external add-to-cart button
`data-next-selector-id`	Unique ID for this selector instance; used by `data-next-bundle-slots-for` elements and external enhancers (e.g. `AddToCartEnhancer`) to reference this selector
`data-next-include-shipping`	`true` / `false` — include shipping in price totals shown via display elements

Auto-render templates

Attribute	Description
`data-next-bundles`	JSON array of bundle definitions; renders one card per entry when a card template is also set
`data-next-bundle-template-id`	ID of an element whose `innerHTML` is the card template
`data-next-bundle-template`	Inline card template (alternative to `data-next-bundle-template-id`)
`data-next-bundle-slot-template-id`	ID of an element whose `innerHTML` is rendered once per bundle item slot
`data-next-bundle-slot-template`	Inline slot template (alternative to `data-next-bundle-slot-template-id`)
`data-next-variant-option-template-id`	ID of an element whose `innerHTML` is a single variant option; replaces the default `<select>`
`data-next-variant-selector-template-id`	ID of an element whose `innerHTML` wraps a variant attribute group; option elements are injected into `[data-next-variant-options]` inside it

CSS class overrides

Attribute	Default class overridden
`data-next-class-bundle-card`	`next-bundle-card`
`data-next-class-selected`	`next-selected`
`data-next-class-in-cart`	`next-in-cart`
`data-next-class-variant-selected`	`next-variant-selected`
`data-next-class-variant-unavailable`	`next-variant-unavailable`
`data-next-class-bundle-slot`	`next-bundle-slot`
`data-next-class-slot-variant-group`	`next-slot-variant-group`

Bundle Card Attributes

Attribute	Description
`data-next-bundle-card`	Marks an element as a selectable bundle card
`data-next-bundle-id`	Unique string identifier for this bundle (required)
`data-next-bundle-name`	Human-readable display name; exposed as `bundle.{id}.name` in display elements
`data-next-bundle-items`	JSON array of `{ packageId, quantity, configurable?, noSlot? }`
`data-next-bundle-vouchers`	Comma-separated or JSON array of coupon codes applied when this bundle is selected
`data-next-selected="true"`	Pre-selects this card on init

Bundle Item Fields

Field	Type	Description
`packageId`	number	Campaign package `ref_id`
`quantity`	number	Quantity to add to cart
`configurable`	boolean	When `true` and `quantity > 1`, expands the item into individual per-unit slots each with their own variant selectors
`noSlot`	boolean	When `true`, no slot row is rendered for this item (useful for silent add-ons like free gifts)

Slot Placeholder

Attribute	Description
`data-next-bundle-slots`	Placeholder element inside a bundle card where slot rows are injected. Required when `data-next-bundle-slot-template-id` is configured. Its content is replaced on every cart update. Do not attach event listeners to its children — they are destroyed on re-render

External Slots Container

Attribute	Description
`data-next-bundle-slots-for`	Renders the selected bundle's slot rows into an element outside the selector container. Value must match `data-next-selector-id` on the container. See Slot Templates

Use data-next-display="bundle.{selectorId}.{property}" on any element in the document to bind it to the currently selected bundle's state. {selectorId} must match data-next-selector-id on the container. Without data-next-selector-id, external display elements will not update.

Supported properties:

Property	Format	Description
`price`	currency	Total price after all discounts
`originalPrice`	currency	Total price before discounts
`discountAmount`	currency	Total discount applied to the bundle
`discountPercentage`	percentage	Discount as a percentage of the original price
`unitPrice`	currency	Total price after discounts divided by total visible slot quantity
`originalUnitPrice`	currency	Total price before discounts divided by total visible slot quantity
`hasDiscount`	boolean	`true` when a discount is applied
`isSelected`	boolean	`true` when this bundle card is currently selected
`name`	text	Value of `data-next-bundle-name` on the card element

Deprecated properties (still supported for backwards compatibility):

Property	Use instead
`compare`	`originalPrice`
`savings`	`discountAmount`
`savingsPercentage`	`discountPercentage`
`hasSavings`	`hasDiscount`

Supports all standard display modifiers: data-next-format, data-hide-if-zero, data-hide-if-false.

Display Attributes

data-next-bundle-display — place on elements inside a bundle card. The formatted value is written after each price fetch.

Field	Format	Description
`price`	currency	Total price after all discounts
`originalPrice`	currency	Total price before discounts
`discountAmount`	currency	Total discount
`unitPrice`	currency	Total price divided by total visible quantity
`originalUnitPrice`	currency	Original price divided by total visible quantity
`discountPercentage`	percentage	Discount as a percentage of the original price
`hasDiscount`	boolean	Element shown when a discount is applied; hidden otherwise
`isSelected`	boolean	Element shown when this bundle card is selected; hidden otherwise
`name`	text	Value of `data-next-bundle-name`

data-next-bundle-price (deprecated) — use data-next-bundle-display instead.

Attributes Set by the Enhancer on Variant Option Elements

When using a custom variant option template (data-next-variant-option-template-id), the enhancer sets these attributes on each rendered option element:

Attribute	Description
`data-next-variant-option`	Attribute code this option controls (e.g. `color`)
`data-next-variant-value`	Option value this element represents (e.g. `red`)