Quantity Sync
Use data-next-package-sync when an add-on's quantity should automatically match the main product quantity. For example: one warranty unit per product unit — when the visitor upgrades from 1 bottle to 3 bottles, the warranty automatically adjusts to 3 units.
<!-- Main product selector -->
<div data-next-package-selector data-next-selector-id="qty-picker">
<div data-next-selector-card data-next-package-id="10" data-next-selected="true">1 Bottle</div>
<div data-next-selector-card data-next-package-id="11">3 Bottles</div>
<div data-next-selector-card data-next-package-id="12">6 Bottles</div>
</div>
<!-- Warranty quantity mirrors packages 10, 11, or 12 in the cart -->
<div data-next-package-toggle>
<div data-next-toggle-card
data-next-package-id="201"
data-next-package-sync="10,11,12">
Add Warranty (quantity matches your order)
<span data-next-toggle-display="price"></span>
</div>
</div>data-next-package-sync accepts a comma-separated list of package IDs. The toggle card's quantity is set to the sum of quantities of those packages currently in the cart.
Behavior
| What happens in the cart | What happens to the toggle |
|---|---|
| One or more synced packages are in the cart | Toggle quantity matches the sum of their quantities |
| All synced packages are removed from the cart | Toggle item is automatically removed too |
| Toggle card is clicked to add | Quantity is calculated from the current cart before the item is added |
When synced packages use per-package quantities greater than 1 (e.g. a 3-pack), that multiplier is included in the sum.
When the main product quantity changes quickly (for example, rapid clicks between package options), updates are batched automatically so everything stays in sync.
Where to Place the Attribute
You can place data-next-package-sync on either the card element or its container wrapper — both work.
<!-- on the card -->
<div data-next-toggle-card data-next-package-id="201" data-next-package-sync="10,11,12">...</div>
<!-- or on a state container -->
<div data-next-toggle-container data-next-package-sync="10,11,12">
<div data-next-toggle-card data-next-package-id="201">...</div>
</div>Syncing Across All Variants — data-next-product-sync
Multi-variant products (configurable products) have a separate package ref_id per variant. When a customer swaps to a different variant, data-next-package-sync may miss the new variant's ID and undercount the quantity.
Use data-next-product-sync to sync against all variants of a product at once, using the single product_id shared by every variant:
<!-- Covers every variant of product 400, present and future -->
<div data-next-toggle-card data-next-package-id="200"
data-next-product-sync="400">
Extended Warranty
</div>Find the product_id in the campaign API response under packages[].product_id — it is the same value for every variant of the same product.
| What happens in the cart | What happens to the toggle |
|---|---|
| Any variant of the synced product is in the cart | Toggle quantity matches the total across all variants |
| All variants are removed | Toggle item is automatically removed |
| A variant is swapped for another | Toggle quantity stays correct without any extra configuration |
Using Both Attributes Together
data-next-package-sync and data-next-product-sync can be set on the same card. Items already counted by data-next-package-sync are excluded from the data-next-product-sync pass to prevent double-counting.
<div data-next-toggle-card data-next-package-id="200"
data-next-package-sync="10"
data-next-product-sync="400">
Extended Warranty (covers single-pack + all variants)
</div>Use data-next-package-sync alone for single-package (non-variant) products; use data-next-product-sync whenever the main product has multiple variants.