De drawer openen vanuit een page builder

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:

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, 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. 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:

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

Open je pagina in de Replo-editor en selecteer de Add to Cart-knop.
Open in de rechterzijbalk het tabblad Interactions.
Klik onder On Click op + en kies Run JavaScript.

Plak:

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

Selecteer opnieuw de Add Product to Cart-interactie en zet Go to cart after? uit.
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:

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:

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:

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, 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 <form> en Aftersell slaat hem over, geen script nodig.

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

Problemen oplossen

Symptoom	Waarschijnlijke oorzaak
Item toegevoegd, drawer blijft dicht	De builder zendt de standaard cart events van Shopify niet uit. Gebruik de expliciete `refresh()` + `open()`-aanroep.
Shopper wordt doorgestuurd naar `/cart`	De “go to cart after add”-optie van de builder staat nog aan. Zet hem uit.
Drawer opent maar toont verouderde inhoud	`open()` draaide voordat `refresh()` resolvede. Ketting ze met `.then()`, zoals hierboven.
Er gebeurt helemaal niets	Actions die worden aangeroepen voordat de winkelwagen laadde, geven een waarschuwing in de console en doen niets. Wikkel in `window.aftersell.cart.ready().then(…)` als de knop zo vroeg geklikt kan worden.
Werkt op de ene pagina, niet op de andere	De meeste builders passen interacties per pagina toe. Herhaal de setup op elke pagina.

Controleer window.aftersellCartDebugEvents als een aanroep niets lijkt te doen, aangezien SDK-fouten worden opgeslokt in plaats van gegooid.

Waar je verder kunt kijken

Configure: open_on_background_add en de andere drawer-opties.
Actions: refresh, open en addItem.
Hooks: een enkel formulier vrijstellen.

Aan de slag

Startpagina

Best practices

Post-purchase upsells

Winkelwagen

Checkout-upsells (Shopify Plus)

Bedankpagina

Upsells op de productpagina

Rokt Thanks

Strategieën

Analytics en tracking

Integraties

Aftersell MCP

Facturering en account

Probleemoplossing

De drawer openen vanuit een page builder

De oplossing, in één regel

Eerst de no-code-optie

Setup per builder

Replo

PageFly en GemPages

Je eigen knop

Wanneer de knop van de builder Aftersell volledig moet omzeilen

Problemen oplossen

Waar je verder kunt kijken

​De oplossing, in één regel

​Eerst de no-code-optie

​Setup per builder

​Replo

​PageFly en GemPages

​Je eigen knop

​Wanneer de knop van de builder Aftersell volledig moet omzeilen

​Problemen oplossen

​Waar je verder kunt kijken

De oplossing, in één regel

Eerst de no-code-optie

Setup per builder

Replo

PageFly en GemPages

Je eigen knop

Wanneer de knop van de builder Aftersell volledig moet omzeilen

Problemen oplossen

Waar je verder kunt kijken