Card Templates
Instead of writing a separate HTML card for each add-on, you can give the toggle a list of packages and one reusable card template. The toggle repeats the template once for each package in the list, filling in the details automatically.
This is useful when the set of add-ons is decided by campaign configuration rather than hardcoded in the page HTML.
<!-- The container holds the package list and points to the template -->
<div data-next-package-toggle
data-next-packages='[
{"packageId": 201, "label": "2-Year Warranty"},
{"packageId": 202, "label": "Shipping Insurance", "selected": true}
]'
data-next-toggle-template-id="toggle-tpl">
</div>
<!-- The template is invisible and reused for each package -->
<template id="toggle-tpl">
<div data-next-toggle-card
data-add-text="Add {toggle.label}"
data-remove-text="✓ {toggle.label} Added">
<strong>{toggle.label}</strong>
<span data-next-toggle-display="price"></span>
<del data-next-toggle-display="originalPrice"></del>
</div>
</template>The Package List
data-next-packages holds a list of packages in JSON format. Each entry needs at least a packageId — the ref_id of the package from your campaign.
[
{ "packageId": 201, "label": "2-Year Warranty" },
{ "packageId": 202, "label": "Shipping Insurance", "selected": true }
]Set "selected": true on an entry to auto-add that package when the page loads — same effect as data-next-selected="true" on a static card.
Any extra fields you add (like label above) become available as {toggle.<fieldName>} placeholders in the template.
Template Placeholders
Use {toggle.<name>} anywhere in your template HTML to insert a value.
Fields pulled from your package list:
Any field you include in the package list entry is available. For example, {"label": "Warranty"} → {toggle.label}.
Fields filled in automatically from the campaign:
| Placeholder | What it shows |
|---|---|
{toggle.packageId} | Package ref_id |
{toggle.name} | Package name |
{toggle.image} | Package image URL |
{toggle.quantity} | Package quantity |
{toggle.productId} | Product ID (empty if not set) |
{toggle.productName} | Product name |
{toggle.variantName} | Product variant name |
{toggle.variantId} | Product variant ID (empty if no variant) |
{toggle.sku} | Product SKU (empty if not set) |
{toggle.isRecurring} | "true" / "false" — whether the package bills on a recurring schedule |
{toggle.interval} | Billing interval: "day" or "month" (empty for one-time) |
{toggle.intervalCount} | Number of intervals between billing cycles (empty for one-time) |
{toggle.frequency} | Human-readable cadence: "Per month", "Every 3 months", "One time" |
For prices, use [data-next-toggle-display] slots inside the card — they receive formatted, cart-aware values after the price fetch. Template placeholders do not carry price data.
Embedding the Template in the Attribute
If the template is short, you can write it directly in the attribute instead of using a <template> element.
<div data-next-package-toggle
data-next-packages='[{"packageId":201,"label":"Warranty"}]'
data-next-toggle-template='<div data-next-toggle-card><strong>{toggle.label}</strong><span data-next-toggle-display="price"></span></div>'>
</div>For anything beyond a single line, the <template> approach is easier to read and maintain.