> ## 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.
# De drawer openen vanuit een page builder
> Een Cart SDK use case om Replo-, PageFly-, GemPages- en custom add-to-cart-knoppen de Aftersell Cart drawer te laten openen.
Aftersell onderschept add-to-cart op standaard Shopify-productformulieren. Landingspagina-builders voegen vaak op hun eigen manier toe aan de winkelwagen, met een JavaScript-aanroep in plaats van een formulier-submit, waardoor het item wel in de winkelwagen belandt maar de drawer dicht blijft, of de shopper wordt doorgestuurd naar `/cart`.
## De oplossing, in één regel
Nadat de add-to-cart van de builder klaar is, vertel je de winkelwagen om opnieuw op te halen en te openen:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
Voeg dit toe als een **tweede actie** op de knop, na de eigen "add to cart" van de builder, en schakel de "go to cart"- of "redirect after add"-optie van de builder uit.
Probeer eerst [`open_on_background_add`](#the-no-code-option-first), want dat lost dit vaak op zonder de knop überhaupt aan te raken.
## Eerst de no-code-optie
Aftersell detecteert toevoegingen die het niet zelf heeft afgehandeld op twee manieren. Beide draaien altijd — ze worden samen bij het opstarten gekoppeld en geen van beide onderdrukt de ander, dus één toevoeging kan door beide worden aangekondigd — en elke aankondiging past de open-regel onafhankelijk toe:
* **Op de lijn.** Aftersell let op requests naar de winkelwagen-endpoints van Shopify. Als de toevoeging binnen ongeveer drie seconden op een echte klik of toetsaanslag volgde, telt hij als shopper-gedreven, en opent de drawer volgens je normale **Open cart when an item is added**-instelling. Elke builder die toevoegt via de Ajax cart API van Shopify (`/cart/add.js`) komt hier terecht, wat het gebruikelijke geval is — probeer je knop dus eerst, hij werkt mogelijk al zonder enige wijziging.
* **[De standaard cart events van Shopify](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** Een toevoeging die op deze manier wordt aangekondigd, wordt altijd behandeld als een *achtergrond*-toevoeging, of een shopper nu klikte of niet. Achtergrondtoevoegingen openen de drawer niet tenzij je je aanmeldt:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```
Plak dat in **Cart settings → Custom script → Initialization**. Als de drawer nu opent na de add-knop van je builder, ben je klaar, zonder werk per knop, en het dekt elke pagina.
`open_on_background_add` dekt ook toevoegingen zonder enig shoppergebaar — een andere app of script die naar de winkelwagen schrijft. Zet het alleen aan als je wilt dat die ook de drawer laten verschijnen.
Als geen van beide paden de drawer opent, val dan terug op de expliciete aanroep hieronder.
## Setup per builder
### Replo
1. Open je pagina in de Replo-editor en selecteer de **Add to Cart**-knop.
2. Open in de rechterzijbalk het tabblad **Interactions**.
3. Klik onder **On Click** op `+` en kies **Run JavaScript**.
4. Plak:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
5. Selecteer opnieuw de **Add Product to Cart**-interactie en zet **Go to cart after?** uit.
6. Bekijk de preview, bevestig dat de drawer opent, en publiceer dan.
Herhaal dit op elke pagina met een add-to-cart-knop.
### PageFly en GemPages
Beide laten je custom JavaScript koppelen aan een knopklik of een custom code-element aan de pagina toevoegen. Gebruik hetzelfde snippet, zo aangesloten dat het na de add-to-cart-actie van de builder draait, en schakel elke "redirect to cart"-instelling op de knop uit.
### Je eigen knop
Als je zelf aan de winkelwagen toevoegt, sla dan de omweg over en gebruik de eigen action van de SDK, die de winkelwagen bijwerkt en de drawer in één stap kan openen:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-add-button').addEventListener('click', () => {
window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
window.aftersell.cart.actions.open();
});
});
```
Gebruik `refresh()` alleen wanneer iets *anders* de winkelwagen heeft gewijzigd en Aftersell moet bijkomen:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
fetch('/cart/add.js', { method: 'POST', /* … */ })
.then(() => window.aftersell.cart.actions.refresh())
.then(() => { window.aftersell.cart.actions.open(); });
```
## Wanneer de knop van de builder Aftersell volledig moet omzeilen
Soms is het omgekeerde waar: een formulier heeft zijn eigen flow nodig, en de onderschepping van Aftersell zit in de weg. Stel alleen dat formulier vrij:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
form.hasAttribute('data-skip-aftersell')
);
```
Voeg dan `data-skip-aftersell` toe aan het formulier. Dit is beter dan [`skip_add_to_cart_interceptor`](/nl/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor), dat de onderschepping uitschakelt voor elk formulier op de pagina.
Nog eenvoudiger, als je de markup van het formulier kunt bewerken: voeg de class **`aftersell-cart-skip-atc`** toe aan de `