Operators

The conditional parser supports comparison, logical, and grouping operators. Combine them to build powerful conditions without leaving HTML.

Comparison Operators

Operator	Description	Example
`==`	Equal (with type coercion)	`cart.total == 100`
`===`	Strict equal	`profile.active === 'premium'`
`!=`	Not equal	`cart.shipping != 0`
`!==`	Strict not equal	`profile.active !== 'free'`
`>`	Greater than	`cart.totalQuantity > 5`
`<`	Less than	`cart.total < 50`
`>=`	Greater than or equal	`cart.items.length >= 3`
`<=`	Less than or equal	`cart.discount <= 10`

Logical Operators

Operator	Description
`&&`	Logical AND — all conditions must be true
`\|\|`	Logical OR — any condition must be true
`!`	Logical NOT — invert the value

AND (`&&`)

Both conditions must be true.

<!-- Premium package AND minimum order met -->
<div data-next-show="cart.hasItem(15) && cart.total > 50">
  Premium package qualifies for the discount
</div>

<!-- Multiple AND conditions -->
<div data-next-show="cart.hasItems && cart.totalQuantity > 2 && cart.total > 30">
  Bulk order discount applied
</div>

OR (`||`)

Any condition can be true.

<!-- Show if cart has either of two packages -->
<div data-next-show="cart.hasItem(15) || cart.hasItem(3)">
  You have an eligible package!
</div>

<!-- Combine with comparisons -->
<div data-next-show="cart.total > 100 || cart.totalQuantity > 5">
  Eligible for bulk discount
</div>

NOT (`!`)

Invert a condition.

<!-- Show when item is NOT in cart -->
<div data-next-show="!cart.hasItem(6)">
  <button data-next-action="add-to-cart" data-next-package-id="6">
    Add Extended Warranty
  </button>
</div>

<!-- Combine with AND -->
<div data-next-show="cart.hasItems && !cart.hasItem(123)">
  Complete your order with our premium package
</div>

Parentheses

Use parentheses to control evaluation order. Without them, && binds tighter than ||.

<!-- Group OR conditions, then AND -->
<div data-next-show="(cart.hasItem(15) || cart.hasItem(3)) && cart.total > 50">
  Special offer unlocked
</div>

<!-- Eligibility gate -->
<div data-next-show="cart.hasItem(15) && (cart.total > 100 || cart.totalQuantity > 3)">
  VIP checkout available
</div>

Real-World Patterns

Conditional warranty upsell

Show the warranty upsell only if a main product is in the cart but the warranty itself is not.

<div data-next-show="(cart.hasItem(2) || cart.hasItem(3) || cart.hasItem(4)) && !cart.hasItem(6)">
  <h3>Protect your purchase</h3>
  <button data-next-action="add-to-cart" data-next-package-id="6">
    Add 3-year warranty — $29.99
  </button>
</div>

Tiered messaging

Different message at each cart-value tier.

<div data-next-show="cart.total === 0">
  Your cart is empty
</div>

<div data-next-show="cart.total > 0 && cart.total < 50">
  Add $<span data-next-display="50 - cart.total">0</span> for free shipping
</div>

<div data-next-show="cart.total >= 50 && cart.total < 100">
  Free shipping unlocked! Add $<span data-next-display="100 - cart.total">0</span> for a gift
</div>

<div data-next-show="cart.total >= 100">
  Free shipping + gift included
</div>

Cross-sell only when it makes sense

<!-- Show if user has product A or B, but not the matching accessory -->
<div data-next-show="(cart.hasItem(100) || cart.hasItem(101)) && !cart.hasItem(200)">
  Complete your setup with our accessory bundle
</div>

Next Steps

All readable properties: Properties
Full operator reference: Reference → Attributes

On this page