Oversigt

Cart SDK er et JavaScript-API til Aftersell Cart på din storefront. Det lader dig ændre, hvordan kurven opfører sig, reagere på hvad kunderne gør, og læse eller ændre kurvens indhold fra kode. Du kører SDK-kode gennem Custom scripts eller gennem en Custom code-bloks React-tilstand for en blok, der renderer sin egen UI.

Meget af det, forhandlere beder SDK’et om, findes allerede som en indstilling. Før du skriver et script, så tjek om en kurv-blok, betingelser efter marked/land/valuta eller en kurvindstilling allerede gør det. De bliver ved med at virke gennem redesigns af kurven, og det gør dit script måske ikke.

Det globale indgangspunkt

Alt hænger på én global:

window.aftersell.cart

Hvert snippet i disse docs skriver window.aftersell.cart fuldt ud, så hvert enkelt af dem virker alene, når du indsætter det. Det er også helt gyldigt at aliasere det én gang (const cart = window.aftersell.cart;) og bruge cart derefter, og det er sikkert selv før kurven er indlæst. Husk bare at inkludere den linje, hvis du forkorter et snippet, da et nøgent cart alene kaster cart is not defined.

Fire dele gør arbejdet:

Configure

Indstil hvordan kurven opfører sig: hvornår skuffen åbner, hvordan beløb formateres, om Aftersell opsnapper add-to-cart.

Events

Reagér på hvad der sker: kurven blev indlæst, en vare blev tilføjet, skuffen åbnede, der blev klikket på checkout.

Actions

Læs og ændr kurven: åbn den, tilføj en vare, opdater et antal, læs den aktuelle tilstand.

Hooks

Ændr hvordan kurven selv fungerer: skjul eller omdøb linjer, omarranger dem, vedhæft ekstra data, styr add-to-cart.

Hvis et script hos dig holdt op med at fyre ved add to cart, så start med Add to cart-interception. Den forklarer, hvorfor Aftersell overtager tilføjelsen, og hver måde at fritage en formular på.

Plus tre mindre medlemmer:

Medlem	Hvad det bruges til
`ready()`	Et Promise, der resolves, når kurven er indlæst første gang.
`context`	Server-renderet køberkontekst, som kan læses synkront.
`shadowRoot`	Kurvens shadow root, til at forespørge elementer inde i skuffen.

Events, actions eller hooks?

De tre er nemme at blande sammen, og at vælge den forkerte er den mest almindelige grund til, at et script ikke gør det, forfatteren forventede:

Du vil…	Brug	Eksempel
Køre kode når noget sker	Event	Send et analytics-event, når en vare tilføjes.
Ændre hvad der er i kurven	Action	Tilføj en gratis gave, når totalen passerer $50.
Ændre hvordan kurven fungerer eller renderer	Hook	Skjul linjer med gratis gaver fra skuffen.

Den skelnen, der betyder mest: en action ændrer kundens faktiske kurv (og deres total), mens en hook kun ændrer hvad der renderes. Skjuler du en linje med en hook, forbliver den i kurven og i totalen; fjerner du den med en action, ryger den ud for alvor.

Hvordan og hvornår det indlæses

Kurven indlæses i to trin, og SDK’et er bygget, så du ikke behøver tænke på rækkefølgen:

En lille stub opretter window.aftersell.cart med det samme, så det altid er der.
Det fulde SDK indlæses kort efter og tager over ved at opgradere stubben på stedet, så en reference, du fangede tidligere, bliver ved med at virke.

Det giver dig to kategorier af kald:

Opsætningskald: sikre med det samme

configure(...), events.on(...) og hvert hooks.register*-kald. Buffres før boot og afspilles i rækkefølge, når SDK’et indlæses. Placér dem øverst i dit script.

Actions: vent på ready()

Alt under actions.*. Kør dem inde i ready() eller en event-handler. Kaldes de for tidligt, advarer de i konsollen og gør ingenting, sikkert: de asynkrone resolves stadig, så en .then()-kæde bryder ikke.

// Set-up: fine at the top level, before the cart has loaded.
window.aftersell.cart.configure({ open_on_add_to_cart: 'always' });

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

// Actions: wait until the cart is ready.
window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  console.log(state.itemCount, 'items');
});

ready()

ready() returnerer et Promise, der resolves, når den første kurvindlæsning er afgjort. Det resolves både ved fejl og succes, så en kunde på en ustabil forbindelse aldrig efterlader dit script hængende. Tjek getCart() for null i stedet for at antage, at en kurv kom frem. Kaldes ready(), efter kurven allerede er indlæst, resolves det med det samme, så det er sikkert at bruge som en generel “kurven findes nu”-port hvor som helst i din kode.

Du behøver ikke ready() inde i en event-handler. Når cart_loaded, cart_updated eller item_added fyrer, er kurven indlæst, og actions er sikre at kalde.

context

window.aftersell.cart.context indeholder køberdata renderet af serveren, som kan læses synkront, uden brug af ready(). Brug det til marked- eller landeforgrening, der skal ske, før kurven indlæses.

