State Attributes

State attributes let you control element visibility based on cart, package, order, profile, and URL parameter state — declaratively, in HTML, with no JavaScript.

The two primary attributes are data-next-show and data-next-hide. They take an expression that is re-evaluated automatically every time the underlying data changes, and they toggle visibility via CSS classes (no DOM thrashing).

Quick Example

<button data-next-hide="cart.isEmpty">
  Proceed to Checkout
</button>

<div data-next-show="cart.total > 100">
  Free shipping unlocked!
</div>

<div data-next-show="cart.hasItem(123) && !cart.hasItem(456)">
  Add the matching accessory
</div>