Math

Compute new values from existing display paths without writing JavaScript. Math operators take a fixed number or another display path as their operand.

`data-multiply-by`

Multiply the displayed value.

<!-- Show annual price from monthly -->
<span data-next-display="package.123.monthlyPrice"
      data-multiply-by="12"
      data-format="currency">$1,188</span>

<!-- Convert decimal to percentage -->
<span data-next-display="cart.discountFraction"
      data-multiply-by="100"
      data-format="percentage">30%</span>

The operand can be:

A literal number (data-multiply-by="12")
Another display path (data-multiply-by="cart.subtotal")

`data-divide-by`

Divide the displayed value.

<!-- Convert cents to dollars -->
<span data-next-display="package.123.priceInCents"
      data-divide-by="100"
      data-format="currency">$9.99</span>

<!-- Average price per item -->
<span data-next-display="cart.total"
      data-divide-by="cart.totalQuantity"
      data-format="currency">$19.99</span>

`data-add`

Add to the displayed value.

<!-- Show price with tax -->
<span data-next-display="package.123.price"
      data-add="package.123.tax"
      data-format="currency">$109.99</span>

`data-subtract`

Subtract from the displayed value.

<!-- Calculate savings amount inline -->
<span data-next-display="package.123.originalPrice"
      data-subtract="package.123.price"
      data-format="currency">$20.00</span>

<!-- Amount needed for free shipping -->
<span data-next-display="100"
      data-subtract="cart.total"
      data-format="currency"
      data-hide-if-zero="true">$25.00</span>

The first display path can be a literal number (e.g. data-next-display="100").

Combining Operators

Operators can be chained on a single element. They evaluate in this order: multiply → divide → add → subtract.

<!-- Discount as a percentage of subtotal -->
<span data-next-display="cart.discount"
      data-divide-by="cart.subtotal"
      data-multiply-by="100"
      data-format="percentage">10%</span>

Raw Numeric Values

For more complex calculations on package data, use the .raw suffix on numeric paths:

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

.raw returns the underlying number rather than a formatted string. This is required when the value will be the input to a math operator.

Next Steps

Full attribute reference: Reference → Attributes
Display paths and the .raw suffix: Display → Reference

data-multiply-by

data-divide-by

data-add

data-subtract