1<div data-next-cart-selector data-next-selection-mode="swap">
2  <div data-next-selector-card data-next-package-id="2">...</div>
3  <div data-next-selector-card data-next-package-id="3" data-next-selected="true">...</div>
4</div>

1<div data-next-cart-selector 
2     data-next-selector-id="button-selector"
3     data-next-selection-mode="select">
4  <div data-next-selector-card data-next-package-id="3">...</div>
5</div>
6
7<button data-next-action="add-to-cart" 
8        data-next-selector-id="button-selector">
9  Add to Cart
10</button>

1<button data-next-action="add-to-cart" 
2        data-next-package-id="2" 
3        data-next-quantity="1">
4  Add to Cart
5</button>
6
7<button data-next-action="add-to-cart" 
8        data-next-package-id="3" 
9        data-next-quantity="3"
10        data-next-url="/checkout">
11  Add & Checkout
12</button>

1<script>
2    const packageId = 3;
3    
4    function updateDisplay() {
5        const cartData = window.next.getCartData();
6        const item = cartData.cartLines?.find(line => line.packageId === packageId);
7        const quantity = item ? item.quantity : 0;
8        document.querySelector('[quantity="display"] div').textContent = quantity;
9        
10        // Disable decrease button if quantity is 1 or less
11        const decreaseBtn = document.querySelector('[quantity="decrease"]');
12        if (quantity <= 1) {
13            decreaseBtn.disabled = true;
14            decreaseBtn.style.opacity = '0.5';
15            decreaseBtn.style.cursor = 'not-allowed';
16        } else {
17            decreaseBtn.disabled = false;
18            decreaseBtn.style.opacity = '1';
19            decreaseBtn.style.cursor = 'pointer';
20        }
21    }
22
23    document.querySelector('[quantity="decrease"]').addEventListener('click', function() {
24        const cartData = window.next.getCartData();
25        const item = cartData.cartLines?.find(line => line.packageId === packageId);
26        if (item && item.quantity > 1) {
27            window.next.updateQuantity({ packageId: packageId, quantity: item.quantity - 1 });
28            setTimeout(updateDisplay, 100);
29        }
30    });
31
32    document.querySelector('[quantity="increase"]').addEventListener('click', function() {
33        const cartData = window.next.getCartData();
34        const item = cartData.cartLines?.find(line => line.packageId === packageId);
35        const currentQuantity = item ? item.quantity : 0;
36        window.next.updateQuantity({ packageId: packageId, quantity: currentQuantity + 1 });
37        setTimeout(updateDisplay, 100);
38    });
39
40    updateDisplay();
41    
42    </script>

1<!-- Direct mode: package ID on container -->
2<div data-next-upsell="offer" data-next-package-id="7">
3    <h3>Add Extra Battery?</h3>
4    <button data-next-upsell-action="add">Yes</button>
5    <button data-next-upsell-action="skip">No</button>
6</div>

1<!-- Selector mode: uses selector ID -->
2<div data-next-upsell-selector data-next-selector-id="protection">
3    <div data-next-upsell-option data-next-package-id="7">
4        Basic - $14.99
5    </div>
6    <div data-next-upsell-option data-next-package-id="9" data-next-selected="true">
7        Premium - $24.99
8    </div>
9    <button data-next-upsell-action="add">
10        Add Selected
11    </button>
12</div>

1<!-- Wrap in upsell container -->
2<div data-next-upsell-selector data-next-selector-id="training">
3    <select data-next-upsell-select="training">
4        <option value="">Choose...</option>
5        <option value="2">Beginner - $29.99</option>
6        <option value="3" selected>Advanced - $49.99</option>
7    </select>
8    
9    <button data-next-upsell-action="add">
10        Add Course
11    </button>
12</div>

1<!-- Quantity controls -->
2<div data-next-upsell="offer" data-next-package-id="7">
3    <button data-next-upsell-quantity="decrease">-</button>
4    <span data-next-upsell-quantity="display">1</span>
5    <button data-next-upsell-quantity="increase">+</button>
6    
7    <button data-next-upsell-action="add">Add to Order</button>
8</div>

1<!-- Quantity toggle cards -->
2<div data-next-upsell="offer" data-next-package-id="7">
3    <div data-next-upsell-quantity-toggle="1">1 Pack</div>
4    <div data-next-upsell-quantity-toggle="2">2 Pack</div>
5    <div data-next-upsell-quantity-toggle="4">4 Pack</div>
6    
7    <button data-next-upsell-action="add">
8        Add <span data-next-upsell-quantity="display">1</span> to Order
9    </button>
10</div>