Attributes

Every display attribute and modifier in one table.

Activation

Attribute	Description
`data-next-display="<path>"`	Bind the element's text content to the value at `<path>`
`data-next-cart-items`	Activate the cart items renderer on the container — see Cart Items Template
`data-next-order-items`	Activate the order items renderer — see Order Data → Order Items Template

Display Path Namespaces

Use any of these inside data-next-display:

Namespace	Source	See
`cart.*`	Cart store	Display Paths → Cart
`package.[id].*`	Campaign store	Package Display
`campaign.*`	Campaign store (root level)	Campaign Attributes
`order.*`	Order store	Order Data → Properties
`profile.*`	Profile store	State → Properties
`selection.<id>.*`	Active selector state	Selection

Formatting Modifiers

Attribute	Values	Description
`data-format`	`currency`, `number`, `integer`, `percentage`, `auto`	Output format
`data-hide-zero-cents`	`true` / `false`	Omit `.00` for round numbers
`data-decimal-places`	integer	Override default decimal places

See Configuration → Formatting.

Visibility Modifiers

Attribute	Description
`data-hide-if-zero`	Hide the element when the value is `0`
`data-hide-if-false`	Hide the element when the value is `false` (or any falsy value)

For visibility based on a separate state expression, use data-next-show / data-next-hide instead.

Math Modifiers

Attribute	Operation
`data-multiply-by`	`value × operand`
`data-divide-by`	`value ÷ operand`
`data-add`	`value + operand`
`data-subtract`	`value − operand`

The operand can be a literal number or another display path. See Configuration → Math.

Raw Numeric Values

Append .raw to a numeric path to get the underlying number rather than the formatted string. Required when the value is the input to a math operator.

<span data-next-display="cart.total.raw"
      data-multiply-by="0.1"
      data-format="currency">$9.90</span>

Available on most numeric paths: cart.total.raw, package.[id].price.raw, order.total.raw, selection.<id>.total.raw, etc.

Package Context Shorthand

When the element lives inside an element with data-next-package-id="<id>", you can omit the ID from the path:

Inside parent	Inside child element
`data-next-package-id="123"`	`data-next-display="package.price"`

This resolves to package.123.price automatically. See Package Display.

Cart Items Template Variables

Inside a data-next-cart-items container, use {item.*} syntax in the template instead of data-next-display. See Cart Items Template for the full variable list.

Order Items Template Variables

Inside a data-next-order-items container, use {item.*} syntax in the template. See Order Data → Order Items Template for the full variable list.

Fallback Content

The element's existing text content is shown until the SDK initializes. Always provide a meaningful fallback so the page renders correctly with JavaScript disabled.

<span data-next-display="cart.total">$0.00</span>
<span data-next-display="package.42.name">Loading...</span>

Performance Tips

Use specific paths. cart.total is faster than cart.items[0].lineTotal because it reads a precomputed value rather than walking the cart.
Combine related conditions. A single data-next-show="cart.hasItems && cart.total > 0" is faster than nesting two conditional elements.
Hide on parent containers. Putting data-next-show on a wrapper avoids re-evaluating the same condition for each child.

Configuration — formatting and math modifiers
State — conditional display based on state expressions
Cart Summary — full cart UI feature

On this page