Cart Buttons
Various button types for managing cart items.
Add to Cart
Buttons that add a specific package directly, without a selector.
Basic add:
<button data-next-action="add-to-cart"
data-next-package-id="2"
data-next-quantity="1">
Add to Cart
</button>Add and redirect:
<button data-next-action="add-to-cart"
data-next-package-id="3"
data-next-quantity="3"
data-next-url="/checkout">
Add & Checkout
</button>Clear cart, add, and redirect:
<button data-next-action="add-to-cart"
data-next-package-id="2"
data-next-quantity="1"
data-next-url="/checkout"
data-next-clear-cart="true">
Clear Cart, Add & Go to Checkout
</button>Attributes:
| Attribute | Description |
|---|---|
data-next-action="add-to-cart" | Activates the add-to-cart button |
data-next-package-id | Package to add |
data-next-quantity | Quantity to add |
data-next-url | Redirect URL after adding |
data-next-clear-cart | Clear the cart before adding |
Toggle Buttons
Toggle items in and out of the cart. The button reflects cart state automatically.
Basic toggle:
<button data-next-toggle
data-next-package-id="9"
data-next-is-upsell="true">
Toggle Item
</button>Toggle with quantity:
<button data-next-toggle
data-next-package-id="8"
data-next-quantity="3">
Add Extra Propeller Set
</button>Dynamic text:
<button data-next-toggle
data-next-package-id="11"
data-add-text="Add Extra Drone"
data-remove-text="✓ Extra Drone Added">
Add Extra Drone
</button>Attributes:
| Attribute | Description |
|---|---|
data-next-toggle | Activates toggle functionality |
data-next-package-id | Package to toggle |
data-next-quantity | Quantity when toggled on |
data-add-text | Button text when item is not in cart |
data-remove-text | Button text when item is in cart |
data-next-is-upsell | Mark as upsell item |
data-next-package-sync | Sync quantity to other packages in the cart |
State Container
Apply data-next-package-id to a container element instead of directly to a button. The container receives state classes when the package is in the cart — all child elements can react via CSS.
<div class="product-container"
data-next-package-id="9"
data-next-quantity="2">
<!-- Container gets .next-in-cart when package is in cart -->
<button data-next-toggle>Toggle Bundle</button>
</div>Quantity Sync
Sync a toggle item's quantity to the combined quantity of other packages in the cart. Useful for warranties and accessories that should track the main product.
<!-- Warranty syncs its quantity to match the total drone quantity -->
<button data-next-toggle
data-next-package-id="10"
data-next-package-sync="2,3,4">
Add Protection Plan
</button>When all synced packages are removed from the cart, the toggle item is also removed automatically.
See CSS classes for the full list of state classes applied to buttons and containers.