Cart Summary
Cart Display
Use data-next-display="cart.{property}" to place a single reactive cart value on any element. The element updates automatically whenever the cart changes — no container or <template> needed.
<p>Your total: <span data-next-display="cart.total"></span></p>
<p>Subtotal: <span data-next-display="cart.subtotal"></span></p>
<p>Savings: <span data-next-display="cart.totalDiscount"></span></p>
<p>Items: <span data-next-display="cart.itemCount"></span></p>Use Cart Display when you need individual values scattered across the page — a running total in a sticky header, an item count badge, or a shipping cost in a shipping banner. Use the Cart Summary when you need a grouped totals block.
Available Properties
Financial Totals
| Property | Description | Example output |
|---|---|---|
cart.subtotal | Subtotal before shipping and discounts | "$89.99" |
cart.total | Grand total after all discounts and shipping | "$99.99" |
cart.totalDiscount | Combined offer and voucher discount amount | "$9.00" |
cart.totalDiscountPercentage | Combined discount as a percentage of the subtotal; "0%" when no discounts | "10%" |
cart.shipping | Shipping cost; $0.00 when free — pair with data-hide-if-zero | "$5.00" |
cart.shippingOriginal | Original shipping before a shipping discount; $0.00 when no shipping discount | "$9.99" |
cart.shippingDiscountAmount | Absolute discount applied to shipping | "$4.99" |
cart.shippingDiscountPercentage | Shipping discount as a percentage of the original; "0%" when no shipping discount | "50%" |
cart.shippingName | Display name of the selected shipping method | "Standard Shipping" |
cart.shippingCode | Code of the selected shipping method | "standard" |
Cart Status
| Property | Description | Example output |
|---|---|---|
cart.itemCount | Number of distinct line items | "3" |
cart.totalQuantity | Total unit quantity across all cart lines | "5" |
cart.isEmpty | Whether the cart has no items | "Yes" / "No" |
cart.hasDiscounts | Whether any discount is applied | "Yes" / "No" |
cart.isFreeShipping | Whether shipping cost is zero | "Yes" / "No" |
cart.hasShippingDiscount | Whether a shipping discount is applied | "Yes" / "No" |
cart.isCalculating | Whether a totals recalculation is in progress | "Yes" / "No" |
cart.currency | Active currency code | "USD" |
Per-Item Quantity
<!-- Quantity of package ID 2 in the cart -->
<span data-next-display="cart.items[2].quantity"></span>Optional Modifiers
These attributes can be added alongside data-next-display to control rendering behavior:
| Attribute | Effect |
|---|---|
data-hide-if-zero | Hide the element when the value is 0 |
data-hide-if-false | Hide the element when the value is falsy |
data-hide-zero-cents | Omit .00 from currency output (e.g. $24 instead of $24.00) |
data-next-format | Override format type: currency, number, boolean, percentage, text, auto |
Examples
Item count badge
<span data-next-display="cart.itemCount"></span>Shipping cost — hidden when free
<span data-next-display="cart.shipping" data-hide-if-zero="true"></span>Sticky header total
<span data-next-display="cart.total"></span>Discount amount — hidden when no discount
<span data-next-display="cart.totalDiscount" data-hide-if-zero="true"></span>