Data AttributesOrder Data
Order Items Template
data-next-order-items automatically renders all line items in an order using a template you provide. Use it instead of manually writing per-index order.lines[0], order.lines[1], etc.
Basic Inline Template
The container's existing children are used as the template — the SDK clones them once per line item and substitutes {item.*} variables.
<div data-next-order-items>
<div class="order-item">
<h4>{item.name}</h4>
<span>Qty: {item.quantity}</span>
<span>{item.lineTotal}</span>
</div>
</div>Template by ID
For more complex templates, define a <template> and reference it.
<template id="order-item-template">
<div class="order-item">
<img src="{item.image}" alt="{item.name}">
<h4>{item.name}</h4>
<p>SKU: {item.sku}</p>
<span>Qty: {item.quantity}</span>
<span>{item.lineTotal}</span>
</div>
</template>
<div data-next-order-items
data-item-template-id="order-item-template">
</div>Inline String Template
For one-line templates, use data-item-template.
<div data-next-order-items
data-item-template='<div class="item">{item.name} x{item.quantity}: {item.lineTotal}</div>'>
</div>Empty State
Show a message when the order has no items.
<div data-next-order-items
data-empty-template='<p>No items in this order</p>'>
</div>Template Variables
Identity
| Variable | Description |
|---|---|
{item.id} | Order line ID |
{item.name} (or {item.title}) | Product name |
{item.sku} | Product SKU |
{item.quantity} | Quantity |
{item.description} | Product description |
{item.variant} | Variant title |
{item.image} | Image URL |
Pricing
| Variable | Description |
|---|---|
{item.price} | Unit price (incl tax) |
{item.priceExclTax} | Unit price (excl tax) |
{item.unitTax} | Tax per unit |
{item.lineTotal} | Line total (incl tax) |
{item.lineTotalExclTax} | Line total (excl tax) |
{item.lineTax} | Total tax for the line |
Discounts (before vs after)
| Variable | Description |
|---|---|
{item.priceExclDiscounts} | Original unit price before discounts (incl tax) |
{item.priceExclTaxExclDiscounts} | Original unit price before discounts (excl tax) |
{item.lineTotalExclDiscounts} | Original line total before discounts (incl tax) |
{item.unitDiscount} | Discount per unit |
{item.lineDiscount} | Total discount for the line |
Status flags
| Variable | Values | Description |
|---|---|---|
{item.isUpsell} | "true" / "false" | Whether this is an upsell line |
{item.upsellBadge} | "UPSELL" or "" | Badge text |
{item.hasImage} | "true" / "false" | Has image |
{item.hasDescription} | "true" / "false" | Has description |
{item.hasVariant} | "true" / "false" | Has variant |
{item.hasTax} | "true" / "false" | Has tax |
{item.hasDiscount} | "true" / "false" | Has discount |
Show / hide CSS hooks
These resolve to "show" or "hide" — use them as CSS class values to conditionally render parts of your template.
| Variable | Shows when |
|---|---|
{item.showUpsell} | Item is an upsell |
{item.showImage} | Item has an image |
{item.showDescription} | Item has a description |
{item.showVariant} | Item has a variant |
{item.showTax} | Item has tax |
{item.showDiscount} | Item has a discount |
<template id="order-item-template">
<div class="order-item">
<span class="upsell-badge {item.showUpsell}">{item.upsellBadge}</span>
<img class="{item.showImage}" src="{item.image}" alt="{item.name}">
<span class="discount {item.showDiscount}">Save {item.lineDiscount}</span>
</div>
</template>.upsell-badge.hide,
.show.hide {
display: none;
}Complete Example
<template id="order-item-template">
<div class="order-item" data-line-id="{item.id}">
<div class="image {item.showImage}">
<img src="{item.image}" alt="{item.name}">
</div>
<div class="details">
<h4>
{item.name}
<span class="upsell-badge {item.showUpsell}">{item.upsellBadge}</span>
</h4>
<p class="sku">SKU: {item.sku}</p>
<p class="variant {item.showVariant}">{item.variant}</p>
</div>
<div class="qty">Qty: {item.quantity}</div>
<div class="pricing">
<span class="original {item.showDiscount}">{item.priceExclTaxExclDiscounts}</span>
<span class="current">{item.priceExclTax}</span>
<span class="line-total">{item.lineTotal}</span>
<span class="discount {item.showDiscount}">Saved: {item.lineDiscount}</span>
</div>
</div>
</template>
<div data-next-order-items
data-item-template-id="order-item-template"
data-empty-template="<p>No items in this order</p>">
</div>Next Steps
- Full property list: Properties
- All attributes: Reference → Attributes