State Containers

By default, when a visitor adds or removes an add-on, CSS classes like next-in-cart are applied to the card element itself. Sometimes you want those classes on a larger wrapper element instead — for example, to highlight an entire section when the add-on is active. That is what a state container does.

Setting Up a State Container

Add data-next-toggle-container to the wrapper element. The system will apply all state classes and attributes to it automatically.

<div data-next-toggle-container>
  <!-- State classes are applied to this wrapper -->

  <div data-next-toggle-card data-next-package-id="201">
    <img data-next-toggle-image />
    <span>2-Year Warranty</span>
    <span data-next-toggle-display="price"></span>
  </div>
</div>

When the visitor clicks the card, the container gets next-in-cart. When the item is removed, it switches to next-not-in-cart. Use these classes in your CSS to change the container's appearance:

[data-next-toggle-container] {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

[data-next-toggle-container].next-in-cart {
  border-color: #16a34a;
  background: #f0fdf4;
}

[data-next-toggle-container].next-not-in-cart {
  opacity: 0.85;
}

What Gets Applied to the Container

CSS classes:

Attributes:

Notes

• State classes are applied to both the card element and its state container when a container is found
• data-next-package-sync can be read from either the card or its state container
• data-next-selected="true" on the state container works the same as on the card element