Den Drawer aus einem Page Builder öffnen

Aftersell fängt Add-to-Cart auf standardmäßigen Shopify-Produktformularen ab. Landingpage-Builder legen Artikel oft auf ihre eigene Weise in den Warenkorb, per JavaScript-Aufruf statt Formular-Submit — der Artikel landet zwar im Warenkorb, aber der Drawer bleibt zu, oder Käufer werden zu /cart weitergeleitet.

Die Lösung in einer Zeile

Nachdem das Add-to-Cart des Builders abgeschlossen ist, weise den Warenkorb an, neu zu laden und sich zu öffnen:

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

Füge das als zweite Aktion am Button hinzu, nach dem builder-eigenen „Add to cart“, und deaktiviere die Option „Go to cart“ bzw. „Redirect after add“ des Builders.

Probiere zuerst open_on_background_add, denn das löst das Problem oft, ohne den Button überhaupt anzufassen.

Zuerst die No-Code-Option

Aftersell erkennt Hinzufügungen, die es nicht selbst verarbeitet hat, auf zwei Wegen. Beide laufen jederzeit — sie werden beim Start gemeinsam eingerichtet und keiner unterdrückt den anderen, sodass eine Hinzufügung von beiden gemeldet werden kann — und jede Meldung wendet die Öffnungsregel unabhängig an:

Auf Netzwerkebene. Aftersell beobachtet Anfragen an Shopifys Warenkorb-Endpunkte. Folgte die Hinzufügung innerhalb von etwa drei Sekunden auf einen echten Klick oder Tastendruck, gilt sie als vom Käufer ausgelöst, und der Drawer öffnet sich gemäß deiner normalen Einstellung Open cart when an item is added. Jeder Builder, der über Shopifys Ajax Cart API (/cart/add.js) hinzufügt, landet hier — das ist der häufigste Fall. Probiere deinen Button also zuerst aus, er funktioniert möglicherweise schon ganz ohne Änderungen.
Shopifys Standard-Warenkorb-Events. Eine so gemeldete Hinzufügung wird immer als Hintergrund-Hinzufügung behandelt, egal ob ein Käufer geklickt hat oder nicht. Hintergrund-Hinzufügungen öffnen den Drawer nur, wenn du das aktivierst:

window.aftersell.cart.configure({ open_on_background_add: true });

Füge das unter Cart settings → Custom script → Initialization ein. Öffnet sich der Drawer jetzt nach dem Add-Button deines Builders, bist du fertig — ohne Arbeit pro Button, und es deckt jede Seite ab.

open_on_background_add deckt auch Hinzufügungen ganz ohne Käufer-Interaktion ab — etwa wenn eine andere App oder ein anderes Skript in den Warenkorb schreibt. Aktiviere es nur, wenn auch diese den Drawer öffnen sollen.

Öffnet keiner der beiden Wege den Drawer, greife auf den expliziten Aufruf unten zurück.

Einrichtung je Builder

Replo

Öffne deine Seite im Replo-Editor und wähle den Button Add to Cart aus.
Öffne in der rechten Seitenleiste den Tab Interactions.
Klicke unter On Click auf + und wähle Run JavaScript.

Füge Folgendes ein:

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

Wähle erneut die Interaktion Add Product to Cart aus und schalte Go to cart after? aus.
Sieh dir die Vorschau an, bestätige, dass sich der Drawer öffnet, und veröffentliche dann.

Wiederhole das auf jeder Seite, die einen Add-to-Cart-Button hat.

PageFly und GemPages

Beide erlauben es, eigenes JavaScript an einen Button-Klick zu hängen oder ein Custom-Code-Element zur Seite hinzuzufügen. Verwende denselben Snippet, so verdrahtet, dass er nach der Add-to-Cart-Aktion des Builders läuft, und deaktiviere jede „Redirect to cart“-Einstellung am Button.

Dein eigener Button

Wenn du selbst zum Warenkorb hinzufügst, spare dir den Umweg und nutze die eigene Aktion des SDK, die den Warenkorb aktualisiert und den Drawer in einem Schritt öffnen kann:

document.querySelector('#my-add-button').addEventListener('click', () => {
  window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
    window.aftersell.cart.actions.open();
  });
});

Verwende refresh() nur, wenn etwas anderes den Warenkorb geändert hat und Aftersell aufholen muss:

fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });

Wenn der Builder-Button Aftersell komplett umgehen soll

Manchmal ist das Gegenteil der Fall: Ein Formular braucht seinen eigenen Ablauf, und Aftersells Abfangen steht im Weg. Nimm nur dieses Formular aus:

window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);

Füge dann data-skip-aftersell zum Formular hinzu. Das ist besser als skip_add_to_cart_interceptor, das das Abfangen für jedes Formular auf der Seite deaktiviert. Noch einfacher, wenn du das Markup des Formulars bearbeiten kannst: Füge dem <form> die Klasse aftersell-cart-skip-atc hinzu, und Aftersell überspringt es — ganz ohne Skript.

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

Fehlerbehebung

Symptom	Wahrscheinliche Ursache
Artikel hinzugefügt, Drawer bleibt zu	Der Builder sendet Shopifys Standard-Warenkorb-Events nicht. Verwende den expliziten Aufruf `refresh()` + `open()`.
Käufer wird zu `/cart` weitergeleitet	Die Option „Go to cart after add“ des Builders ist noch aktiv. Schalte sie aus.
Drawer öffnet sich, zeigt aber veraltete Inhalte	`open()` lief, bevor `refresh()` abgeschlossen war. Verkette sie wie oben mit `.then()`.
Es passiert gar nichts	Aktionen, die vor dem Laden des Warenkorbs aufgerufen werden, geben eine Warnung in der Konsole aus und tun nichts. Umschließe sie mit `window.aftersell.cart.ready().then(…)`, wenn der Button so früh angeklickt werden kann.
Funktioniert auf einer Seite, auf einer anderen nicht	Die meisten Builder wenden Interaktionen pro Seite an. Wiederhole die Einrichtung auf jeder Seite.

Prüfe window.aftersellCartDebugEvents, wenn ein Aufruf scheinbar nichts bewirkt, denn SDK-Fehler werden verschluckt statt geworfen.

Nächste Schritte

Configure: open_on_background_add und die anderen Drawer-Optionen.
Actions: refresh, open und addItem.
Hooks: ein einzelnes Formular ausnehmen.

Erste Schritte

Startseite

Best Practices

Post-Purchase-Upsells

Warenkorb

Checkout-Upsells (Shopify Plus)

Danke-Seite

Produktseiten-Upsells

Rokt Thanks

Strategien

Analytics & Tracking

Integrationen

Aftersell MCP

Abrechnung & Konto

Fehlerbehebung

Den Drawer aus einem Page Builder öffnen

Die Lösung in einer Zeile

Zuerst die No-Code-Option

Einrichtung je Builder

Replo

PageFly und GemPages

Dein eigener Button

Wenn der Builder-Button Aftersell komplett umgehen soll

Fehlerbehebung

Nächste Schritte

​Die Lösung in einer Zeile

​Zuerst die No-Code-Option

​Einrichtung je Builder

​Replo

​PageFly und GemPages

​Dein eigener Button

​Wenn der Builder-Button Aftersell komplett umgehen soll

​Fehlerbehebung

​Nächste Schritte

Die Lösung in einer Zeile

Zuerst die No-Code-Option

Einrichtung je Builder

Replo

PageFly und GemPages

Dein eigener Button

Wenn der Builder-Button Aftersell komplett umgehen soll

Fehlerbehebung

Nächste Schritte