Quantity

Quantity controls live inside an offer container (data-next-upsell="offer" or data-next-upsell-selector). They let the customer pick how many units of the upsell to add before they accept.

There are two control patterns: increment/decrement buttons and quantity toggle cards.

Increment / Decrement Buttons

Use three elements: a decrease button, a display, and an increase button.

<div data-next-upsell="offer" data-next-package-id="42">
  <h3>Add Extra Batteries?</h3>
  <p>Never run out of power.</p>

  <div class="qty">
    <button data-next-upsell-quantity="decrease">−</button>
    <span data-next-upsell-quantity="display">1</span>
    <button data-next-upsell-quantity="increase">+</button>
  </div>

  <p>
    Total:
    <span data-next-upsell-quantity="display">1</span> ×
    <span data-next-display="package.price">$29.99</span>
  </p>

  <button data-next-upsell-action="add">
    Add <span data-next-upsell-quantity="display">1</span> to order
  </button>
  <button data-next-upsell-action="skip">No thanks</button>
</div>

The display element receives the current quantity as text content on every change. You can place as many display elements as you like inside the container — they all update together.

The current quantity range is 1 to 10. Clicks at the boundaries are clamped silently.

Quantity Toggle Cards

Use data-next-upsell-quantity-toggle="N" on each card. Clicking a card sets the quantity to N and applies next-selected to the card.

<div data-next-upsell="offer" data-next-package-id="42">
  <h3>Stock Up & Save!</h3>

  <div class="qty-cards">
    <div data-next-upsell-quantity-toggle="1">
      <h4>1 Pack</h4>
      <p>$29.99</p>
    </div>
    <div data-next-upsell-quantity-toggle="2">
      <h4>2 Pack</h4>
      <p>$49.99 — Save $10</p>
    </div>
    <div data-next-upsell-quantity-toggle="4">
      <h4>4 Pack</h4>
      <p>$89.99 — Best value!</p>
    </div>
  </div>

  <button data-next-upsell-action="add">
    Add <span data-next-upsell-quantity="display">1</span> pack to order
  </button>
</div>

The toggle whose value matches the current quantity gets the next-selected class. Style the selected state in CSS:

[data-next-upsell-quantity-toggle].next-selected {
  border: 2px solid currentColor;
}

Quantity toggle cards do not override the package — they only set the quantity. To offer different bundle sizes as different packages (e.g., a pkg-1, pkg-3, pkg-5), use option cards instead.

Per-Selector Quantities

When the offer has a selector with multiple options, each option can have its own quantity. Use data-next-quantity-selector-id on the inc/dec buttons to scope them to a specific selector ID.

<div data-next-upsell-selector data-next-selector-id="bundle">
  <div data-next-upsell-option data-next-package-id="42" data-next-selected="true">
    Single
  </div>
  <div data-next-upsell-option data-next-package-id="43">
    Family Pack
  </div>

  <div class="qty">
    <button data-next-upsell-quantity="decrease" data-next-quantity-selector-id="bundle">−</button>
    <span data-next-upsell-quantity="display" data-next-quantity-selector-id="bundle">1</span>
    <button data-next-upsell-quantity="increase" data-next-quantity-selector-id="bundle">+</button>
  </div>

  <button data-next-upsell-action="add">Add to order</button>
</div>

When the customer changes the selected option, the quantity for the new selector ID is loaded. This lets you offer different default quantities or different upper limits per option.

Quantity Sync Across Containers

When two containers share the same data-next-selector-id, quantity changes sync between them. This works the same way as option sync — useful for sticky headers or duplicate offer cards.

Reading the Current Quantity in JavaScript

The selected quantity is exposed on the offer container element as _quantity after each change. To read it programmatically:

const offer = document.querySelector('[data-next-upsell="offer"]');
console.log(offer.dataset.nextUpsellQuantity);

Listen to the change event:

window.next.on('upsell:quantity-changed', ({ selectorId, quantity, packageId }) => {
  console.log(`${selectorId ?? 'no-selector'} → ${quantity}`);
});

Next Steps

Multi-page funnels and redirect URLs: Page Flow
Quantity attribute reference: Reference → Attributes
Quantity events: Reference → Events