Events
Events emitted by the upsell enhancers. Listen with window.next.on('event', handler).
upsell:initialized
When: An offer container (data-next-upsell="offer" or data-next-upsell-selector) finishes initializing.
Payload:
| Field | Type | Description |
|---|---|---|
packageId | number | Package ID, or 0 for selector mode |
element | HTMLElement | The container element the enhancer is bound to |
upsell:viewed
When: A page with <meta name="next-page-type" content="upsell"> is loaded with an order in orderStore. Tracked once per unique page path per page load.
Payload:
| Field | Type | Description |
|---|---|---|
pagePath | string | The page's window.location.pathname |
orderId | string | The ref_id of the loaded order |
upsell:option-selected
When: A [data-next-upsell-option] card or [data-next-upsell-select] value is changed inside an offer container.
Payload:
| Field | Type | Description |
|---|---|---|
selectorId | string | The data-next-selector-id of the container |
packageId | number | The newly selected package's ref_id |
upsell:quantity-changed
When: A [data-next-upsell-quantity="increase"|"decrease"] button is clicked or a [data-next-upsell-quantity-toggle] card is selected.
Payload:
| Field | Type | Description |
|---|---|---|
selectorId | string | undefined | The container's data-next-selector-id, or undefined |
quantity | number | The new quantity |
packageId | number | undefined | The current package, if known |
upsell:adding
When: An offer container's add/accept button is clicked and the API call is about to start. Emitted by data-next-upsell="offer".
Payload:
| Field | Type | Description |
|---|---|---|
packageId | number | The package being submitted |
upsell:added
When: The offer container's API call succeeds and the order is updated. Emitted by data-next-upsell="offer".
Payload:
| Field | Type | Description |
|---|---|---|
packageId | number | The package that was added |
quantity | number | Number of units added |
order | object | The full updated order |
value | number | Price of the added line, including tax |
willRedirect | boolean | true when a redirect URL was configured |
upsell:accepted
When: A data-next-action="accept-upsell" button's API call succeeds and the order is updated. For bundle linkage, fires once per package in the bundle.
Payload:
| Field | Type | Description |
|---|---|---|
packageId | number | The package that was added |
quantity | number | Number of units added |
orderId | string | null | The ref_id of the updated order |
value | number | Price of the added line, including tax. 0 if no matching upsell line was returned |
upsell:skipped
When: A data-next-upsell-action="skip" (or decline) button is clicked.
Payload:
| Field | Type | Description |
|---|---|---|
packageId | number | undefined | The package that was skipped |
orderId | string | undefined | The ref_id of the loaded order |
upsell:error
When: The offer container's API call fails. Emitted by data-next-upsell="offer" only — the accept-upsell button rethrows the error and emits action:failed instead.
Payload:
| Field | Type | Description |
|---|---|---|
packageId | number | The package that failed to add |
error | string | The error message |
upsell-selector:item-selected
When: An option card is selected inside an offer container. Emitted alongside upsell:option-selected for cross-enhancer compatibility (this is the event the accept-upsell button listens to when it links to an offer container via data-next-selector-id).
Payload:
| Field | Type | Description |
|---|---|---|
selectorId | string | The container's data-next-selector-id |
packageId | number | The newly selected package's ref_id |
action:success / action:failed
When: Any BaseActionEnhancer action completes. The accept-upsell button is a BaseActionEnhancer, so it emits these alongside upsell:accepted.
Payload:
| Field | Type | Description |
|---|---|---|
action | string | Class name of the enhancer (AcceptUpsellEnhancer) |
data.element | HTMLElement | The button element |
error (failed only) | Error | The error that was thrown |
Listening to Events
window.nextReady.push(() => {
window.next.on('upsell:accepted', ({ packageId, value, orderId }) => {
console.log(`Upsell ${packageId} accepted for ${value} on order ${orderId}`);
});
window.next.on('upsell:skipped', ({ packageId }) => {
console.log(`Upsell ${packageId} skipped`);
});
});