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>