Formatting

Format options control how the value of a data-next-display element is rendered.

`data-format`

Specify the format type for the displayed value.

Format	Description	Example output
`currency`	Currency with symbol	`$99.99`
`number`	Numeric only	`99.99`
`integer`	Whole numbers, no decimals	`100`
`percentage`	Percentage suffix	`30%`
`auto`	Auto-detect based on context	varies

<!-- Currency (default for prices) -->
<span data-next-display="cart.total" data-format="currency">$99.99</span>

<!-- Plain number -->
<span data-next-display="cart.total" data-format="number">99.99</span>

<!-- Integer -->
<span data-next-display="cart.totalQuantity" data-format="integer">5</span>

<!-- Percentage -->
<span data-next-display="package.123.savingsPercentage" data-format="percentage">30%</span>

The currency symbol used is taken from the active campaign currency (campaignStore.data.currency).

`data-hide-zero-cents`

When the value has no cents, hide the .00.

<!-- Renders "$100" instead of "$100.00" -->
<span data-next-display="package.123.price"
      data-format="currency"
      data-hide-zero-cents="true">$100</span>

<!-- Still renders "$99.99" because the cents are non-zero -->
<span data-next-display="package.456.price"
      data-format="currency"
      data-hide-zero-cents="true">$99.99</span>

Use this for cleaner price displays when most prices are round numbers.

`data-hide-if-zero`

Hide the entire element when the value is 0.

<!-- Hidden when there is no discount -->
<div data-next-display="cart.discount" data-hide-if-zero="true">
  Discount: <span data-next-display="cart.discount">$0</span>
</div>

<!-- Hidden when shipping is free -->
<div data-next-display="cart.shipping" data-hide-if-zero="true">
  Shipping: <span data-next-display="cart.shipping">$0</span>
</div>

This is the cleanest way to suppress optional line items in a cart summary.

`data-hide-if-false`

Hide the element when the value is false (or any falsy value).

<div data-next-display="cart.hasDiscount" data-hide-if-false="true">
  Discount applied!
</div>

<div data-next-display="package.123.inStock" data-hide-if-false="true">
  In stock and ready to ship
</div>

data-hide-if-zero and data-hide-if-false only work on elements with data-next-display. They do not work on bundle-display elements (data-next-bundle-display) — see Bundle Selector → Prices for the equivalent in that context.

Combine With State Conditionals

Format options work alongside data-next-show and data-next-hide for conditional display logic. The two are complementary:

data-hide-if-zero / data-hide-if-false — based on the displayed value of this element.
data-next-show / data-next-hide — based on any state expression.

<!-- Show when both: cart has items AND discount is non-zero -->
<div data-next-show="cart.hasItems"
     data-next-display="cart.discount"
     data-hide-if-zero="true">
  Discount: <span data-next-display="cart.discount">$0</span>
</div>

Next Steps

Math operators on display values: Math
Full attribute reference: Reference → Attributes

data-format

data-hide-zero-cents

data-hide-if-zero