CSS Classes & State Attributes
CSS classes and data- attributes managed by the upsell enhancers. Use these for styling — you do not need to write JavaScript to react to upsell state changes.
On the Accept Button
Set by data-next-action="accept-upsell".
| Class | When |
|---|---|
next-disabled | The button is currently unable to submit (no order loaded, order does not support upsells, no package resolved, or a submission is in flight) |
next-loading | Set by BaseActionEnhancer for the duration of the API call (when disableOnProcess is enabled) |
The native disabled attribute is also added and removed alongside next-disabled.
On the Offer Container
Set by data-next-upsell="offer" and data-next-upsell-selector.
| Class | When |
|---|---|
next-processing | The API call is in flight |
next-success | The API call succeeded. Stays applied until the page navigates |
next-skipped | A data-next-upsell-action="skip" button was clicked |
Style transitions:
[data-next-upsell].next-processing { opacity: 0.6; }
[data-next-upsell].next-success { background: #ecfdf5; }
[data-next-upsell].next-skipped { opacity: 0.5; pointer-events: none; }On Action Buttons Inside the Container
Set by the offer enhancer on every [data-next-upsell-action] button.
| Class | When |
|---|---|
next-disabled | The container is processing or has been skipped |
The native disabled attribute is also toggled.
On Option Cards
Set by the offer enhancer on every [data-next-upsell-option] card.
| Class | When |
|---|---|
next-selected | This option is the currently selected one |
The card also gets data-next-selected="true" or "false" for CSS targeting.
On Quantity Toggle Cards
Set by the offer enhancer on every [data-next-upsell-quantity-toggle] card.
| Class | When |
|---|---|
next-selected | The card's value matches the current quantity |
Display Element Defaults
Display elements inside the container ([data-next-display]) update via text-content writes. They start with whatever fallback text you put in the markup, so the page renders correctly before JavaScript loads.
<!-- Renders "$0.00" before JS loads, then live price after -->
<span data-next-display="package.price">$0.00</span>