Next Commerce
Data AttributesCSS Classes

CSS Classes

The SDK applies CSS classes to elements based on cart, selection, and loading state. Use these classes to style elements without writing JavaScript.

How It Works

  1. The SDK observes state changes (cart updates, selection changes, page load).
  2. When state changes, it adds or removes classes on the bound elements automatically.
  3. Your CSS reacts to those classes.

Quick Example

<button
  data-next-toggle="cart"
  data-next-package-id="42"
  class="add-button">
  Add to Cart
</button>
.add-button.next-in-cart {
  background: green;
}

When package 42 is added to the cart, the SDK adds next-in-cart to the button automatically and your green style applies.

On this page