Add to cart-interception

Når en kunde klikker på Add to cart, håndterer Aftersell normalt tilføjelsen selv i stedet for at lade temaet gøre det. Denne side forklarer hvorfor, hvad det betyder for scripts, du har tilføjet, og hvordan du slår det fra for én formular eller for alle. De fleste butikker behøver aldrig at ændre noget af dette. Læs videre, hvis et script hos dig holdt op med at fyre ved add to cart, eller hvis en add to cart-knap opfører sig underligt.

Hvad interception gør

Aftersell lytter efter add to cart-submit før temaet gør. Når den genkender en, gør den:

Stopper eventet, så intet andet på siden håndterer det klik.
Sender selv tilføjelsen til Shopify.
Åbner Aftersell Cart-draweren.

Trin 1 er det vigtige, og det er grunden til, at denne side findes.

Hvorfor det findes

Uden det reagerer begge kurve på det samme klik. Temaet tilføjer varen og åbner sin egen drawer, Aftersell tilføjer den og åbner vores, og kunden ser to kurve, ofte med varen tilføjet to gange. At stoppe eventet er den enkleste måde at garantere én tilføjelse og én kurv.

Hvad det koster

At stoppe eventet stopper det for alle, ikke kun temaet. Enhver anden kode, der lytter til den samme add to cart, holder op med at køre: dine analytics, en tracking-pixel, en abonnements- eller bundle-app, et script du selv har tilføjet. Det fejler stille. Intet vises i browserkonsollen, og selve tilføjelsen virker stadig, så det sædvanlige symptom er et forkert tal frem for noget synligt ødelagt:

add_to_cart-events mangler fra GA4, Meta eller TikTok
En abonnements- eller bundle-app, der virker på produktsiden, men ikke gennem kurven
Din egen addEventListener på formularen fyrer aldrig

Hvis noget af det lyder bekendt, er denne side årsagen, og løsningen står nedenfor.

Når Aftersell ikke opsnapper

Interception er ikke altid slået til. Aftersell lader add to cart være i fred, når:

Den genkender dit temas kurv. På temaer, Aftersell ved, hvordan man arbejder med, gør den temaets egen kurv inert i stedet for at blokere eventet og lader så temaet udføre tilføjelsen normalt. Dine scripts kører som altid. Se Hvilke temaer nedenfor.
Formularen tilføjer ikke en line item. En formular uden variant id og uden items[] lades i fred.
Du har fritaget ved brug af en af metoderne nedenfor.

Når Aftersell ikke udfører tilføjelsen, holder den stadig øje med kurvanmodningen og åbner draweren, når den ser en. Se Før du vælger: hvad der ændrer sig.

Hvilke temaer Aftersell genkender

Tema
Dawn og resten af Shopifys gratis familie	Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste
Horizon	Shopifys nuværende standardtema
Impulse

Aftersell matcher på hvordan et tema er bygget, ikke på dets navn, så et brugerdefineret tema forkloned fra et af disse genkendes normalt også, inklusive private builds, som Aftersell aldrig har set.

Det modsatte sker også: en kraftigt tilpasset build kan drive så langt fra sit ophav, at Aftersell ikke længere genkender den, selv om temaet stadig hedder “Dawn”. At stå på denne liste gør genkendelse sandsynlig, ikke sikker.

Dine muligheder

Vælg den smalleste, der løser dit problem. Hver række giver mere op end den ovenfor.

Mulighed	Omfang	Aftersell åbner stadig draweren
`registerSkipAddToCartRule`	De formularer, din regel udvælger	Ja, fra kurvanmodningen
`aftersell-cart-skip-atc`	Én formular eller knap	Ja, fra kurvanmodningen
`skip_add_to_cart_interceptor`	Hver formular i butikken	Ja, fra kurvanmodningen

Før du vælger: hvad der ændrer sig

At fritage giver tilføjelsen tilbage til dit tema, hvilket rejser to spørgsmål værd at besvare, før du vælger en række: om din kurv stadig åbner, og om temaets kurv dukker op ved siden af den.

Åbner din kurv stadig?

Normalt ja, uden arbejde fra din side. Uanset hvem der udfører tilføjelsen, holder Aftersell øje med anmodningen, der går til Shopify, og åbner draweren, når den ser en, i overensstemmelse med din normale Open cart when an item is added-indstilling. Du behøver ikke kalde noget selv. Tre situationer bryder det, og alle tre har en løsning: Tilføjelsen går et andet sted hen end Shopifys kurv-endpoints. Aftersell holder øje med /cart/add, /cart/change, /cart/update og /cart/clear på dit eget domæne. En app, der tilføjer gennem sit eget endpoint og synkroniserer kurven bagefter, er ikke synlig for dette. Åbn selv kurven, når appens tilføjelse er færdig:

window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});

Der går mere end omkring tre sekunder mellem klikket og anmodningen. Aftersell behandler en tilføjelse, der tæt følger et rigtigt klik eller tastetryk, som kundedrevet. Ud over det vindue betragtes den som en baggrundstilføjelse, der ikke åbner draweren, medmindre du melder dig til:

window.aftersell.cart.configure({ open_on_background_add: true });

Din kurvindstilling siger nej. Hvis Open cart when an item is added er slået fra, eller du har sat open_on_add_to_cart: 'never', åbner intet draweren. Det virker som konfigureret.

Åbner temaets kurv også?

