Action Attributes

Action attributes turn any HTML element into an interactive cart control. Add data-next-action to a button, link, or div and the SDK takes over: it manages click handling, loading state, error recovery, and accessibility — no JavaScript required.

How It Works

The SDK scans for elements with data-next-action (and related action attributes).
It instantiates the matching enhancer (AddToCartEnhancer, CartToggleEnhancer, etc.) and binds a click handler.
On click, the enhancer reads the element's other data-next-* attributes (package ID, quantity, redirect URL, etc.) and dispatches the action.
While the action is in flight, the enhancer applies CSS classes (next-loading, next-disabled) and disables the element.
After the action completes, the enhancer updates the element's text and class state to reflect the new cart state.

Quick Example

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

That is the full setup. The SDK handles the click, the API call, the loading state, and the cart update.

Get Started

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

Cart Actions

add-to-cart, toggle, remove, clear, swap — every action that changes cart contents.

Quantity Actions

Increase, decrease, and direct quantity input controls.

Reference

Every action attribute, value, and modifier.