Cart Summary
Custom Template
Place a <template> element as a direct child of the data-next-cart-summary container. Its innerHTML becomes the layout. Scalar values are substituted using {token} placeholders on each render.
<div data-next-cart-summary>
<template>
<div class="row"><span>Subtotal</span><span>{subtotal}</span></div>
<div class="row"><span>Discounts</span><span>-{totalDiscount}</span></div>
<div class="row"><span>Shipping</span><span>{shipping}</span></div>
<div class="row"><span>Total</span><span>{total}</span></div>
</template>
</div>The full template is replaced on every cart change. Do not attach event listeners to elements inside — they are destroyed on every re-render.
Template Tokens
| Token | Description |
|---|---|
{subtotal} | Sum of all line item prices at their campaign rates — after sale pricing, before promotions and shipping |
{total} | Final amount due: subtotal + shipping − discounts. Use this as the checkout total |
{shipping} | Shipping charge; displays Free when no shipping cost applies |
{shippingOriginal} | Pre-discount shipping rate — empty string when no shipping discount is active. Pair with {shipping} to show a strikethrough |
{shippingDiscountAmount} | Absolute amount saved on shipping |
{shippingDiscountPercentage} | Shipping discount as a percentage (e.g. "10%") |
{shippingName} | Display name of the selected shipping method |
{shippingCode} | Code of the selected shipping method |
{totalDiscount} | Combined monetary reduction from offer promotions and coupon codes |
{totalDiscountPercentage} | Total discount as a percentage of the subtotal (e.g. "20%") |
{discounts} | Deprecated alias for {totalDiscount} — still rendered, use {totalDiscount} in new templates |
{currency} | Active currency code (e.g. "USD") |
{itemCount} | Number of distinct package lines in the cart (not total units). Example: 2× Package A + 3× Package B → 2 |
{totalQuantity} | Total unit quantity across all cart lines (e.g. "5") |
{isEmpty} | "true" or "false" — whether the cart has no items |
{hasDiscounts} | "true" or "false" — whether any discount is applied |
{isFreeShipping} | "true" or "false" — whether shipping cost is zero |
{hasShippingDiscount} | "true" or "false" — whether a shipping discount is applied |
{isCalculating} | "true" or "false" — whether a totals recalculation is in progress |
How the totals relate
{subtotal}→ after sale pricing, before promotions and shipping{total}→{subtotal}+{shipping}−{totalDiscount}
State CSS Classes
Classes are added and removed on the host element on every render to reflect the current cart state. Use these in CSS selectors to show or hide rows without JavaScript.
| Class | When applied |
|---|---|
next-cart-empty | Cart has no items |
next-cart-has-items | Cart has one or more items |
next-has-discounts | Discounts > 0 |
next-no-discounts | Discounts = 0 |
next-has-shipping | Shipping cost > 0 |
next-free-shipping | Shipping cost = 0 |
next-has-shipping-discount | A shipping discount is applied |
next-no-shipping-discount | No shipping discount |
next-calculating | Cart totals are being recalculated |
next-not-calculating | Cart totals are up to date |
Examples
Conditional discount row
Hide the discount row via CSS when no discounts are active:
<div data-next-cart-summary>
<template>
<div class="row"><span>Subtotal</span><span>{subtotal}</span></div>
<div class="row discount-row"><span>Discounts</span><span>-{totalDiscount}</span></div>
<div class="row"><span>Shipping</span><span>{shipping}</span></div>
<div class="row"><span>Total</span><span>{total}</span></div>
</template>
</div>
<style>
.next-no-discounts .discount-row { display: none; }
.next-free-shipping .shipping-row { display: none; }
</style>Shipping discount with strikethrough
Show the original shipping price with a strikethrough when a shipping discount is active:
<div data-next-cart-summary>
<template>
<div class="row"><span>Subtotal</span><span>{subtotal}</span></div>
<div class="row">
<span>Shipping</span>
<span>
<s class="original-shipping">{shippingOriginal}</s>
{shipping}
</span>
</div>
<div class="row"><span>Total</span><span>{total}</span></div>
</template>
</div>
<style>
.next-no-shipping-discount .original-shipping { display: none; }
</style>Discount amount and percentage row
Show a "You save" row with both the discount amount and the percentage saved:
<div data-next-cart-summary>
<template>
<div class="row"><span>Subtotal</span><span>{subtotal}</span></div>
<div class="row discount-row">
<span>You save ({totalDiscountPercentage})</span>
<span>-{totalDiscount}</span>
</div>
<div class="row"><span>Shipping</span><span>{shipping}</span></div>
<div class="row total"><span>Total</span><span>{total}</span></div>
</template>
</div>
<style>
.next-no-discounts .discount-row { display: none; }
</style>Next Steps
- Render a per-item list or per-discount breakdown inside the template: Cart Lines & Discounts
- Show individual cart values anywhere on the page: Cart Display
- All tokens and attributes: Reference → Attributes