> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add-to-cart-interceptie

> Waarom Aftersell add-to-cart overneemt, hoe je kunt zien of een formulier wordt onderschept, en elke manier om een formulier af te melden.

Wanneer een shopper op **Add to cart** klikt, handelt Aftersell de toevoeging meestal zelf af in plaats van dat het thema het doet. Deze pagina legt uit waarom, wat dat betekent voor scripts die je hebt toegevoegd, en hoe je het uitschakelt voor één formulier of voor allemaal.

De meeste winkels hoeven hier nooit iets aan te veranderen. Lees verder als een script van jou is gestopt met afgaan bij add-to-cart, of als een add-to-cart-knop zich vreemd gedraagt.

<div id="what-interception-does">
  ## Wat interceptie doet
</div>

Aftersell luistert naar de add-to-cart-submit voordat het thema dat doet. Wanneer hij er een herkent:

1. Stopt hij het event, zodat niets anders op de pagina die klik afhandelt.
2. Stuurt hij de toevoeging zelf naar Shopify.
3. Opent hij de Aftersell Cart drawer.

Stap 1 is de belangrijke, en dat is de reden dat deze pagina bestaat.

<div id="why-it-exists">
  ## Waarom het bestaat
</div>

Zonder dit reageren beide winkelwagens op dezelfde klik. Het thema voegt het artikel toe en opent zijn eigen drawer, Aftersell voegt het toe en opent de onze, en de shopper ziet twee winkelwagens, vaak met het artikel er tweemaal in.

Het event stoppen is de eenvoudigste manier om één toevoeging en één winkelwagen te garanderen.

<div id="what-it-costs">
  ## Wat het kost
</div>

Het event stoppen stopt het voor **iedereen**, niet alleen voor het thema. Alle andere code die naar diezelfde add-to-cart luistert stopt met draaien: je analytics, een tracking pixel, een abonnements- of bundelapp, een script dat je zelf hebt toegevoegd.

Het faalt stilzwijgend. Er verschijnt niets in de browserconsole, en de toevoeging zelf werkt nog steeds, dus het gebruikelijke symptoom is een getal dat verkeerd is in plaats van iets zichtbaar kapots:

* `add_to_cart`-events die ontbreken in GA4, Meta of TikTok
* Een abonnements- of bundelapp die op de productpagina werkt maar niet via de winkelwagen
* Je eigen `addEventListener` op het formulier die nooit afgaat

Als iets hiervan bekend klinkt, is deze pagina de oorzaak en staat de oplossing hieronder.

<div id="when-aftersell-doesnt-intercept">
  ## Wanneer Aftersell niet onderschept
</div>

Interceptie staat niet altijd aan. Aftersell laat add-to-cart met rust wanneer:

* **Hij de winkelwagen van je thema herkent.** Op thema's waarmee Aftersell weet te werken, maakt hij de eigen winkelwagen van het thema inert in plaats van het event te blokkeren, en laat hij het thema de toevoeging vervolgens normaal uitvoeren. Je scripts draaien zoals altijd. Zie [Which themes](#which-themes-aftersell-recognizes) hieronder.
* **Het formulier geen lijnitem toevoegt.** Een formulier zonder variant-`id` en zonder `items[]` wordt met rust gelaten.
* **Je jezelf hebt afgemeld** via een van de methoden hieronder.

