Events

Events lader dig køre kode, når noget sker i kurven. De ligger under window.aftersell.cart.events. At abonnere er et opsætningskald, så det er sikkert øverst i dit script uden behov for at vente på ready().

Tilgængelige events

Event	Payload	Affyres når
`cart_loaded`	`AftersellCart`	Kurven indlæses, én gang pr. side.
`cart_updated`	`AftersellCart`	Kurvens indhold ændres, efter den første indlæsning.
`item_added`	`{ item }`	En ny linje dukker op i kurven.
`item_removed`	`{ item }`	En linje forsvinder fra kurven.
`cart_opened`	Ingen	Draweren åbner.
`cart_closed`	Ingen	Draweren lukker.
`checkout`	Ingen	Der klikkes på checkout-knappen.

Abonnering

events.on(event, handler) registrerer en handler og returnerer en funktion, der afmelder den:

const off = window.aftersell.cart.events.on('cart_updated', (state) => {
  console.log('Cart total is now', state.totalPrice);
});

// later, to stop listening:
off();

events.once(event, handler): affyres én gang og afmelder derefter sig selv.
events.off(event, handler): fjerner en specifik handler.

En handler, der kaster en fejl, isoleres og logges til konsollen; de andre handlers kører stadig.

De to regler

Næsten alle event-fejl kan spores tilbage til en af disse.

Ændr ikke kurven fra `cart_updated` uden en guard

At ændre kurven inde i en cart_updated-handler affyrer cart_updated igen. Hvis den handler ændrer kurven igen, har du en uendelig løkke. Kunden ser sin kurv gå amok, mens siden hamrer løs på Shopify.

Kald aldrig en action ubetinget fra cart_updated eller cart_loaded. Beskyt den med et tjek på den tilstand, du er ved at skabe, så anden gennemkørsel intet gør.

// ❌ Loops forever: every add triggers an update, which triggers another add.
window.aftersell.cart.events.on('cart_updated', (state) => {
  window.aftersell.cart.actions.addItem(GIFT_VARIANT_ID, 1);
});

// ✅ Guarded: once the gift is present, the condition is false and it stops.
window.aftersell.cart.events.on('cart_updated', (state) => {
  const hasGift = state.items.some((line) => line.variantId === GIFT_VARIANT_ID);
  if (state.totalPrice >= 5000 && !hasGift) {
    window.aftersell.cart.actions.addItem(GIFT_VARIANT_ID, 1);
  }
});

Kurven giver dig ét sikkerhedsnet: en opdatering, der producerer en identisk kurv, udsender intet, så en genhentning, der intet ændrer, genstarter ikke cyklussen. Det beskytter dig mod utilsigtede no-op-løkker. Det beskytter dig ikke mod en handler, der reelt ændrer kurven hver gang.

Behandl payloaden som skrivebeskyttet

Hver handler for ét event modtager det samme objekt. At mutere det ændrer, hvad de handlers, der kommer efter din, ser, herunder handlers, der tilhører andre apps i butikken.

// ❌ Corrupts the payload for every later handler.
window.aftersell.cart.events.on('cart_updated', (state) => {
  state.items = state.items.filter((line) => line.finalLinePrice > 0);
});

// ✅ Copy first.
window.aftersell.cart.events.on('cart_updated', (state) => {
  const paidItems = state.items.filter((line) => line.finalLinePrice > 0);
});

For faktisk at ændre kurven skal du bruge en action. For at ændre, hvordan linjer renderes, skal du bruge registerLineTransform.

cart_loaded

Affyres én gang, når kurven først indlæses på siden. Payloaden er det fulde cart-objekt.

window.aftersell.cart.events.on('cart_loaded', (state) => {
  console.log('Page loaded with', state.itemCount, 'items');
});

Brug det til: alt der skal køre mod kurvens starttilstand, såsom at afstemme en gratis gave, initialisere en widget eller rapportere kurvindhold til analyse ved sideindlæsning. cart_loaded genafspilles for sene abonnenter. Hvis du abonnerer, efter kurven allerede er indlæst, kaldes din handler straks med den aktuelle kurv. Abonnementsrækkefølge betyder aldrig noget, så du behøver ikke bekymre dig om, hvorvidt dit script nåede det før kurven.

