Selector and option

data-next-selector is a group of data-next-options, one picked. An option on its own is an order bump: a click puts it in the cart, the next takes it out. On a page opened with ?ref_id both are post-purchase offers, priced for the order and added with acceptUpsell.

CODE

<div data-next-selector="main">
  <div data-next-option="one" data-next-items="1">…</div>
  <div data-next-option="three" data-next-items="1x3" data-next-vouchers="TRIO10" data-next-selected>
    <span data-next-query="price"></span> each
    <s data-next-show="total_discount > 0" data-next-query="subtotal"></s>
  </div>
</div>

<div data-next-option="protect" data-next-items="9">Add protection for <span data-next-query="total"></span></div>

Inside an option, short paths read that option (total, price, lines.0.image); anywhere else, selector.main.total reads the picked one and selector.main.options.three.total a given one. An order bump reads as selector.<its id>.

Attributes

Attribute	On	Means
`data-next-selector="<id>"`	a container	The selector. Its options are the `[data-next-option]` inside it
`data-next-defer`	selector	The pick is only remembered; nothing goes in the cart until an `addItem` button names the selector
`data-next-option="<id>"`	option	One option. The id names it in events, `?forceBundleId` and `selector.<id>.options.<id>`
`data-next-items="1x3, 5"`	option	Its lines: package id, then `x` and the quantity (1 when left out), comma-separated
`data-next-selected`	option	Picked first. `="false"` reads as not set
`data-next-vouchers="CODE, CODE"`	option	Codes applied with its lines and used when it is priced
`data-next-shipping-id="<id>"`	option	The shipping method set when it goes in the cart
`data-next-quantity`	option	How many times its lines are taken. Default `1`
`data-next-min-quantity`, `data-next-max-quantity`	option	Limits for setQuantity. Default `1` and `999`
`data-next-slots`	option	Each unit is a slot that can be its own variant; draw them with `data-next-each="slots"`

The first pick is ?forceBundleId, else the option already in the cart, else data-next-selected, else the first. Each option is priced on the server with its own vouchers; until that price arrives, the campaign's prices show (an offer shows nothing until it is priced).

An order bump takes one package (data-next-items="9" or "9x2").

Set by the SDK

On an option	When
`data-next-selected`, `aria-pressed`	It is the picked one (a bump: on)
`data-next-in-cart`	Its lines are in the cart
`data-next-loading`	The options are being priced

The 0.4.x classes (next-selected, next-active, next-in-cart, next-not-in-cart) are set too, for CSS that already selects them.

Fields

Field	Type	Present
`price`	`number`	priced	`total ÷ quantity`: one package, after discounts.
`original_price`	`number`	priced	`subtotal ÷ quantity`: one package, before discounts.
`subtotal`	`number`	priced	What it costs before discounts.
`total_discount`	`number`	priced	`subtotal − total`.
`discount_percentage`	`number`	priced	`total_discount ÷ subtotal × 100`, to two decimals.
`selector_id`	`string`	always	`data-next-selector-id`, or `toggle:<package_id>` for a toggle.
`type`	`"bundle"` \| `"offer"` \| `"toggle"`	always
`option_id`	`string`	optional	The picked option's `data-next-bundle-id`; none for a toggle.
`lines`	`CartItem[]`	always	The lines the picked option puts in the cart, at its quantity; the toggle's line for a toggle. Priced once the option has a price.
`currency`	`string`	campaign	ISO 4217, such as `USD`.
`total`	`number`	priced	What the picked option costs after discounts.
`quantity`	`number`	always	Packages the picked option adds.
`in_cart`	`boolean`	always	`true` while the picked option's lines are in the cart.
`options`	`SelectorOption[]`	optional	Every option of a bundle or offer selector; none for a toggle.

CartItem

A line of the cart. Its prices are there once the server priced the cart.

Field	Type	Present
`package_id`	`number`	always	The package's `ref_id` in the campaign.
`quantity`	`number`	always	Package quantity.
`is_upsell`	`boolean`	optional	`true` for a line added after the order.
`properties`	`Record<string, string>`	optional	Line properties, such as a variant picked in a bundle slot.
`product_id`	`number`	campaign	The product in the store.
`product_title`	`string`	campaign	The product's name as customers see it, as on an order line; the package's name for a package without one.
`variant_id`	`number`	campaign	The product variant, for a product with variants.
`variant_title`	`string`	campaign	The variant's name, such as `Black / M`, for a product with variants.
`sku`	`string`	campaign	The product's Stock Keeping Unit.
`image`	`string`	campaign	The package's image URL.
`price`	`number`	priced	What one package costs after discounts.
`original_price`	`number`	priced	What one package costs before discounts; equal to `price` when nothing is taken off.
`total_discount`	`number`	priced	The discount on the line.
`total`	`number`	priced	`price × quantity`.
`subtotal`	`number`	priced	The line before discounts: `total = subtotal − total_discount`.
`discount_percentage`	`number`	priced	`total_discount ÷ subtotal × 100`, to two decimals; `0` without a discount.
`discounts`	`Discount[]`	priced	The discounts on the line.
`subscription`	`Subscription`	campaign	For a package billed again every interval.

SelectorOption

One option of a selector, at the quantity it would be added.

Field	Type	Present
`price`	`number`	priced	`total ÷ quantity`: one package, after discounts.
`original_price`	`number`	priced	`subtotal ÷ quantity`: one package, before discounts.
`subtotal`	`number`	priced	What it costs before discounts.
`total_discount`	`number`	priced	`subtotal − total`.
`discount_percentage`	`number`	priced	`total_discount ÷ subtotal × 100`, to two decimals.
`option_id`	`string`	always	The option's `data-next-bundle-id`, or `data-next-option`.
`lines`	`CartItem[]`	always	The lines the option puts in the cart. Priced once the option has a price.
`quantity`	`number`	always	Packages the option adds: its lines' quantities.
`selected`	`boolean`	always	`true` for the selector's picked option.
`total`	`number`	priced	What the option costs after discounts.
`original_total`	`number`	priced	What the option costs before discounts.

Discount

A discount on the cart's products or on its shipping. Amounts are in the cart's currency.

Field	Type	Present
`name`	`string`	always	The offer's name.
`amount`	`number`	always	The amount taken off.
`source`	`"offer"` \| `"coupon"`	always	`coupon` for a code the shopper entered (it is in `coupons`); `offer` for an automatic offer or a bundle card's own code.
`code`	`string`	optional	The code, for a coupon.
`offer_id`	`number`	always	The offer that gave it.
`percentage`	`number`	optional	The percentage the offer is set to take off, as the API reports it, such as `20`. Its configured value, for a label such as “20% off”; the amount actually taken off is `amount`.

Subscription

A package billed again every interval.

Field	Type	Present
`interval`	`"day"` \| `"month"`	always	The unit of the renewal interval.
`interval_count`	`number`	always	How many `interval`s between renewals.
`price`	`number`	priced	What each renewal charges, after discounts.
`original_price`	`number`	priced	What each renewal charges before discounts.