Data Attributes Reference
Complete catalog of every data-next-* attribute that controls SDK behavior
Data attributes are the API through which your HTML communicates with the Campaign Cart SDK.
Actions
Add to cart, toggle, remove, clear cart, and URL redirect attributes.
Display
Bind elements to live cart, package, campaign, and order data with automatic updates.
State
Attributes that reflect current selection, cart, and loading state on elements.
Configuration
Control element behavior — formatting, math operations, and display options.
Selection
Package selector markup — selector containers, cards, and selector IDs.
Order Data
Post-purchase order context — display order data on receipt and upsell pages.
Checkout Review
Attributes for checkout flow display and review sections.
URL Parameters
Read and write URL query string parameters from HTML attributes.
Campaign
Campaign data attributes — display package and campaign-level information.
CSS Classes
State classes managed by the SDK — next-selected, next-in-cart, next-unavailable, and more.
Core Principles
- HTML as the source of truth. Behavior is declared in markup, not JavaScript.
- Progressive enhancement. Elements render meaningful fallback content first, then enhance once the SDK loads.
- Composable patterns. Combine attributes to build complex UI without custom code.
- State management. The SDK tracks state and manages CSS classes automatically.
How the Categories Fit Together
The 10 categories above are the cross-cutting attribute reference. Most pages combine attributes from several categories at once — a typical add-to-cart button uses Actions + State + Display + Configuration:
<!-- Actions: turns the element into a cart trigger -->
<!-- Display: binds button text to live state -->
<!-- Configuration: formats the price -->
<!-- State: hides the button when no package is selected -->
<button
data-next-action="add-to-cart"
data-next-package-id="42"
data-next-hide="!cart.hasItems && cart.total === 0"
data-add-text="Add for $99"
data-remove-text="In cart">
Add for <span data-next-display="package.42.price" data-format="currency">$99</span>
</button>For higher-level guides that walk through complete features end-to-end, see:
- Cart System — buttons, quantity, state, and live displays
- Cart Summary — line items, totals, and templates
- Bundle Selector — multi-package bundles with variants and prices
- Package Toggle — toggle-style add-on selection
- Upsells — post-purchase upsell flows