Logik, der skal være korrekt både ved sideindlæsning og ved hver ændring derefter, bør abonnere på både cart_loaded og cart_updated med den samme funktion. Det er standardmønsteret for “hold X synkroniseret med kurven”.

cart_updated

Affyres, hver gang kurvens indhold ændres efter den første indlæsning, uanset om det er fra draweren, fra dine egne actions, fra temaet eller fra en anden app. Payloaden er det fulde cart-objekt.

window.aftersell.cart.events.on('cart_updated', (state) => {
  document.querySelector('#my-total').textContent =
    window.aftersell.cart.actions.formatMoney(state.totalPrice);
});

Brug det til: at holde noget uden for kurven synkroniseret, såsom en brugerdefineret total, en fremdriftslinje, et header-badge eller et analyse-event ved hver ændring. En opdatering, der producerer en identisk kurv, udsender intet. At genåbne draweren, skifte tilbage til fanen eller en genhentning, der returnerer det samme indhold, affyrer den ikke.

Genlæs de to regler, før du kalder en action herinde.

item_added

Affyres, når en ny linje dukker op i kurven. Payloaden er { item }, hvor item er kurvlinjen.

window.aftersell.cart.events.on('item_added', (payload) => {
  myAnalytics.track('Added to cart', {
    id: payload.item.variantId,
    title: payload.item.title,
    quantity: payload.item.quantity,
  });
});

Brug det til: add to cart-tracking i et tredjeparts analyseværktøj. Dette er den absolut mest almindelige brug af SDK’et. Se tracking af add to cart. To ting at vide om, hvordan det udledes:

En antalsændring er ikke en tilføjelse. Kurven udregner tilføjelser og fjernelser ved at diffe linjer, ikke antal. En kunde, der ændrer en linje fra 1 til 3, affyrer cart_updated, ikke item_added. Hvis du også skal fange antalsstigninger, skal du sammenligne med den forrige tilstand i en cart_updated-handler.

Det affyres heller ikke for varer, der allerede var i kurven, da siden blev indlæst; de ankommer via cart_loaded. Tilføjes flere forskellige produkter på én gang, affyres eventet én gang pr. linje.

item_removed

Affyres, når en linje forsvinder fra kurven. Payloaden er { item }, linjen som den var, lige før den forsvandt, så du stadig kan læse dens key, variantId og title.

window.aftersell.cart.events.on('item_removed', (payload) => {
  console.log('Removed', payload.item.title);
});

Brug det til: at tilbageføre noget, du gjorde ved tilføjelsen, såsom at rydde et flag, genvise et tilbud, kunden afslog, eller rapportere fjernelser til analyse. Samme forbehold som item_added: at sænke et antal uden at ramme nul er ikke en fjernelse.

cart_opened og cart_closed

Affyres, når draweren åbner og lukker. Ingen payload.

window.aftersell.cart.events.on('cart_opened', () => {
  myAnalytics.track('Cart viewed');
});

window.aftersell.cart.events.on('cart_closed', () => {
  document.body.classList.remove('cart-is-open');
});

Brug dem til: visningstracking, at pause en video eller karrusel bag draweren, at slå en klasse til/fra på siden. Ingen af dem affyres ved den indledende sideindlæsning, kun ved en faktisk åbning eller lukning.

checkout

Affyres, når kunden klikker på checkout-knappen, umiddelbart før browseren navigerer. Ingen payload.

window.aftersell.cart.events.on('checkout', () => {
  myAnalytics.track('Checkout started');
});

Brug det til: tracking af checkout-hensigt.

Du kan ikke annullere checkout fra denne handler. Eventet er en notifikation, ikke en gate; navigationen sker, uanset hvad din kode gør. Hold handleren hurtig og synkron: et await eller et langsomt netværkskald når muligvis ikke at blive færdigt, før siden lukkes ned. Brug navigator.sendBeacon til alt, du pålideligt skal have sendt.

Lyt fra uden for SDK’et

Hvert event dispatches også som et DOM-CustomEvent på window, så du kan lytte uden at røre window.aftersell.cart. Det er nyttigt fra en temafil, en tredjepartsapp eller et script, der indlæses uafhængigt af kurven.

