Cart Actions

Every action that changes cart contents is triggered by a data-next-action attribute. The element can be a button, link, image, or any other clickable element.

add-to-cart

The most common action. Adds a package to the cart.

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

When data-next-selector-id is present, the button reads the currently selected card from the matching selector. See Cart System → Buttons for the full pattern.

data-next-toggle="cart"

Toggle a package between in-cart and not-in-cart. Perfect for wishlist-style buttons.

<div
  data-next-toggle="cart"
  data-next-package-id="42"
  class="product-card">
  <span data-add-text="♡ Add to favorites">♡ Add to favorites</span>
  <span data-remove-text="♥ In favorites">♥ In favorites</span>
</div>

The SDK:

• Adds next-in-cart to the element when the package is in the cart
• Toggles between add and remove on click
• Updates ARIA states for screen readers

remove

Explicitly remove a package from the cart. Use this when you want a dedicated remove button rather than a toggle.

<button
  data-next-action="remove"
  data-next-package-id="42">
  Remove
</button>

The button is auto-disabled (next-disabled class) when the package is not currently in the cart.

clear-cart

Empty the entire cart. Useful for "start over" buttons.

<button data-next-action="clear-cart">
  Empty Cart
</button>

No package ID is needed — this clears every item.

swap

Swap the cart contents with a single package. Equivalent to clearing the cart and adding one package, but in a single store update so display elements only re-render once.

<button
  data-next-action="swap"
  data-next-package-id="56">
  Switch to Premium
</button>

For multi-package swaps, use a Bundle Selector instead — BundleSelectorEnhancer is the right tool for atomic multi-package writes.

State Containers

Wrap a button in a state container to switch markup based on cart state. The container reads data-next-package-id from itself or a child action button.

<div data-next-state-container data-next-package-id="42">
  <div data-next-state="not-in-cart">
    <button data-next-action="add-to-cart" data-next-package-id="42">
      Add to Cart
    </button>
  </div>

  <div data-next-state="in-cart">
    ✓ Already in your cart
    <button data-next-action="remove" data-next-package-id="42">
      Remove
    </button>
  </div>
</div>

The container shows whichever child matches the current state. See Cart System → Buttons for the full pattern.

Conflicts

Do not combine these on the same element:

Next Steps

• Quantity controls: Quantity Actions
• All attributes in one table: Reference → Attributes