Attributes

Every attribute a page writes has one role, and each role has its twin in JavaScript. Values come from one object model: the objects next.query() returns and events carry, with the same snake_case field names.

Role	Attributes	In JavaScript
Objects: things with state	`data-next-selector`, `data-next-option`, `data-next-checkout`, `data-next-promotion`	`next.query('selector.main')`
Display: values into the page	`data-next-query`, `data-next-show`, `data-next-hide`, `data-next-each`, `data-next-for`, `data-next-i18n`	`next.query()`, `next.watch()`
Actions: buttons and forms	`data-next-action`	`next.actions.<name>()`
Inputs	`data-next-field`	`checkout.*` paths
Widgets: UI the SDK draws	`data-next-address`, `data-next-payment`, `data-next-express`	—

Every other attribute is a parameter of one of these, named after a field of the model: data-next-shipping-id="3" is shipping_id: 3, on an option and on an addItem button alike.

CODE

<span data-next-query="cart.total"></span>

CODE

await next.query('cart.total'); // 39
next.on('cart.calculated', (cart) => cart.total); // the same Cart

New here? Start with the Quickstart, a whole page to copy, then the Recipes: one task per page, each example tested against the SDK.

Pages built with the earlier attributes keep working: see Legacy attributes.

Setup

Page	For
Loader script	`data-campaign`, `data-funnel`: loading the SDK
URL parameters	`forcePackageId`, `forceBundleId`, `reset`, `debug`, kept parameters
Page state	What the SDK sets for CSS: `data-next-ready`, `data-next-selected`, …
Language	`nextConfig.locale`, `nextConfig.translations`: prices and texts

Objects

Page	For
Cart	The cart and its lines
Selector and option	`data-next-selector`, `data-next-option`: picks, order bumps, offers
Package	`package.<id>`: a package at the campaign's price
Checkout	`data-next-checkout` and what the shopper entered
Order and upsell	The order on pages opened with `?ref_id`
Promotion	`data-next-promotion`: tracked banners
Campaign and params	`campaign.*`, `param.<name>`

Display

Page	For
data-next-query	Writes a value; `data-next-format`, `data-next-empty`
data-next-show	Shows on a condition
data-next-hide	Hides on a condition
data-next-each	One copy of a template per item of a list
data-next-for	The object children read short paths from
data-next-i18n	Text or an attribute in the page's language

Actions

Page	For
data-next-action	Runs an action on click or submit; `data-next-go`
Action list	Every action, its arguments and its events

Inputs

Page	For
data-next-field	Checkout fields, payment, variant pickers, line properties

Widgets

Page	For
data-next-address	An address for the selected country
data-next-payment	The payment methods the campaign offers
data-next-express	Express buttons