Selection Attributes

Selection attributes mark elements as package selectors and bind display elements to the currently selected package. Use them when you want a customer to choose between multiple packages before adding to cart.

For most cases, prefer the higher-level Bundle Selector or Cart System docs — they document selection patterns alongside the cart writes and have full attribute reference. This page is the cross-cutting attribute summary.

Quick Example

<div data-next-cart-selector data-next-selector-id="main-product">
  <div data-next-selector-card data-next-package-id="1" data-next-selected="true">
    1 Pack — $99
  </div>
  <div data-next-selector-card data-next-package-id="2">
    3 Pack — $249
  </div>
  <div data-next-selector-card data-next-package-id="3">
    5 Pack — $399
  </div>
</div>

<!-- Display the current selection's price anywhere on the page -->
<p>You will pay: <span data-next-display="selection.main-product.total">$0</span></p>

Selection Display Path

Once you have a selector with data-next-selector-id="<id>", you can bind any display element to it using the selection.<id>.<property> path:

<span data-next-display="selection.main-product.name">Product Name</span>
<span data-next-display="selection.main-product.price">$99</span>
<span data-next-display="selection.main-product.total">$99</span>
<span data-next-display="selection.main-product.savingsAmount">$0</span>

<div data-next-show="selection.main-product.hasSelection">
  Something is selected
</div>

The display updates automatically as the customer changes their selection.

Reference

All selection container, card, and display attributes.

Quick Example

Selection Display Path

Reference

See Also

On this page