Get Started

A working add-to-cart button in three lines of HTML.

Add a Button

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

That is the entire setup. The SDK detects the button on init and binds the click handler.

Verify It Is Working

Click the button. You should see:

• Console: [AddToCartEnhancer] Initialized { packageId: 42 }
• The button briefly disables and gets the next-loading class while the cart updates
• After the call completes, the button gets the next-in-cart class
• Any data-next-display="cart.total" element on the page updates to the new total

Add a Loading State

<button
  data-next-action="add-to-cart"
  data-next-package-id="42"
  data-add-text="Add to Cart"
  data-loading-text="Adding...">
  Add to Cart
</button>

Add a Redirect

<button
  data-next-action="add-to-cart"
  data-next-package-id="42"
  data-next-url="/checkout">
  Buy Now
</button>

After the cart write succeeds, the SDK redirects the page to /checkout. Combine with data-next-clear-cart="true" to wipe the cart first:

<button
  data-next-action="add-to-cart"
  data-next-package-id="42"
  data-next-clear-cart="true"
  data-next-url="/checkout">
  Buy Now
</button>

Execution order:

1. Clear the cart
2. Add the package
3. Redirect to /checkout

Next Steps

• All cart actions (toggle, remove, swap): Cart Actions
• Quantity controls: Quantity Actions
• Full attribute reference: Reference → Attributes