> ## 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.

# Add-to-cart-Abfangen

> Warum Aftersell Add-to-cart übernimmt, wie du erkennst, ob ein Formular abgefangen wird, und jede Möglichkeit, ein Formular auszunehmen.

Wenn ein Käufer auf **Add to cart** klickt, übernimmt normalerweise Aftersell das Hinzufügen selbst, statt es dem Theme zu überlassen. Diese Seite erklärt, warum, was das für Scripts bedeutet, die du hinzugefügt hast, und wie du es für ein Formular oder alle Formulare ausschaltest.

Die meisten Shops müssen daran nie etwas ändern. Lies weiter, wenn eines deiner Scripts beim Add-to-cart nicht mehr feuert oder ein Add-to-cart-Button sich seltsam verhält.

## Was das Abfangen tut

Aftersell hört den Add-to-cart-Submit ab, bevor das Theme es tut. Wenn es einen erkennt, tut es Folgendes:

1. Stoppt das Event, sodass nichts anderes auf der Seite diesen Klick behandelt.
2. Sendet das Hinzufügen selbst an Shopify.
3. Öffnet den Aftersell Cart Drawer.

Schritt 1 ist der wichtige und der Grund, warum es diese Seite gibt.

## Warum es existiert

Ohne das Abfangen reagieren beide Warenkörbe auf denselben Klick. Das Theme fügt den Artikel hinzu und öffnet seinen eigenen Drawer, Aftersell fügt ihn hinzu und öffnet unseren, und der Käufer sieht zwei Warenkörbe, oft mit dem Artikel doppelt hinzugefügt.

Das Event zu stoppen ist der einfachste Weg, ein einzelnes Hinzufügen und einen einzelnen Warenkorb zu garantieren.

## Was es kostet

Das Event zu stoppen stoppt es für **alle**, nicht nur für das Theme. Jeder andere Code, der auf dasselbe Add-to-cart lauscht, läuft nicht mehr: deine Analytics, ein Tracking-Pixel, eine Abo- oder Bundle-App, ein Script, das du selbst hinzugefügt hast.

Es scheitert still. Nichts erscheint in der Browser-Konsole, und das Hinzufügen selbst funktioniert weiterhin. Das übliche Symptom ist also eine falsche Zahl, nicht etwas sichtbar Kaputtes:

* `add_to_cart`-Events fehlen in GA4, Meta oder TikTok
* Eine Abo- oder Bundle-App, die auf der Produktseite funktioniert, aber nicht über den Warenkorb
* Dein eigenes `addEventListener` auf dem Formular feuert nie

Wenn irgendetwas davon bekannt klingt, ist diese Seite die Ursache und der Fix steht unten.

## Wann Aftersell nicht abfängt

Das Abfangen ist nicht immer aktiv. Aftersell lässt Add-to-cart in Ruhe, wenn:

