window.aftersell.cart.events.
Das Abonnieren ist ein Setup-Aufruf und daher am Anfang deines Scripts sicher, ohne auf ready() warten zu müssen.
Verfügbare Events
Abonnieren
events.on(event, handler) registriert einen Handler und gibt eine Funktion zurück, die ihn abmeldet:
events.once(event, handler): wird einmal ausgelöst und meldet sich dann selbst ab.events.off(event, handler): entfernt einen bestimmten Handler.
Die zwei Regeln
Ändere den Warenkorb nicht ungeschützt aus cart_updated
cart_updated-Handlers zu ändern löst erneut cart_updated aus. Wenn dieser Handler den Warenkorb wieder ändert, hast du eine Endlosschleife. Der Käufer sieht seinen Warenkorb flackern, während die Seite Shopify bombardiert.
Behandle die Payload als schreibgeschützt
registerLineTransform.
cart_loaded
cart_loaded wird für späte Abonnenten erneut abgespielt. Wenn du abonnierst, nachdem der Warenkorb bereits geladen ist, wird dein Handler sofort mit dem aktuellen Warenkorb aufgerufen. Die Abonnement-Reihenfolge spielt nie eine Rolle, du musst dir also keine Sorgen machen, ob dein Script schneller war als der Warenkorb.
cart_updated
item_added
{ item }, wobei item die Warenkorb-Zeile ist.
cart_loaded an. Das gleichzeitige Hinzufügen mehrerer unterschiedlicher Produkte löst das Event einmal pro Zeile aus.
item_removed
{ item }, die Zeile wie sie kurz vor ihrem Verschwinden war — du kannst also weiterhin key, variantId und title lesen.
item_added: Eine Menge zu senken, ohne null zu erreichen, ist keine Entfernung.
cart_opened und cart_closed
checkout
Von außerhalb des SDK lauschen
CustomEvent auf window gesendet, sodass du lauschen kannst, ohne window.aftersell.cart anzufassen. Das ist nützlich aus einer Theme-Datei, einer Drittanbieter-App oder einem Script, das unabhängig vom Warenkorb lädt.
Achte auf die Benennung: Der Bus verwendet
snake_case, die DOM-Events verwenden kebab-case hinter einem aftersell:cart:-Präfix.
event.detail an und entspricht dem Cart-Objekt. Events werden auf window gesendet, sodass ein Listener überall auf der Seite sie empfängt. Der Warenkorb wird in einem Shadow Root gerendert, aber die Shadow-Grenze liegt nie im Pfad des Events. Jeder Versand klont die Payload, sodass ein Listener, der event.detail mutiert, niemand anderen beeinflussen kann, und ein Listener, der wirft, das SDK nicht stören kann.
Shopify-Standard-Warenkorb-Events
document, wann immer er den Warenkorb ändert — Theme-Code und andere Apps können also auf Aftersells Mutationen genauso reagieren wie auf die des Themes:
Jedes Event trägt außerdem ein
promise, das Aftersell auflöst, wenn der zugrunde liegende Schreibvorgang abgeschlossen ist, entsprechend Shopifys Standard — warte darauf, löse es nicht selbst auf. Diese werden auf document gesendet und bubbeln, sodass ein window-Listener sie ebenfalls empfängt.
Nächste Schritte
- Cart-Objekt: die vollständige Struktur der obigen Payloads.
- Actions: wie du den Warenkorb aus einem Handler änderst.
- Hooks: um zu ändern, wie der Warenkorb rendert, statt auf ihn zu reagieren.
- Use Cases: Analytics-Tracking, Gratisgeschenke und andere vollständige Beispiele.