<script>-tags. On cart update heeft een actie Reset to default die de startertemplate herstelt; Initialization niet, dus bewaar je eigen kopie voordat je het leegmaakt.
Veel van wat merchants vroeger scriptten, is nu een ingebouwde instelling. Bekijk eerst Voordat je een script schrijft: een instelling blijft werken bij cart-herontwerpen, en je script misschien niet.
Welk slot je moet gebruiken
Initialization
window.aftersell.cart.
Setup-aanroepen die je hier doet (configure(...), events.on(...), hooks.*) zijn veilig om bovenaan het script aan te roepen, zelfs voordat de cart volledig is opgestart; ze worden gebufferd en toegepast zodra dat gebeurt. Acties die de cart lezen of wijzigen (zoals addItem of getCart) moeten binnen ready() of een event-handler draaien.
Het slot begint met drie uitgecommentarieerde voorbeelden — de drawer openen bij elke toevoeging, reageren op cart_loaded, en gratis cadeau-regels verbergen — dus een onaangeraakt Initialization-script doet niets. Haal het commentaar van één voorbeeld weg om het te proberen, of vervang ze.
De natuurlijke vorm voor dit slot is een eenmalige registratie zonder events: registreer het gedrag één keer en laat de cart het vanaf dan toepassen. Gratis cadeau-regels verbergen in de drawer, zonder het totaal te wijzigen, is het meegeleverde voorbeeld daarvan:
registerLineTransform draait voor elke regel terwijl deze rendert, en setHidden is alleen visueel, dus de regel blijft in de cart en telt nog steeds mee in het totaal, hij wordt alleen niet in de drawer getoond. Zie Cartregels verbergen en herlabelen voor meer van wat een transform kan doen.
Acties die de cart lezen, horen binnen ready():
shadowRoot: de cart rendert binnen een shadow root, dus document.querySelector kan niets in de drawer zien.
On cart update
cart_updated-abonnement, dus je bewerkt alleen de body, en je code ontvangt de bijgewerkte cart.
Dit slot is voor regels die bij elke cartwijziging opnieuw moeten worden geëvalueerd. Een drempel voor een gratis cadeau is het klassieke geval (besteed $75, krijg een gratis draagtas), omdat het antwoord afhangt van de huidige inhoud en niets anders je kan vertellen wanneer die verandert:
De cart in een gewenste staat houden
if (shouldHaveGift === hasGift) return; maakt dit veilig, en dat principe geldt voor elk script dat de cart in een gewenste staat houdt. Dit slot reageert zowel op cartwijzigingen als veroorzaakt ze, dus elke addItem of removeItem roept het opnieuw aan. Beschrijf de staat die je wilt, vergelijk die met de staat die je hebt, en return vroegtijdig wanneer ze al overeenkomen, zodat de handler na één doorloop convergeert in plaats van te blijven lussen. Zie de twee regels voor de onbeveiligde versie die je moet vermijden en waarom de payload alleen-lezen is.
Op een tragere winkel is het ook de moeite waard om een in-flight-vlag op moduleniveau bij te houden, zodat twee snelle wijzigingen niet allebei een add kunnen starten voordat de eerste is geland.
cart_updated vuurt alleen bij wijzigingen na de eerste load (event-timing), dus een script in dit slot zal een cart die bij het laden van de pagina al kwalificeert niet bijwerken. Voor een versie die beide afhandelt, abonneer je vanuit het Initialization-slot op cart_loaded en cart_updated met dezelfde functie. Zie Automatisch een gratis cadeau toevoegen bij een drempel.Wanneer een script kapotgaat
configure, events.on of hooks.register* verderop nooit wordt geregistreerd. Dat is de gebruikelijke verklaring voor “mijn handler vuurt nooit” terwijl de code er goed uitziet.
De cart benoemt de falende regel in de browserconsole, en elk slot draait onder zijn eigen bestandsnaam (aftersell-cart-init.js en aftersell-cart-cart-update.js), dus je kunt beide openen vanuit het Sources-paneel van DevTools en breakpoints instellen. Zie Debuggen voor de exacte meldingen, en voor het debugkanaal dat hookfouten opvangt die buiten de console worden gehouden.
Omdat cart_loaded opnieuw wordt afgespeeld voor late abonnees, maakt de registratievolgorde nooit uit. De veiligste structuur is om alles eerst te registreren en het risicovolle werk binnen handlers te doen, waar een throw geïsoleerd blijft tot die handler.
Volgende stappen
- Cart SDK: aangepaste scripts zijn hoe je SDK-code uitvoert. Zie de referenties voor configure, events, actions en hooks voor het volledige oppervlak, het cartobject voor de vorm van wat handlers ontvangen, en de use cases voor kant-en-klare snippets.
- Custom code-blokken: voor het toevoegen van markup aan de cart. Let op: de HTML-modus van het Custom code-blok voert geen JavaScript uit; gebruik aangepaste scripts (of de React-modus van het blok) voor logica.