* **Es dein Theme-Cart erkennt.** Bei Themes, mit denen Aftersell umzugehen weiß, macht es den eigenen Warenkorb des Themes inert, statt das Event zu blockieren, und lässt das Theme dann das Hinzufügen normal ausführen. Deine Scripts laufen wie immer. Siehe [Welche Themes](#which-themes-aftersell-recognizes) unten.
* **Das Formular keine Warenkorb-Zeile hinzufügt.** Ein Formular ohne Varianten-`id` und ohne `items[]` wird in Ruhe gelassen.
* **Du dich ausgeschlossen hast** über eine der unten stehenden Methoden.

Wenn Aftersell das Hinzufügen nicht selbst ausführt, beobachtet es trotzdem die Warenkorb-Anfrage und öffnet den Drawer, wenn es eine sieht. Siehe [Bevor du wählst: was sich ändert](#before-you-choose-what-changes).

## Welche Themes Aftersell erkennt

| Theme                                                 |                                                                                             |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Dawn** und der Rest der kostenlosen Shopify-Familie | Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste |
| **Horizon**                                           | Shopifys aktuelles Standard-Theme                                                           |
| **Impulse**                                           |                                                                                             |

Aftersell matcht darauf, **wie ein Theme gebaut ist**, nicht auf seinen Namen. Ein Custom-Theme, das von einem dieser Themes geforkt wurde, wird also normalerweise auch erkannt, einschließlich privater Builds, die Aftersell nie gesehen hat.

<Note>
  Das Umgekehrte kommt ebenfalls vor: Ein stark angepasster Build kann so weit von seinem Elternteil abweichen, dass Aftersell ihn nicht mehr erkennt, obwohl das Theme immer noch „Dawn" heißt. Auf dieser Liste zu stehen macht die Erkennung wahrscheinlich, nicht sicher.
</Note>

## Deine Optionen

Wähle die engste, die dein Problem löst. Jede Zeile gibt mehr auf als die darüber.

| Option                                                               | Umfang                                  | Aftersell öffnet den Drawer weiterhin |
| -------------------------------------------------------------------- | --------------------------------------- | ------------------------------------- |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | Die Formulare, die deine Regel auswählt | Ja, aus der Warenkorb-Anfrage         |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | Ein Formular oder Button                | Ja, aus der Warenkorb-Anfrage         |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | Jedes Formular im Shop                  | Ja, aus der Warenkorb-Anfrage         |

### Bevor du wählst: was sich ändert

Sich auszunehmen gibt das Hinzufügen an dein Theme zurück, was zwei Fragen aufwirft, die du vor der Wahl beantworten solltest: Ob dein Warenkorb sich weiterhin öffnet und ob der Warenkorb des Themes neben ihm auftaucht.

#### Öffnet sich dein Warenkorb weiterhin?

Normalerweise ja, ohne dein Zutun. Egal wer das Hinzufügen ausführt: Aftersell beobachtet die Anfrage an Shopify und öffnet den Drawer, wenn es eine sieht, gemäß deiner normalen Einstellung **Open cart when an item is added**. Du musst nichts selbst aufrufen.

Drei Situationen brechen das, und alle drei haben einen Fix:

**Das Hinzufügen geht woandershin als an Shopifys Cart-Endpunkte.** Aftersell beobachtet `/cart/add`, `/cart/change`, `/cart/update` und `/cart/clear` auf deiner eigenen Domain. Eine App, die über ihren eigenen Endpunkt hinzufügt und den Warenkorb danach synchronisiert, ist dafür nicht sichtbar. Öffne den Warenkorb selbst, sobald das Hinzufügen dieser App fertig ist:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});
```

**Mehr als etwa drei Sekunden vergehen zwischen Klick und Anfrage.** Aftersell behandelt ein Hinzufügen, das eng auf einen echten Klick oder Tastendruck folgt, als vom Käufer ausgelöst. Jenseits dieses Fensters gilt es als Hintergrund-Hinzufügen, das den Drawer nur öffnet, wenn du es aktivierst:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```

**Deine Cart-Einstellung sagt nein.** Wenn **Open cart when an item is added** aus ist oder du `open_on_add_to_cart: 'never'` gesetzt hast, öffnet nichts den Drawer. Das ist so konfiguriert.

#### Öffnet sich auch der Warenkorb des Themes?

Das ist das Risiko der Opt-outs, und die Antwort hängt von deinem Theme ab.

Den Theme-Cart inert zu machen ist **vom Abfangen getrennt** und passiert so oder so beim Laden der Seite. Keiner der hiesigen Opt-outs schaltet das also wieder ein. Bei einem Theme aus der [Liste der erkannten Themes](#which-themes-aftersell-recognizes) bleibt der eigene Warenkorb des Themes still und der Käufer sieht einen Warenkorb, deinen.

Bei einem Theme, das Aftersell nicht erkennt, hält nichts den Theme-Cart zurück. Sich auszunehmen bedeutet, dass das Theme das Hinzufügen genau so behandelt wie immer, einschließlich des Öffnens seines eigenen Drawers oder der Weiterleitung zu `/cart`, während Aftersell seinen Drawer aus der Anfrage öffnet, die es gesehen hat. Das sind zwei Warenkörbe und der Grund, warum es das Abfangen überhaupt gibt.

Wenn das passiert, hast du drei Möglichkeiten: das Abfangen für dieses Formular anlassen, ein engeres Opt-out verwenden, das die verursachenden Formulare nicht umfasst, oder den Theme-Cart selbst in deinem Theme-Code stoppen.

<Tip>
  Aktiviere ein Opt-out zuerst in einem Test- oder unveröffentlichten Theme. Wenn der eigene Warenkorb des Themes dort auftaucht, wo er es vorher nicht tat, ist dein Theme keines, das Aftersell erkennt, und du willst das Abfangen für diese Formulare beibehalten.
</Tip>

<Note>
  Das gilt nur für Add-to-cart. Das **Cart-Icon** mit der Klasse `aftersell-cart-wont-open-cart` an Aftersell vorbeizulenken ist etwas anderes: Ein Klick auf das Cart-Icon sendet keine Anfrage, also gibt es nichts, was Aftersell beobachten könnte, und der Drawer öffnet sich nicht. Siehe unten.
</Note>

### Pro Formular: eine Regel in Code

Die bevorzugte Option. Registriere eine Regel, die für die Formulare `true` zurückgibt, die du in Ruhe lassen willst:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);
```

Platziere das in **Cart settings → Custom script → Initialization**. Regeln sind additiv: Deine läuft neben anderen, und jede Regel, die `true` zurückgibt, überspringt dieses Formular. Vollständige Details in [Hooks](/de/aftersell/cart/sdk-hooks#registerskipaddtocartrule).

### Pro Formular: eine Klasse in deinem Theme

Wenn du keine Regel schreiben willst, füge die Klasse `aftersell-cart-skip-atc` in deinem Theme hinzu:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">
```

