Displaying Prices

Add display fields inside your card to show prices, product names, images, and other details. The system fills them in with real data from your campaign and keeps them up to date as the cart changes.

Show Data Inside a Card

Place elements with data-next-toggle-display inside a card. Each element shows a different piece of information based on the field name you provide.

The most common fields:

<div data-next-toggle-card data-next-package-id="201">
  <span data-next-toggle-display="name"></span>
  <img  data-next-toggle-display="image" />
  <span data-next-toggle-display="price"></span>
  <del  data-next-toggle-display="originalPrice"></del>
</div>

All Available Fields

Basic Info

Field	What it shows
`packageId`	Package `ref_id`
`name`	Package display name
`image`	Package image — sets `src` on `<img>` elements
`quantity`	Package quantity
`productName`	Product name
`variantName`	Product variant name (e.g. "Black / Large")
`sku`	Product SKU

Prices

Field	What it shows
`price`	Total price for the card's quantity
`unitPrice`	Per-unit price
`originalPrice`	Retail / compare-at total price
`originalUnitPrice`	Retail / compare-at per-unit price

Savings

Field	What it shows
`discountAmount`	How much the visitor saves
`discountPercentage`	Savings as a percentage
`hasDiscount`	Shows or hides the element — visible only when a discount applies

Subscriptions

Field	What it shows
`isRecurring`	Shows or hides the element — visible only when the package bills on a recurring schedule
`recurringPrice`	Recurring charge total
`originalRecurringPrice`	Original recurring price before discounts
`frequency`	Human-readable billing cadence: "Per month", "Every 3 months", "One time"
`interval`	Billing interval: "day" or "month"
`intervalCount`	Number of intervals between billing cycles

Other

Field	What it shows
`currency`	ISO currency code (e.g. "USD")
`isSelected`	Shows or hides the element — visible only when the package is in the cart

Fields like hasDiscount, isRecurring, and isSelected are yes/no flags. Instead of displaying text, they show or hide the element. For example, a "Save!" badge inside an element with data-next-toggle-display="hasDiscount" only appears when there is a discount.

The older data-next-toggle-price attribute still works and accepts the same field names. Use data-next-toggle-display in new markup.

How Prices Are Fetched

Prices for items already in the cart are read directly from the cart — no extra request is needed. Prices for items not in the cart are fetched by simulating the item in the cart, so offer discounts that depend on cart total are reflected correctly.

A next-loading class and data-next-loading="true" are set on the card while a price is being fetched.

Prices update automatically when:

The cart changes (items added, removed, or quantity updated)
Applied coupon codes change (works in both normal and upsell contexts)
The active currency changes

Include Shipping in Prices

To include shipping costs in the displayed price totals, add data-next-include-shipping="true" to the container:

<div data-next-package-toggle data-next-include-shipping="true">
  <div data-next-toggle-card data-next-package-id="201">
    <span data-next-toggle-display="price"></span>
  </div>
</div>

Show an Add-on's Data Outside Its Card

Sometimes you want to show an add-on's price or status outside of the card itself — for example, in a sidebar or a summary section.

Use data-next-display with three parts separated by dots: the word toggle, the package ID number, and the field name.

<!-- Show Package 201's price anywhere on the page -->
<span data-next-display="toggle.201.price"></span>

<!-- Show the original price with a strikethrough -->
<del data-next-display="toggle.201.originalPrice"></del>

<!-- Show savings (hidden automatically when there is no discount) -->
<span data-next-display="toggle.201.discountAmount" data-hide-if-zero="true"></span>

<!-- Show or hide based on cart state -->
<span data-next-display="toggle.201.isSelected"></span>

The package ID must match the data-next-package-id on the card. The card must be present on the page for external display elements to work.

All fields from the tables above are supported. You can also use these display modifiers: data-next-format, data-hide-if-zero, data-hide-if-false.

External display elements update when the card's price is fetched or when the cart selection changes. The card must be in the page before the external display element can show data.

Discount Lists Inside Cards

If your campaign applies discounts to individual add-ons, you can show each discount as a separate line inside the card. Add a data-next-discounts container with a <template> child that defines the markup for each discount row.

<div data-next-toggle-card data-next-package-id="201">
  <span data-next-toggle-display="price"></span>

  <div data-next-discounts>
    <template>
      <span class="badge">{discount.name}: -{discount.amount}</span>
    </template>
  </div>
</div>

Discount row placeholders

Placeholder	What it shows
`{discount.name}`	Discount or offer name
`{discount.amount}`	Formatted discount amount (e.g. "$10.00")
`{discount.description}`	Human-readable description (empty when not available)

Discount list CSS classes

Class	When applied
`next-discounts-empty`	No discounts for this package
`next-discounts-has-items`	One or more discounts

Discount lists are populated after each price fetch. Before the first fetch, the containers are empty and carry the next-discounts-empty class.

Per-package discounts come from the per-line breakdown in the price calculation. The offer/voucher filter (data-next-discounts="offer" / ="voucher") is not available at the toggle level — use the unfiltered data-next-discounts attribute.

On this page