Data AttributesOrder DataReference
Attributes
Every data- attribute and order.* path consumed by the order data system.
Activation
The order is loaded automatically when the page URL contains ?ref_id=ORDER_ID. There is no opt-in attribute to set.
For analytics tracking, mark the page as a receipt:
<meta name="next-page-type" content="receipt">Display Bindings
Use data-next-display="order.<path>" to bind any element to live order data.
See Properties for the full path list, grouped by category. Quick reference:
| Group | Examples |
|---|---|
| Identification | order.id, order.number, order.refId, order.status, order.createdAt |
| Totals | order.total, order.subtotal, order.shipping, order.tax, order.discounts |
| Customer | order.customer.name, order.customer.email, order.customer.firstName |
| Address | order.shippingAddress.full, order.billingAddress.line1 |
| Lines (aggregate) | order.lines.count, order.lines.totalQuantity, order.lines.upsellCount |
| Lines (by index) | order.lines[0].title, order.lines[0].price, order.lines[0].quantity |
| Attribution | order.attribution.utm_source, order.attribution.gclid |
Append .raw for numeric values: order.total.raw, order.subtotal.raw, order.shipping.raw.
Order Items Renderer
| Attribute | Description |
|---|---|
data-next-order-items | Activates the order items renderer on the container |
data-item-template-id | ID of a <template> element to use as the item template |
data-item-template-selector | CSS selector pointing at the template element |
data-item-template | Inline template string |
data-empty-template | Inline template string for the empty state |
See Order Items Template for the full variable list.
Conditional Display Properties
Boolean properties usable inside data-next-show and data-next-hide.
| Property | Description |
|---|---|
order.exists | Order loaded successfully |
order.isLoading | Order fetch in flight |
order.hasError | Order failed to load |
order.hasItems | Order has line items |
order.hasShipping | Shipping was charged |
order.hasTax | Tax was charged |
order.hasDiscounts | Discounts applied |
order.hasUpsells | Order has upsell line items |
order.supportsUpsells | Can accept post-purchase upsells |
order.isTest | Test order |
order.isExpired | Stored order is older than 15 minutes |
CSS Classes
| Class | Applied to | When |
|---|---|---|
next-loading | <html> | Order is being fetched |
next-loaded | <html> | Order loaded successfully |
next-error | <html> | Order failed to load |
Snake Case vs Camel Case
Most order properties have both forms. Use whichever you prefer:
| Snake case | Camel case |
|---|---|
order.ref_id | order.refId |
order.created_at | order.createdAt |
order.is_test | order.isTest |
order.order_status_url | order.statusUrl |
order.total_incl_tax | order.total |
order.total_excl_tax | order.totalExclTax |
order.payment_method | order.paymentMethod |
order.shipping_method | order.shippingMethod |
order.supports_upsells | order.supportsUpsells |
Notes
- Order data lives in
orderStorewith a 15-minute expiry. After 15 minutes the data is cleared on the next page load. - For long-lived receipt pages, the URL
ref_idis the source of truth — the SDK refetches when needed. - The
order.user.*namespace is an alias fororder.customer.*and provides identical fields.
Related
- Display Attributes —
data-next-displaysyntax - State Attributes — conditionals
- Upsells — post-purchase upsell flows that update the order