Quantity Actions

Quantity actions adjust the quantity of a specific package in the cart. Build increment/decrement controls or direct numeric input fields without writing JavaScript.

Increment / Decrement Buttons

<div class="quantity-control">
  <button data-next-quantity="decrease" data-next-package-id="42">−</button>
  <span data-next-display="cart.items[42].quantity">1</span>
  <button data-next-quantity="increase" data-next-package-id="42">+</button>
</div>

The buttons are auto-disabled (disabled attribute + next-disabled class) when the package is not in the cart.

Custom Step

Override the default 1 step with data-step.

<button
  data-next-quantity="increase"
  data-next-package-id="42"
  data-step="5">
  Add 5 More
</button>

Direct Numeric Input

<input
  type="number"
  data-next-quantity="input"
  data-next-package-id="42"
  min="1"
  max="10"
  value="1">

The input syncs with cart state in both directions:

• Typing a number updates the cart immediately
• External cart changes (e.g., from another button) update the input value

Set min and max to limit the allowed range. Out-of-range values are clamped silently.

Sync Quantity Across Packages

Mirror the total quantity of a list of packages onto another package. Useful for "one warranty per product" scenarios.

<!-- One warranty per main product -->
<button
  data-next-toggle="cart"
  data-next-package-id="warranty"
  data-next-package-sync="42,43,44">
  Add warranty
</button>

When the customer adds 3 of package 42, the warranty quantity becomes 3 automatically. When all 3 are removed, the warranty is removed too.

See Cart System → Buttons → Quantity Sync for the full pattern.

Display the Current Quantity

Use data-next-display="cart.items[<id>].quantity" to show the current quantity of a package in the cart.

<span data-next-display="cart.items[42].quantity">0</span>

Next Steps

• All quantity attributes: Reference → Attributes
• Selector cards with their own quantity controls: Selection → Reference → Attributes