Get Started

Add a button to put a package in the cart, then show the totals.

Add a Button

Add data-next-action="add-to-cart" to a button. Set data-next-package-id to the campaign package ID and data-next-quantity to the number of units.

<button data-next-action="add-to-cart"
        data-next-package-id="2"
        data-next-quantity="1">
  Add to Cart
</button>

Clicking the button adds the package to the cart and recalculates totals.

Show the Cart Total

Bind any element to a live cart value with data-next-display. The element updates automatically whenever the cart changes.

<span data-next-display="cart.total">$0.00</span>

Add a Cart Summary

Place a data-next-cart-summary container anywhere on the page. It renders a built-in subtotal / shipping / total breakdown and stays in sync with the cart.

<div data-next-cart-summary></div>

Minimal Working Example

<button data-next-action="add-to-cart"
        data-next-package-id="2"
        data-next-quantity="1">
  Add to Cart
</button>

<div data-next-cart-summary></div>

After clicking the button you should see the cart summary update with the package price as the subtotal and total.

Next Steps

• Configure button types: Buttons
• Control quantities: Quantity
• Customize the cart summary layout: Cart Summary
• See all display attributes: Reference → Attributes