Det er den risiko, fritagelserne bærer, og svaret afhænger af dit tema. At gøre temaets kurv inert er adskilt fra interception og sker ved sideindlæsning uanset hvad, så ingen af fritagelserne her slår det til igen. På et tema fra den genkendte liste forbliver temaets egen kurv stille, og kunden ser én kurv, din. På et tema, Aftersell ikke genkender, er der intet, der holder temaets kurv tilbage. At fritage betyder, at temaet håndterer tilføjelsen præcis, som det altid har gjort, herunder at åbne sin egen drawer eller viderestille til /cart, mens Aftersell åbner sin drawer ud fra den anmodning, den så. Det er to kurve, og det er grunden til, at interception findes i første omgang. Hvis det sker, har du tre valg: lad interception være slået til for den formular, brug en smallere fritagelse, der ikke dækker de formularer, der forårsager det, eller stop temaets egen kurv selv i din temakode.

Slå en fritagelse til i et test- eller upubliceret tema først. Hvis temaets egen kurv dukker op, hvor den ikke gjorde før, er dit tema ikke et, Aftersell genkender, og du vil gerne holde interception slået til for de formularer.

Dette gælder kun add to cart. At få cart-ikonet til at omgå Aftersell med klassen aftersell-cart-wont-open-cart er noget andet: et klik på cart-ikonet sender ingen anmodning, så der er intet for Aftersell at holde øje med, og draweren vil ikke åbne. Se nedenfor.

Pr. formular: en regel i kode

Den foretrukne mulighed. Registrér en regel, der returnerer true for de formularer, du vil have i fred:

window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);

Læg den i Cart settings → Custom script → Initialization. Regler er additive: din kører sammen med alle andres, og enhver regel, der returnerer true, springer den formular over. Fulde detaljer i Hooks.

Pr. formular: en klasse i dit tema

Hvis du hellere vil undgå at skrive en regel, tilføj klassen aftersell-cart-skip-atc i dit tema:

<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">

For en formular-submit skal klassen ligge på selve form-elementet. En overordnet div virker ikke. For en knap, der tilføjer til kurven uden en formular-submit, kan klassen ligge på knappen eller ethvert element omkring den.

Hele butikken: slå interception fra

Den bombastiske mulighed. Add to cart opfører sig præcis, som dit tema oprindeligt gjorde, på hver formular:

window.aftersell.cart.configure({ skip_add_to_cart_interceptor: true });

Denne læses én gang, når kurven indlæses. Den virker kun fra din kurvs Initialization-script. At sætte den senere, inde i ready() eller fra en event-handler, gør intet og fejler lydløst.

Ræk kun ud efter denne, når mulighederne pr. formular ikke passer, for eksempel når de formularer, du skal fritage, er skabt af en anden app, og du ikke pålideligt kan identificere dem.

Cart-ikonet er adskilt

Cart-ikonet i din header håndteres af sin egen interceptor med sin egen fritagelse. At slå add to cart-interception fra ændrer ikke, hvad cart-ikonet gør, og omvendt gælder også. At klikke på cart-ikonet åbner Aftersell-draweren i stedet for at gå til /cart. For at lade ét ikon eller én knap være i fred, tilføj klassen aftersell-cart-wont-open-cart til den, eller til ethvert element omkring den:

<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>

Den kontrol gør så, hvad dit tema får den til at gøre, normalt at gå til kurv-siden. Aftersell er helt ude af billedet, så draweren vil ikke åbne. I modsætning til add to cart er der ingen anmodning at holde øje med, så hvis du vil have din kurv til at åbne fra den kontrol, skal du sige det:

document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});

Det samme problem med at gøre klik tavse gælder her: fordi Aftersell stopper klikket, ser dine analytics og pixels heller ikke klik på cart-ikonet. Hvis det er alt, du har brug for at løse, så behold draweren og stop tavsheden:

window.aftersell.cart.configure({ skip_open_cart_interceptor: true });

Dine listeners kører, draweren åbner stadig, og klikket navigerer stadig ikke til /cart. Fulde detaljer i Configure.

For at ændre hvilke elementer der åbner kurven i stedet for at slå dem fra, brug Cart settings → Advanced → Cart icon selector i stedet for at redigere dit tema.

Hvor du kan gå hen herfra

Configure: hver SDK-mulighed, herunder dem, der refereres til her.
Hooks: kontrol pr. formular og pr. linje.
Åbn draweren fra en page builder: til Replo, PageFly, GemPages og brugerdefinerede knapper, der tilføjer til kurven på deres egen måde.

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

Hvad interception gør

Hvorfor det findes

Hvad det koster

Når Aftersell ikke opsnapper

Hvilke temaer Aftersell genkender

Dine muligheder

Før du vælger: hvad der ændrer sig

Åbner din kurv stadig?

Åbner temaets kurv også?

Pr. formular: en regel i kode

Pr. formular: en klasse i dit tema

Hele butikken: slå interception fra

Cart-ikonet er adskilt

Hvor du kan gå hen herfra

​Hvad interception gør

​Hvorfor det findes

​Hvad det koster

​Når Aftersell ikke opsnapper

​Hvilke temaer Aftersell genkender

​Dine muligheder

​Før du vælger: hvad der ændrer sig

​Åbner din kurv stadig?

​Åbner temaets kurv også?

​Pr. formular: en regel i kode

​Pr. formular: en klasse i dit tema

​Hele butikken: slå interception fra

​Cart-ikonet er adskilt

​Hvor du kan gå hen herfra

Hvad interception gør

Hvorfor det findes

Hvad det koster

Når Aftersell ikke opsnapper

Hvilke temaer Aftersell genkender

Dine muligheder

Før du vælger: hvad der ændrer sig

Åbner din kurv stadig?

Åbner temaets kurv også?

Pr. formular: en regel i kode

Pr. formular: en klasse i dit tema

Hele butikken: slå interception fra

Cart-ikonet er adskilt

Hvor du kan gå hen herfra