Felt	Beskrivelse	Tilgængeligt før boot
`shopify_market`	Køberens Shopify-marked.	Ja
`customer_country`	Landekode på to bogstaver.	Ja
`customer_currency`	Aktiv valutakode.	Ja
`money_format`	Butikkens Shopify-beløbsformat.	Ja
`backend_url`	Direkte backend-host, brugt som fallback, når app-proxyen ikke er konfigureret.	Ja
`storefront_access_token`	Token til Storefront API-kald.	Nej — tilføjes, når kurven booter

storefront_access_token er det ene context-felt, serveren ikke renderer ind i cart.context. Det tilføjes til context, når kurven booter, så læser du det øverst i dit script, får du undefined. Await window.aftersell.cart.ready() først.

if (window.aftersell.cart.context.customer_country === 'CA') {
  // Canada-only behavior, decided before the cart loads.
}

For at vise forskellige blokindstillinger efter marked, land eller valuta skal du bruge betingelser i cart editoren i stedet. Intet script kræves. Den fulde Conditions-UI findes på Rewards i dag.

shadowRoot

Kurven renderer inde i en shadow root, så document.querySelector kan ikke se noget inde i skuffen. For at nå et element i kurven skal du forespørge shadow root’en:

const root = window.aftersell.cart.shadowRoot;
const button = root?.querySelector('.cart-external-checkout-button');

Målret de samme offentlige cart-external-*-klasser, som Custom CSS bruger. Det er de understøttede håndtag. cart-internal-*-tvillingerne er kurvens eget maskinrum, så forespørg de eksterne i stedet.

Ræk kun ud efter shadow root’en, når ingen blok, indstilling eller hook klarer opgaven. En hook overlever et redesign af kurven; en DOM-forespørgsel er din kodes eget vedligeholdelsesproblem.

Shadow root’en er der først, når kurven er bootet, så læs den inde i ready() eller en event-handler i stedet for øverst i dit script.

Fejlfinding

Et defekt script må aldrig tage add-to-cart eller skuffen ned, så SDK’et indkapsler fejl i stedet for at lade dem boble op. Hvor en fejl viser sig, afhænger af, hvad der gik i stykker:

Hvad fejlede	Hvor det viser sig
Dit script kastede på øverste niveau	`console.error`, med angivelse af linjen og hvad der aldrig kørte
En event-handler kastede	`console.error`; de andre handlers kører stadig
En hook kastede	Stille. Ryger i debug-kanalen nedenfor
En action kørte, før kurven var indlæst	`console.warn`; kaldet gør ingenting

Når dit script kaster

Et custom script stopper ved den første fejl, så hvert configure, events.on og hooks.register* under den linje kører aldrig. Kurven siger det eksplicit:

[aftersell-cart] Initialization script error on line 12 — 4 more line(s) did not run;
any configure/events/hooks below are unregistered.

Det er beskeden, du skal kigge efter, når en handler, du helt sikkert registrerede, aldrig fyrer: den blev sandsynligvis aldrig nået. Linjenummeret er top-niveau-statementet, hvor eksekveringen stoppede, ikke den indre funktion, der kastede, og det udelades i stedet for at blive gættet, hvis browserens stack ikke er brugbar. Dine scripts kører også under deres egne filnavne, så de vises som aftersell-cart-init.js og aftersell-cart-cart-update.js i DevTools. Du kan åbne dem fra Sources-panelet og sætte breakpoints som i enhver anden fil.

Debug-kanalen

Hook-fejl holdes bevidst væk fra konsollen, så kunder aldrig ser dem. De ryger i stedet her:

// After reproducing the problem, inspect what was swallowed:
window.aftersellCartDebugEvents.filter((entry) => entry.level === 'ERROR');

// Or watch them live:
window.addEventListener('aftersell-cart-debug', (event) => console.log(event.detail));

Hvor du kan gå hen herfra

Configure

Hver mulighed, med et eksempel til hver.

Events

Hvert event, hvornår det fyrer, og hvad du ikke skal gøre i en handler.

Actions

Hver action, med et snippet til hver.

Hooks

Hver hook, og hvordan registreringer sammensættes.

Cart-objektet

Kurvens og dens linjers form.

Use cases

Komplette, kørbare løsninger på almindelige ønsker.

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

Det globale indgangspunkt

Configure

Events

Actions

Hooks

Events, actions eller hooks?

Hvordan og hvornår det indlæses

Opsætningskald: sikre med det samme

Actions: vent på ready()

ready()

context

shadowRoot

Fejlfinding

Når dit script kaster

Debug-kanalen

Hvor du kan gå hen herfra

Configure

Events

Actions

Hooks

Cart-objektet

Use cases

​Det globale indgangspunkt

Configure

Events

Actions

Hooks

​Events, actions eller hooks?

​Hvordan og hvornår det indlæses

Opsætningskald: sikre med det samme

Actions: vent på ready()

​ready()

​context

​shadowRoot

​Fejlfinding

​Når dit script kaster

​Debug-kanalen

​Hvor du kan gå hen herfra

Configure

Events

Actions

Hooks

Cart-objektet

Use cases

Det globale indgangspunkt

Events, actions eller hooks?

Hvordan og hvornår det indlæses

ready()

context

shadowRoot

Fejlfinding

Når dit script kaster

Debug-kanalen

Hvor du kan gå hen herfra