Wanneer Aftersell de toevoeging niet uitvoert, kijkt hij nog steeds naar het cart-verzoek en opent hij de drawer als hij er een ziet. Zie [Before you choose: what changes](#before-you-choose-what-changes).

<div id="which-themes-aftersell-recognizes">
  ## Welke thema's Aftersell herkent
</div>

| Thema                                                 |                                                                                             |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Dawn** en de rest van de gratis familie van Shopify | Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste |
| **Horizon**                                           | Het huidige standaardthema van Shopify                                                      |
| **Impulse**                                           |                                                                                             |

Aftersell matcht op **hoe een thema is gebouwd**, niet op de naam, dus een custom thema dat is geforkt van een van deze wordt normaal gesproken ook herkend, inclusief private builds die Aftersell nog nooit heeft gezien.

<Note>
  Het omgekeerde gebeurt ook: een sterk aangepaste build kan zover afdrijven van zijn ouder dat Aftersell hem niet meer herkent, ook al heet het thema nog steeds "Dawn". Op deze lijst staan maakt herkenning waarschijnlijk, niet zeker.
</Note>

<div id="your-options">
  ## Je opties
</div>

Kies de smalste die je probleem oplost. Elke rij geeft meer op dan de vorige.

| Optie                                                                | Bereik                                 | Aftersell opent de drawer nog steeds |
| -------------------------------------------------------------------- | -------------------------------------- | ------------------------------------ |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | De formulieren die je regel selecteert | Ja, vanuit het cart-verzoek          |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | Eén formulier of knop                  | Ja, vanuit het cart-verzoek          |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | Elk formulier in de winkel             | Ja, vanuit het cart-verzoek          |

<div id="before-you-choose-what-changes">
  ### Voordat je kiest: wat er verandert
</div>

Afmelden geeft de toevoeging terug aan je thema, wat twee vragen oproept die het waard zijn om te beantwoorden voordat je een rij kiest: of je winkelwagen nog opent, en of de winkelwagen van het thema er naast opduikt.

<div id="will-your-cart-still-open">
  #### Opent je winkelwagen nog steeds?
</div>

Meestal wel, zonder werk van jouw kant. Wie de toevoeging ook uitvoert, Aftersell kijkt naar het verzoek dat naar Shopify gaat en opent de drawer als hij er een ziet, volgens je normale instelling **Open cart when an item is added**. Je hoeft zelf niets aan te roepen.

Drie situaties breken dat, en alle drie hebben een oplossing:

**De toevoeging gaat naar iets anders dan de cart-endpoints van Shopify.** Aftersell kijkt naar `/cart/add`, `/cart/change`, `/cart/update` en `/cart/clear` op je eigen domein. Een app die toevoegt via zijn eigen endpoint en de winkelwagen daarna synchroniseert, is hiervoor niet zichtbaar. Open de winkelwagen zelf zodra de toevoeging van die app klaar is:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});
```

**Er verstrijken meer dan zo'n drie seconden tussen de klik en het verzoek.** Aftersell behandelt een toevoeging die kort na een echte klik of toetsaanslag komt als door de shopper gedreven. Buiten dat venster wordt het beschouwd als een achtergrondtoevoeging, die de drawer niet opent tenzij je je opt-in geeft:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```

**Je cart-instelling zegt van niet.** Als **Open cart when an item is added** uitstaat, of je hebt `open_on_add_to_cart: 'never'` ingesteld, opent niets de drawer. Dat werkt zoals geconfigureerd.

<div id="will-the-themes-cart-open-too">
  #### Opent de winkelwagen van het thema ook?
</div>

Dit is het risico dat de opt-outs met zich meebrengen, en het antwoord hangt af van je thema.

De winkelwagen van het thema inert maken is **los van interceptie** en gebeurt bij het laden van de pagina, wat je ook doet, dus geen van de opt-outs hier zet dat weer aan. Op een thema uit de [herkende lijst](#which-themes-aftersell-recognizes) blijft de eigen winkelwagen van het thema stil en ziet de shopper één winkelwagen, de jouwe.

Op een thema dat Aftersell niet herkent, is er niets dat de winkelwagen van het thema tegenhoudt. Afmelden betekent dat het thema de toevoeging precies zo afhandelt als altijd, inclusief het openen van zijn eigen drawer of het doorsturen naar `/cart`, terwijl Aftersell zijn drawer opent op basis van het verzoek dat hij zag. Dat zijn twee winkelwagens, en dat is de reden dat interceptie überhaupt bestaat.

Als dat gebeurt, heb je drie keuzes: laat interceptie voor dat formulier aan staan, gebruik een smallere opt-out die de veroorzakende formulieren niet omvat, of stop de eigen winkelwagen van het thema zelf in je themacode.

<Tip>
  Zet een opt-out eerst aan in een test- of ongepubliceerd thema. Als de eigen winkelwagen van het thema opduikt waar dat voorheen niet zo was, is jouw thema er geen dat Aftersell herkent, en wil je interceptie voor die formulieren aan houden.
</Tip>

<Note>
  Dit geldt alleen voor add-to-cart. Het **cart icon** Aftersell laten omzeilen met de class `aftersell-cart-wont-open-cart` is iets anders: een klik op het cart icon stuurt geen verzoek, dus er is niets voor Aftersell om naar te kijken, en de drawer opent niet. Zie hieronder.
</Note>

<div id="per-form-a-rule-in-code">
  ### Per formulier: een regel in code
</div>

De voorkeursoptie. Registreer een regel die `true` teruggeeft voor de formulieren die je met rust wilt laten:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);
```

Zet het in **Cart settings → Custom script → Initialization**. Regels zijn additief: de jouwe draait naast alle andere, en elke regel die `true` teruggeeft slaat dat formulier over. Volledige details in [Hooks](/nl/aftersell/cart/sdk-hooks#registerskipaddtocartrule).

<div id="per-form-a-class-in-your-theme">
  ### Per formulier: een class in je thema
</div>

Als je liever geen regel schrijft, voeg dan de class `aftersell-cart-skip-atc` toe in je thema:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">
```

