Attributes

Conditional Display

Attribute	Description
`data-next-show="<expression>"`	Show the element when the expression evaluates to `true`
`data-next-hide="<expression>"`	Hide the element when the expression evaluates to `true`

Expressions support comparison, logical, and grouping operators across cart, package, order, profile, param, and selection namespaces.

Profile Conditional Attributes

Convenience attributes for the common case of profile-based visibility.

Attribute	Description
`data-next-show-if-profile="<list>"`	Show when the active profile matches one of the comma-separated names
`data-next-hide-if-profile="<list>"`	Hide when the active profile matches one of the comma-separated names

<div data-next-show-if-profile="vip,premium,gold">
  Member benefits apply
</div>

<div data-next-hide-if-profile="premium">
  Upgrade to premium for better prices
</div>

These are equivalent to data-next-show="profile.is('vip') || profile.is('premium') || profile.is('gold')" but shorter.

Operators

Operator	Description
`==` / `===`	Equal / strict equal
`!=` / `!==`	Not equal / strict not equal
`>` `<` `>=` `<=`	Comparison
`&&`	Logical AND
`\|\|`	Logical OR
`!`	Logical NOT
`( ... )`	Grouping

See Operators for examples.

Property Namespaces

Namespace	Source	Examples
`cart.*`	`cartStore`	`cart.hasItems`, `cart.total`, `cart.hasItem(123)`
`package.[id].*`	`campaignStore`	`package.123.inStock`, `package.123.hasDiscount`
`order.*`	`orderStore`	`order.exists`, `order.hasUpsells`
`profile.*`	`profileStore`	`profile.active`, `profile.is('vip')`
`param.*`	URL query string	`param.variant == 'a'`
`selection.<id>.*`	Active selector state	`selection.main.hasSelection`

See Properties for the full list.

State CSS Classes

State attributes manage CSS classes alongside visibility. See CSS Classes for the full reference.

Quick highlights:

Class	Applied to	When
`next-in-cart`	Elements with `data-next-package-id`	The package is in the cart
`next-selected`	Selector cards	The card is selected
`next-disabled`	Action buttons	The action is unavailable
`next-loading`	Action buttons	An async action is in flight

Performance

Conditions re-evaluate only when the underlying data changes, not on every render.
The SDK uses CSS for visibility (style.display = 'none'), not DOM removal — there is no layout cost from toggling visibility.
Compound conditions are short-circuited where possible (a && b skips b when a is false).

Avoid nested redundancy

<!-- Inefficient — both conditions evaluate -->
<div data-next-show="cart.hasItems">
  <div data-next-show="cart.total > 0">...</div>
</div>

<!-- Better — single combined condition -->
<div data-next-show="cart.hasItems && cart.total > 0">...</div>

Display Attributes — show dynamic data
URL Parameters — param.* lifecycle
Selection — selection.* properties

On this page