Data Attributes Selection Reference
Attribute Required Description data-next-cart-selectoryes Marks the container element data-next-selector-idyes Unique ID for this selector. Used by data-next-display="selection.<id>.<prop>" and by add-to-cart buttons data-next-selection-modeno swap (default — write to cart immediately) or select (track selection only)
< div data-next-cart-selector data-next-selector-id = "main-product" data-next-selection-mode = "swap" > <!-- cards --> </ div > Attribute Required Description data-next-selector-cardyes Marks an element as a selectable card data-next-package-idyes Package ref_id for this card data-next-selected="true"no Pre-selects this card on init data-next-quantityno Initial quantity for this card. Default 1 data-next-min-quantityno Minimum allowed quantity. Default 1 data-next-max-quantityno Maximum allowed quantity. Default 999 data-next-shipping-idno Default shipping method to apply when this card is selected
Attribute Description data-next-quantity-increaseIncrement button. Auto-disabled at max data-next-quantity-decreaseDecrement button. Auto-disabled at min data-next-quantity-displayElement whose text content reflects the current quantity
< div data-next-selector-card data-next-package-id = "2" data-next-quantity = "1" data-next-min-quantity = "1" data-next-max-quantity = "10" > < button data-next-quantity-decrease >−</ button > < span data-next-quantity-display >1</ span > < button data-next-quantity-increase >+</ button > </ div > data-next-display="selection.<selectorId>.<property>" binds any element to the currently selected card's data.
Property Type Description namestring Selected package name packageIdnumber Selected package ID quantitynumber Quantity selected hasSelectionboolean true when at least one card is selected
Property Type Description pricecurrency Unit price unitPricecurrency Price per unit totalcurrency Unit price × quantity compareTotalcurrency Original total before discounts
Property Type Description savingsAmountcurrency Total savings savingsPercentagenumber Savings as a percentage hasSavingsboolean true when savings > 0isBundleboolean true when the package is a multi-packtotalUnitsnumber Total units in the selection
Use .raw for the numeric value: data-next-display="selection.main-product.total.raw" returns a plain number suitable for math operators.
When two selectors share the same data-next-selector-id value, selecting in one syncs the selection to the other. Useful for sticky headers and side-by-side comparison views.
