Cart Items Template
data-next-cart-items is the dynamic line-item renderer. Mark a container, define a template, and the SDK clones the template once per cart line item, substituting {item.*} variables with live data.
For the higher-level cart summary that combines this with totals, see Cart Summary.
Basic Inline Template
The container's existing children are used as the template.
<div data-next-cart-items>
<div class="cart-item">
<h4>{item.name}</h4>
<p>SKU: {item.sku}</p>
<p>Qty: {item.quantity}</p>
<img src="{item.image}" alt="{item.name}">
</div>
</div>The SDK destroys and re-renders the children on every cart update.
Do not attach event listeners to the rendered children — they are destroyed on every re-render. The SDK auto-instantiates QuantityControlEnhancer and RemoveItemEnhancer on [data-next-quantity] and [data-next-remove-item] elements after each render, so you don't need to wire those manually.
Template by ID
For complex layouts, use a <template> and reference it.
<template id="cart-item-template">
<div class="cart-item">
<img src="{item.image}" alt="{item.name}">
<h4>{item.name}</h4>
<p>{item.variantAttributesFormatted}</p>
<p>Qty: {item.quantity}</p>
<p>{item.lineTotal}</p>
</div>
</template>
<div data-next-cart-items
data-item-template-id="cart-item-template">
</div>Empty State
Show a message when the cart has no items.
<div data-next-cart-items
data-item-template-id="cart-item-template"
data-empty-template="<p>Your cart is empty</p>">
</div>Group Identical Items
When the same package is added multiple times, group them into one row.
<div data-next-cart-items
data-group-items
data-item-template-id="cart-item-template">
</div>Template Variables
Identity
| Variable | Description |
|---|---|
{item.id} | Cart item ID |
{item.packageId} | Package ref_id |
{item.name} (or {item.title}) | Product name |
{item.sku} | Product SKU |
{item.image} | Image URL |
{item.quantity} | Quantity in cart |
{item.frequency} | "One time" or "Every month" |
Variants
| Variable | Description |
|---|---|
{item.productName} | Base product name |
{item.variantId} | Variant ID |
{item.variantName} | Full variant title (e.g. "Grey / Twin") |
{item.variantSku} | Variant SKU |
{item.variantAttributesFormatted} | "Color: Grey, Size: Twin" |
{item.variantColor} | Color value (dynamic) |
{item.variantSize} | Size value (dynamic) |
{item.variant.color} | Color (dot notation) |
{item.variant.size} | Size (dot notation) |
Individual variant attributes are auto-generated for every variant code in the campaign.
Pricing
| Variable | Description |
|---|---|
{item.price} | Package price |
{item.unitPrice} | Per-unit price |
{item.lineTotal} | Line total (price × quantity) |
{item.comparePrice} | Original price before discount |
{item.unitComparePrice} | Original unit price |
{item.lineCompare} | Original line total |
{item.recurringPrice} | Subscription price |
Savings
| Variable | Description |
|---|---|
{item.savingsAmount} | Total savings |
{item.unitSavings} | Per-unit savings |
{item.savingsPct} | Savings percentage |
Coupon discounts
| Variable | Description |
|---|---|
{item.discountAmount} | Coupon discount amount |
{item.discountedPrice} | Price after coupon |
{item.discountedLineTotal} | Line total after coupon |
{item.finalPrice} | Final display price |
{item.finalLineTotal} | Final line total |
Show / hide CSS hooks
These resolve to "show" or "hide" — use them as CSS class values.
| Variable | Shows when |
|---|---|
{item.showCompare} | Item has savings (compare price visible) |
{item.showSavings} | Item has savings |
{item.showRecurring} | Item is a subscription |
{item.showUnitPrice} | Multi-pack — unit price differs from package price |
{item.showDiscount} | Coupon discount applied |
{item.showOriginalPrice} | Original (strikethrough) price visible |
Booleans for conditionals
| Variable | Values |
|---|---|
{item.hasSavings} | "true" / "false" |
{item.isRecurring} | "true" / "false" |
{item.hasDiscount} | "true" / "false" |
Raw numeric values
Append .raw to a numeric variable to get the underlying number, useful in template math.
| Variable | Description |
|---|---|
{item.price.raw} | Numeric price |
{item.lineTotal.raw} | Numeric line total |
{item.savingsAmount.raw} | Numeric savings |
{item.discountedLineTotal.raw} | Numeric discounted total |
Custom Title Map
Override the rendered name per package with data-title-map. The value is a JSON object keyed by package ID.
<div data-next-cart-items
data-title-map='{"2": "Premium Package", "3": "Starter Kit"}'>
</div>Container Attributes Reference
| Attribute | Description |
|---|---|
data-next-cart-items | Activates the renderer on the container |
data-item-template-id | ID of a <template> to use as the item template |
data-item-template-selector | CSS selector pointing at the template |
data-item-template | Inline template string |
data-empty-template | Inline template for the empty state |
data-group-items | Group identical items into a single row |
data-title-map | JSON object mapping package IDs to titles |
Complete Example
<template id="cart-item-template">
<li class="cart-item">
<img src="{item.image}" alt="{item.name}">
<div class="details">
<h4>{item.name}</h4>
<p class="variant">{item.variantAttributesFormatted}</p>
<p class="frequency {item.showRecurring}">{item.frequency}</p>
</div>
<div class="qty">Qty: {item.quantity}</div>
<div class="pricing">
<span class="compare {item.showCompare}">{item.comparePrice}</span>
<span class="price">{item.lineTotal}</span>
<span class="discount {item.showSavings}">Save {item.savingsAmount}</span>
</div>
</li>
</template>
<ul data-next-cart-items
data-item-template-id="cart-item-template"
data-empty-template="<li>Your cart is empty</li>">
</ul>.show.hide,
.compare.hide,
.discount.hide,
.frequency.hide {
display: none;
}Next Steps
- Package-scoped display shorthand: Package Display
- All display paths and modifiers: Reference → Attributes
- Higher-level cart summary feature: Cart Summary