Bus-event	DOM-event
`cart_loaded`	`aftersell:cart:cart-loaded`
`cart_updated`	`aftersell:cart:cart-updated`
`item_added`	`aftersell:cart:item-added`
`item_removed`	`aftersell:cart:item-removed`
`cart_opened`	`aftersell:cart:cart-opened`
`cart_closed`	`aftersell:cart:cart-closed`
`checkout`	`aftersell:cart:checkout`

Bemærk navngivningen: bussen bruger snake_case, DOM-eventene bruger kebab-case bag et aftersell:cart:-præfiks.

window.addEventListener('aftersell:cart:cart-updated', (event) => {
  console.log('Cart total is now', event.detail.totalPrice);
});

Payloaden ankommer på event.detail og matcher cart-objektet. Events dispatches på window, så en listener hvor som helst på siden modtager dem. Kurven renderes i en shadow root, men shadow-grænsen er aldrig i eventets sti. Hver dispatch kloner payloaden, så en listener, der muterer event.detail, ikke kan påvirke andre, og en listener, der kaster en fejl, ikke kan forstyrre SDK’et.

cart-loaded genafspilles ikke på DOM’en. Bussen genafspiller cart_loaded for sene abonnenter, men den sti omgår DOM-dispatchen, så window.addEventListener('aftersell:cart:cart-loaded') registreret, efter kurven allerede er indlæst, affyres aldrig. Hvis dit scripts indlæsningsrækkefølge ikke er garanteret, skal du bruge window.aftersell.cart.events.on('cart_loaded', …), som genafspiller, eller også lytte efter aftersell:cart:cart-updated.

Shopify standard-kurvevents

Separat udgiver kurven Shopifys standard-kurvevents på document, hver gang den ændrer kurven, så temakode og andre apps kan reagere på Aftersells mutationer på samme måde, som de reagerer på temaets:

Event	Payload på event-instansen
`shopify:cart:lines-update`	`action: 'add' \| 'update' \| 'remove'`, `context: 'cart' \| 'product'`, `lines`
`shopify:cart:note-update`	`context: 'cart'`, `note`
`shopify:cart:discount-update`	`discountCodes: [{ code }]`

Payloaden ligger ikke på event.detail. detail bærer kun { source: 'aftersell' } — det tag, kurven bruger til at ignorere sine egne events i stedet for at gå i løkke. Alt i tabellen ovenfor tildeles direkte på event-objektet, så læs event.action, ikke event.detail.action.

Hvert event bærer også et promise, som Aftersell afgør, når den underliggende skrivning lander, i overensstemmelse med Shopifys standard — await det, resolve det ikke. Disse dispatches på document og bobler, så en window-listener modtager dem også.

Hvor skal du hen nu

Cart-objekt: den fulde form af payloadene ovenfor.
Actions: hvordan du ændrer kurven fra en handler.
Hooks: til at ændre, hvordan kurven renderes, frem for at reagere på den.
Use cases: analysetracking, gratis gaver og andre komplette eksempler.

Kom godt i gang

Startside

Bedste praksis

Mersalg efter køb

Kurv

Mersalg ved checkout (Shopify Plus)

Takkeside

Mersalg på produktsiden

Rokt Thanks

Strategier

Analyser og sporing

Integrationer

Aftersell MCP

Fakturering og konto

Fejlfinding

Tilgængelige events

Abonnering

De to regler

Ændr ikke kurven fra `cart_updated` uden en guard

Behandl payloaden som skrivebeskyttet

cart_loaded

cart_updated

item_added

item_removed

cart_opened og cart_closed

checkout

Lyt fra uden for SDK’et

Shopify standard-kurvevents

Hvor skal du hen nu

​Tilgængelige events

​Abonnering

​De to regler

​Ændr ikke kurven fra cart_updated uden en guard

​Behandl payloaden som skrivebeskyttet

​cart_loaded

​cart_updated

​item_added

​item_removed

​cart_opened og cart_closed

​checkout

​Lyt fra uden for SDK’et

​Shopify standard-kurvevents

​Hvor skal du hen nu

Tilgængelige events

Abonnering

De to regler

Ændr ikke kurven fra `cart_updated` uden en guard

Behandl payloaden som skrivebeskyttet

cart_loaded

cart_updated

item_added

item_removed

cart_opened og cart_closed

checkout

Lyt fra uden for SDK’et

Shopify standard-kurvevents

Hvor skal du hen nu