Attributes

Host Element

data-next-cart-summary

Marks the element as a cart summary block. Place on the outermost container element.

<div data-next-cart-summary></div>

Template Tokens

Place inside a <template> direct child of data-next-cart-summary. Unrecognized tokens are left unchanged.

List Container Attributes

Place these on elements inside a <template> child. Each container must also include a <template> child defining the row markup. A container without a <template> child is silently ignored.

All list containers receive these state classes after each render:

data-summary-lines

Renders one row per cart line. Lines are sorted by package_id ascending.

Row tokens: see Object Attributes → SummaryLine.

data-summary-offer-discounts

Renders one row per offer (promotion) discount.

Row tokens: {discount.name}, {discount.amount}, {discount.description}.

data-summary-voucher-discounts

Renders one row per voucher (coupon) discount.

Row tokens: {discount.name}, {discount.amount}, {discount.description}.

data-line-discounts

Place inside a data-summary-lines row template to render per-line discount breakdowns.

Row tokens: {discount.name}, {discount.amount}, {discount.description}.

Receives next-summary-empty / next-summary-has-items classes.

Per-Line Conditional Display

Inside any line or discount row template, use data-next-show and data-next-hide to render rows conditionally per row. Conditions are evaluated at render time against the same data used for token replacement, so you do not need any global setup. Hidden elements are removed from the DOM and the attribute is stripped, so global show/hide processing never re-processes them.

<ul data-summary-lines>
  <template>
    <li>
      <span>{item.name}</span>
      <span data-next-show="item.quantity > 1">×{item.quantity}</span>
      <span data-next-hide="item.hasDiscount">{item.price}</span>
      <span data-next-show="item.isRecurring">Renews {item.frequency}</span>
    </li>
  </template>
</ul>

Syntax rules

• Use the no-braces syntax. Write item.quantity > 1, not {item.quantity} > 1 — the latter is substituted before evaluation and produces a malformed expression.
• Supported operators: >, >=, <, <=, ==, ===, !=, !==, &&, ||, !, parentheses.
• A bare property is interpreted as a truthy check: data-next-show="item.isRecurring".
• Conditions referencing other namespaces (e.g. cart.hasItems) are passed through untouched and processed by the global show/hide system. Avoid cart-wide conditions inside line templates — they thrash on every cart re-render. Place them outside the data-summary-lines template instead.
• Function-call conditions (e.g. item.hasFlag(x)) are not handled.

item.* namespace

Available in data-summary-lines row templates and inside any nested data-line-discounts template.

discount.* namespace

Available in data-summary-offer-discounts, data-summary-voucher-discounts, and data-line-discounts row templates.

Examples

<!-- Show only when quantity > 1 -->
<span data-next-show="item.quantity > 1">×{item.quantity}</span>

<!-- Hide when the line has a discount -->
<span data-next-hide="item.hasDiscount">{item.price}</span>

<!-- Logical combinations -->
<span data-next-show="item.isRecurring && item.discountPercentage >= 10">
  Subscriber bonus
</span>

<!-- NOT operator -->
<span data-next-show="!item.isRecurring">One-time purchase</span>

<!-- Discount-side conditions -->
<li data-next-show="discount.amount >= 5">{discount.name} -{discount.amountFormatted}</li>

Cart Display — data-next-display

Places a single reactive cart value on the element. Updates automatically on every cart change.

<span data-next-display="cart.total"></span>

Supported properties

Financial totals

Cart status

Per-item quantity:

<span data-next-display="cart.items[2].quantity"></span>

Optional modifiers