> ## 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.
# Den Drawer aus einem Page Builder öffnen
> Ein Cart-SDK-Anwendungsfall, damit Add-to-Cart-Buttons von Replo, PageFly, GemPages und eigene Buttons den Aftersell Cart Drawer ö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:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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`](#the-no-code-option-first), 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](https://shopify.dev/docs/storefronts/themes/best-practices/standard-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:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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
1. Öffne deine Seite im Replo-Editor und wähle den Button **Add to Cart** aus.
2. Öffne in der rechten Seitenleiste den Tab **Interactions**.
3. Klicke unter **On Click** auf `+` und wähle **Run JavaScript**.
4. Füge Folgendes ein:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
5. Wähle erneut die Interaktion **Add Product to Cart** aus und schalte **Go to cart after?** aus.
6. 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:
```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();
});
});
```
Verwende `refresh()` nur, wenn etwas *anderes* den Warenkorb geändert hat und Aftersell aufholen muss:
```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(); });
```
## 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:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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`](/de/aftersell/cart/sdk-configure#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 `