Addon ToggleReference
Attributes
Complete reference of all Addon Toggle attributes. For guided explanations with examples, see Get Started, Displaying Prices, and Card Templates.
Container Attributes
| Attribute | Description |
|---|---|
data-next-package-toggle | Marks the container (or the toggle element itself when used on a button); required to activate the Addon Toggle |
data-next-include-shipping | true / false — include shipping costs in price totals shown via data-next-toggle-display |
data-next-packages | JSON array of package definitions for generating cards from a list; creates one card per entry when a template is also set |
data-next-toggle-template-id | ID of a <template> element whose innerHTML is the card template |
data-next-toggle-template | Inline card template string (alternative to data-next-toggle-template-id) |
data-next-upsell-context | Switches the toggle to post-purchase upsell mode — clicks call the order API instead of the cart. Used on upsell/thank-you pages |
Card Attributes
| Attribute | Description |
|---|---|
data-next-toggle-card | Marks an element as a toggleable card |
data-next-package-id | Package ref_id — required per card |
data-next-selected="true" | Adds this package to the cart automatically on page load; will not be added again if already in the cart |
data-next-quantity | Quantity to add when toggling on (default 1); ignored when data-next-package-sync is set |
data-next-package-sync | Comma-separated list of package IDs — quantity mirrors the sum of those packages currently in the cart |
data-next-is-upsell="true" | Marks the item as an upsell/bump for order tracking |
data-next-url | Navigation URL after a successful upsell add; only used when data-next-upsell-context is set on the container. Falls back to a <meta name="next-upsell-url"> tag if not provided |
data-add-text | Text shown in the button text target when the package is not in the cart |
data-remove-text | Text shown in the button text target when the package is in the cart |
Card Helper Attributes
Place these on elements inside a card to bind specific behaviors.
| Attribute | Description |
|---|---|
data-next-button-text | Marks a child element as the text target for data-add-text / data-remove-text. When present, the button text is updated on this element instead of the card's own textContent |
data-next-toggle-image | Shorthand for data-next-toggle-display="image" on <img> elements — sets the src from the package image automatically |
Price & Data Display
Place these on elements inside a card (or card template) to populate them with price and product data.
| Attribute | Description |
|---|---|
data-next-toggle-display | Primary display field. Value is a field name (see table below). |
data-next-toggle-price | Older name for the same feature. Accepts the same field names as data-next-toggle-display. Use data-next-toggle-display in new markup. |
Supported field names (work with both attributes):
| Field | What it shows |
|---|---|
packageId | Package ref_id |
name | Package display name |
image | Package image URL — sets src on <img> elements, textContent otherwise |
quantity | Package quantity |
variantName | Product variant name |
productName | Product name |
sku | Product SKU; empty if not set |
price | Formatted total price for the card's quantity |
unitPrice | Per-unit price |
originalPrice | Retail / compare-at total price |
originalUnitPrice | Retail / compare-at per-unit price |
discountAmount | Savings amount; empty if no discount |
discountPercentage | Savings as a percentage; empty if no discount |
isSelected | Shows the element when the package is in the cart; hides it otherwise |
hasDiscount | Shows the element when a discount applies; hides it otherwise |
isRecurring | Shows the element when the package bills on a recurring schedule; hides it otherwise |
recurringPrice | Recurring charge total (quantity-scaled) |
originalRecurringPrice | Original recurring price before discounts; empty if not available |
interval | Billing interval: "day" or "month" |
intervalCount | Number of intervals between billing cycles |
frequency | Human-readable cadence: "Per month", "Every 3 months", "One time" |
currency | ISO 4217 currency code |
State Container Attribute
| Attribute | Description |
|---|---|
data-next-toggle-container | Marks an ancestor element as the state container for cards inside it. State classes and attributes are applied to this element instead of each card. See State Containers |
Attributes Set Automatically
On each card element:
| Attribute | Values | When set |
|---|---|---|
data-next-in-cart | "true" / "false" | Updated on every cart sync |
data-next-loading | "true" / "false" | Set while a cart operation or price fetch is in progress |
On the state container (when one is found):
| Attribute | Values | Description |
|---|---|---|
data-in-cart | "true" / "false" | Whether the package is in the cart |
data-next-active | "true" / "false" | Alias for data-in-cart |
Showing Data Outside a Card
Use data-next-display="toggle.{packageId}.{property}" on any element to bind it to a specific card's price or state. {packageId} must match data-next-package-id on the card.
<span data-next-display="toggle.201.price"></span>Supported properties:
| Property | Format | Description |
|---|---|---|
packageId | text | Package ref_id |
name | text | Display name from the campaign package |
image | image | Package image URL (sets src on <img> elements) |
quantity | text | Package quantity |
variantName | text | Product variant name |
productName | text | Product name |
sku | text | Product SKU (empty if not set) |
price | currency | Total price for the card's quantity (unit price x quantity) |
unitPrice | currency | Per-unit price |
originalPrice | currency | Retail / compare-at total price |
originalUnitPrice | currency | Retail / compare-at per-unit price |
discountAmount | currency | Savings amount (compare minus total) |
discountPercentage | percentage | Discount as a percentage of the compare price |
isSelected | boolean | true when this package is in the cart |
hasDiscount | boolean | true when a discount is applied |
isRecurring | boolean | true when the package bills on a recurring schedule |
recurringPrice | currency | Recurring charge total (quantity-scaled) |
originalRecurringPrice | currency | Original recurring price before discounts |
interval | text | Billing interval: "day" or "month" |
intervalCount | auto | Number of intervals between billing cycles |
frequency | text | Human-readable billing cadence: "Per month", "Every 3 months", "One time" |
currency | text | ISO 4217 currency code |
Supports all standard display modifiers: data-next-format, data-hide-if-zero, data-hide-if-false.
Discount Lists — data-next-discounts
Place inside a toggle card to show one row per discount applied to the package. Each container needs a <template> child defining the row markup.
Row placeholders: {discount.name}, {discount.amount}, {discount.description}.
CSS classes on the container:
| Class | When |
|---|---|
next-discounts-empty | No discounts for this package |
next-discounts-has-items | One or more discounts |
Populated after each price fetch. Before the first fetch, the containers are empty and carry the next-discounts-empty class.
The offer/voucher filter (data-next-discounts="offer" / ="voucher") is not available at the toggle level — per-line discounts from the API are not split by type. Use the unfiltered data-next-discounts attribute.
See Displaying Prices — Discount Lists for usage examples.