Add-to-cart-Abfangen

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:

Stoppt das Event, sodass nichts anderes auf der Seite diesen Klick behandelt.
Sendet das Hinzufügen selbst an Shopify.
Ö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 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.

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.

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.

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`	Die Formulare, die deine Regel auswählt	Ja, aus der Warenkorb-Anfrage
`aftersell-cart-skip-atc`	Ein Formular oder Button	Ja, aus der Warenkorb-Anfrage
`skip_add_to_cart_interceptor`	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:

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:

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

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.

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.

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:

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.

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:

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

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.

Ganzer Shop: Abfangen ausschalten

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

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

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.

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:

<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:

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:

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.

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

Nächste Schritte

Configure: jede SDK-Option, einschließlich der hier erwähnten.
Hooks: Kontrolle pro Formular und pro Zeile.
Den Drawer aus einem Page Builder öffnen: für Replo, PageFly, GemPages und eigene Buttons, die den Warenkorb auf ihre eigene Weise befüllen.

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

Was das Abfangen tut

Warum es existiert

Was es kostet

Wann Aftersell nicht abfängt

Welche Themes Aftersell erkennt

Deine Optionen

Bevor du wählst: was sich ändert

Öffnet sich dein Warenkorb weiterhin?

Öffnet sich auch der Warenkorb des Themes?

Pro Formular: eine Regel in Code

Pro Formular: eine Klasse in deinem Theme

Ganzer Shop: Abfangen ausschalten

Das Cart-Icon ist separat

Nächste Schritte

​Was das Abfangen tut

​Warum es existiert

​Was es kostet

​Wann Aftersell nicht abfängt

​Welche Themes Aftersell erkennt

​Deine Optionen

​Bevor du wählst: was sich ändert

​Öffnet sich dein Warenkorb weiterhin?

​Öffnet sich auch der Warenkorb des Themes?

​Pro Formular: eine Regel in Code

​Pro Formular: eine Klasse in deinem Theme

​Ganzer Shop: Abfangen ausschalten

​Das Cart-Icon ist separat

​Nächste Schritte

Was das Abfangen tut

Warum es existiert

Was es kostet

Wann Aftersell nicht abfängt

Welche Themes Aftersell erkennt

Deine Optionen

Bevor du wählst: was sich ändert

Öffnet sich dein Warenkorb weiterhin?

Öffnet sich auch der Warenkorb des Themes?

Pro Formular: eine Regel in Code

Pro Formular: eine Klasse in deinem Theme

Ganzer Shop: Abfangen ausschalten

Das Cart-Icon ist separat

Nächste Schritte