<Note>
  Bei einem Formular-Submit muss die Klasse am **Formular-Element selbst** stehen. Ein übergeordnetes `div` funktioniert nicht. Bei einem Button, der ohne Formular-Submit zum Warenkorb hinzufügt, kann die Klasse am Button oder an einem beliebigen Element darum liegen.
</Note>

### Ganzer Shop: Abfangen ausschalten

Die grobe Option. Add-to-cart verhält sich auf jedem Formular genauso, wie es dein Theme ursprünglich tat:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_add_to_cart_interceptor: true });
```

<Warning>
  Diese Option wird **einmal, wenn der Warenkorb lädt** gelesen. Sie funktioniert nur aus dem **Initialization**-Script deines Warenkorbs. Sie später zu setzen, innerhalb von `ready()` oder aus einem Event-Handler, tut nichts und schlägt still fehl.
</Warning>

Greif nur dann dazu, wenn die Optionen pro Formular nicht passen. Zum Beispiel, wenn die auszunehmenden Formulare von einer anderen App erzeugt werden und du sie nicht zuverlässig identifizieren kannst.

## Das Cart-Icon ist separat

Das Cart-Icon in deinem Header wird von seinem eigenen Interceptor mit seinem eigenen Opt-out behandelt. Das Add-to-cart-Abfangen auszuschalten ändert nicht, was das Cart-Icon tut, und umgekehrt gilt das ebenso.

Ein Klick auf das Cart-Icon öffnet den Aftersell Drawer, statt zu `/cart` zu navigieren. Um ein einzelnes Icon oder einen einzelnen Button in Ruhe zu lassen, füge ihm oder einem umliegenden Element die Klasse `aftersell-cart-wont-open-cart` hinzu:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>
```

Dieses Steuerelement tut dann das, was dein Theme daraus macht, meistens zur Cart-Seite navigieren. Aftersell ist komplett aus dem Spiel, also **öffnet sich der Drawer nicht**. Anders als beim Add-to-cart gibt es keine Anfrage zu beobachten. Wenn du also willst, dass dein Warenkorb sich aus diesem Steuerelement heraus öffnet, musst du das sagen:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});
```

Dasselbe Silencing-Problem gilt hier: Weil Aftersell den Klick stoppt, sehen deine Analytics und Pixel auch Cart-Icon-Klicks nicht. Wenn du nur das reparieren musst, behalte den Drawer und stoppe das Silencing:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_open_cart_interceptor: true });
```

Deine Listener laufen, der Drawer öffnet sich weiterhin, und der Klick navigiert weiterhin nicht zu `/cart`. Vollständige Details in [Configure](/de/aftersell/cart/sdk-configure#skip_open_cart_interceptor).

<Note>
  Um zu ändern, *welche* Elemente den Warenkorb öffnen, statt sie auszuschalten, verwende **Cart settings → Advanced → Cart icon selector** statt dein Theme zu bearbeiten.
</Note>

## Nächste Schritte

* **[Configure](/de/aftersell/cart/sdk-configure)**: jede SDK-Option, einschließlich der hier erwähnten.
* **[Hooks](/de/aftersell/cart/sdk-hooks)**: Kontrolle pro Formular und pro Zeile.
* **[Den Drawer aus einem Page Builder öffnen](/de/aftersell/cart/sdk-use-case-page-builder)**: für Replo, PageFly, GemPages und eigene Buttons, die den Warenkorb auf ihre eigene Weise befüllen.