Get Started

Bind your first display element in 30 seconds.

Add a Display Element

<span data-next-display="cart.total">$0.00</span>

That is the entire setup. The element's text content is replaced with the live cart total whenever it changes.

The fallback text ($0.00 in this example) is what visitors see until the SDK has loaded. Always provide a meaningful fallback so the page renders correctly with JavaScript disabled.

Format the Value

Add data-format to control how the number is rendered.

<span data-next-display="cart.total"
      data-format="currency">$0.00</span>

<span data-next-display="cart.totalQuantity"
      data-format="integer">0</span>

<span data-next-display="package.42.savingsPercentage"
      data-format="percentage">0%</span>

See Configuration → Formatting for the full list.

Hide When Zero

Hide the element when its value is 0 — perfect for optional cart line items.

<div data-next-display="cart.discount" data-hide-if-zero="true">
  Discount: <span data-next-display="cart.discount">$0</span>
</div>

When there is no discount, the entire <div> is hidden.

Combine With Conditional Display

Use data-next-show and data-next-hide for conditions that depend on something other than the display value.

<div data-next-show="cart.hasItems">
  <p>Subtotal: <span data-next-display="cart.subtotal">$0.00</span></p>
</div>

<div data-next-show="cart.isEmpty">
  <p>Your cart is empty.</p>
</div>

Verify It Is Working

After loading the page:

• The display element should show the fallback text immediately
• Within a few hundred milliseconds, it should update to the live value
• Console: [CartDisplayEnhancer] Initialized (or similar) for each display element

If the value never updates:

• Check that the path is valid — cart.total not cart.totalAmount
• Check that there is data to display (e.g., cart.total is 0 for an empty cart)
• Open nextDebug.stores.cart.getState() in the console to inspect the source data

Next Steps

• All readable paths: Display Paths
• Render cart line items with templates: Cart Items Template
• Package-specific displays with shorthand syntax: Package Display
• Full attribute reference: Reference → Attributes