Displaying Prices
Inside Bundle Cards
Place [data-next-bundle-display] inside a bundle card or its template. Prices are fetched automatically and these elements are populated with formatted values.
<span data-next-bundle-display="price"></span> <!-- total price after discounts -->
<span data-next-bundle-display="originalPrice"></span> <!-- total price before discounts -->
<span data-next-bundle-display="discountAmount"></span> <!-- total discount -->
<span data-next-bundle-display="discountPercentage"></span>
<span data-next-bundle-display="unitPrice"></span> <!-- total / visible quantity -->
<span data-next-bundle-display="originalUnitPrice"></span>
<span data-next-bundle-display="hasDiscount"></span> <!-- shown when discount > 0 -->
<span data-next-bundle-display="isSelected"></span> <!-- shown when this card is selected -->
<span data-next-bundle-display="name"></span> <!-- bundle name -->
<span data-next-bundle-display="currency"></span> <!-- ISO 4217 currency code (e.g. USD) -->Prices are re-fetched automatically when:
- A variant is changed on a slot
- Applied vouchers change
- The active currency changes
Currency formatting uses the ISO 4217 code returned by the price fetch API. Before the first fetch resolves, prices are formatted using the campaign's active currency.
A next-loading class and data-next-loading="true" are set on the card element during price fetches.
External Price Display
Use data-next-display="bundle.{selectorId}.{property}" on any element in the document — including elements outside the selector container — to bind it to the currently selected bundle's state. {selectorId} must match the value of data-next-selector-id on the selector container. Without data-next-selector-id, external display elements will not update.
<div data-next-bundle-selector data-next-selector-id="my-selector" ...>
<!-- bundle cards -->
</div>
<span data-next-display="bundle.my-selector.price"></span>
<span data-next-display="bundle.my-selector.name"></span>
<span data-next-display="bundle.my-selector.isSelected"></span>
<span data-next-display="bundle.my-selector.discountAmount" data-hide-if-zero="true"></span>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 the currently selected card |
name | text | Value of data-next-bundle-name on the card element |
currency | text | ISO 4217 currency code used to format this bundle's prices (e.g. USD) |
Supports all standard display modifiers: data-next-format, data-hide-if-zero, data-hide-if-false.
Conditional Display Inside Bundle Cards
Elements inside bundle cards (including template-rendered cards) are picked up by the DOM observer after rendering, so data-next-show, data-next-hide, and data-next-timer all work inside bundle cards.
data-next-show / data-next-hide — show or hide an element based on cart state:
<div data-next-bundle-card data-next-bundle-id="premium" ...>
<!-- only visible when a coupon is applied -->
<span data-next-show="cart.hasCoupon">Coupon applied!</span>
</div>data-next-timer — a countdown timer can be placed inside a bundle card like any other element:
<div data-next-bundle-card data-next-bundle-id="starter" ...>
<span data-next-timer="600" data-next-timer-display></span>
</div>data-hide-if-zero does not work on data-next-bundle-display elements. The bundle display renderer does not read that attribute. Use hasDiscount instead, which hides the element automatically when the discount is zero:
<!-- works — built-in zero-hiding -->
<span data-next-bundle-display="hasDiscount">Save <span data-next-bundle-display="discountAmount"></span></span>
<!-- does not work — data-hide-if-zero is ignored here -->
<span data-next-bundle-display="discountAmount" data-hide-if-zero="true"></span>data-hide-if-zero is supported on data-next-display elements (see External Price Display).
Do not put data-next-show or data-next-hide on the same element as data-next-bundle-display="isSelected" or data-next-bundle-display="hasDiscount". Both the conditional display enhancer and the bundle display renderer control style.display on the same element — the last write wins and produces unpredictable visibility. Use a wrapper element instead:
<!-- correct — conditional on outer, bundle display on inner -->
<div data-next-show="cart.hasCoupon">
<span data-next-bundle-display="discountAmount"></span>
</div>