<Note>
  Voor een formulier-submit moet de class op het **form-element zelf** staan. Een omliggende `div` werkt niet. Voor een knop die aan de winkelwagen toevoegt zonder een formulier-submit, kan de class op de knop staan of op een element eromheen.
</Note>

<div id="whole-store-turn-interception-off">
  ### Hele winkel: interceptie uitschakelen
</div>

De botte optie. Add-to-cart gedraagt zich precies zoals je thema oorspronkelijk deed, op elk formulier:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_add_to_cart_interceptor: true });
```

<Warning>
  Deze wordt **eenmalig, wanneer de winkelwagen laadt** gelezen. Hij werkt alleen vanuit het **Initialization**-script van je winkelwagen. Later instellen, binnen `ready()` of vanuit een event-handler, doet niets en faalt stilzwijgend.
</Warning>

Grijp hier alleen naar wanneer de per-formulier-opties niet passen, bijvoorbeeld wanneer de formulieren die je moet uitzonderen door een andere app zijn aangemaakt en je ze niet betrouwbaar kunt identificeren.

<div id="the-cart-icon-is-separate">
  ## Het cart icon staat los
</div>

Het cart icon in je header wordt afgehandeld door zijn eigen interceptor, met zijn eigen opt-out. Add-to-cart-interceptie uitschakelen verandert niets aan wat het cart icon doet, en omgekeerd geldt hetzelfde.

Op het cart icon klikken opent de Aftersell drawer in plaats van naar `/cart` te gaan. Om één icoon of knop met rust te laten, voeg je de class `aftersell-cart-wont-open-cart` eraan toe, of aan een element eromheen:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>
```

Dat besturingselement doet dan wat je thema het laat doen, meestal naar de winkelwagenpagina gaan. Aftersell is helemaal uit beeld, dus **de drawer opent niet**. Anders dan bij add-to-cart is er geen verzoek om naar te kijken, dus als je wilt dat je winkelwagen opent vanuit dat besturingselement, moet je dat zeggen:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});
```

Hetzelfde silencing-probleem geldt hier: omdat Aftersell de klik stopt, zien je analytics en pixels ook geen klikken op het cart icon. Als dat alles is wat je moet oplossen, houd de drawer en stop het silencen:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_open_cart_interceptor: true });
```

Je listeners draaien, de drawer opent nog steeds, en de klik navigeert nog steeds niet naar `/cart`. Volledige details in [Configure](/nl/aftersell/cart/sdk-configure#skip_open_cart_interceptor).

<Note>
  Om te veranderen *welke* elementen de winkelwagen openen in plaats van ze uit te schakelen, gebruik je **Cart settings → Advanced → Cart icon selector** in plaats van je thema te bewerken.
</Note>

<div id="where-to-go-next">
  ## Waar je verder kunt kijken
</div>

* **[Configure](/nl/aftersell/cart/sdk-configure)**: elke SDK-optie, inclusief de opties waarnaar hier wordt verwezen.
* **[Hooks](/nl/aftersell/cart/sdk-hooks)**: controle per formulier en per regel.
* **[De drawer openen vanuit een page builder](/nl/aftersell/cart/sdk-use-case-page-builder)**: voor Replo, PageFly, GemPages en custom knoppen die op hun eigen manier aan de winkelwagen toevoegen.