Przechwytywanie add-to-cart

Gdy kupujący klika Dodaj do koszyka, to zwykle Aftersell obsługuje dodanie sam, zamiast pozwolić na to motywowi. Ta strona wyjaśnia dlaczego, co to oznacza dla dodanych przez Ciebie skryptów, i jak wyłączyć to dla jednego formularza lub dla wszystkich. Większość sklepów nigdy nie musi tu niczego zmieniać. Czytaj dalej, jeśli któryś z Twoich skryptów przestał odpalać się przy add-to-cart lub przycisk dodawania zachowuje się dziwnie.

Co robi przechwytywanie

Aftersell nasłuchuje submitu add-to-cart wcześniej niż motyw. Gdy go rozpozna:

Zatrzymuje zdarzenie, żeby nic innego na stronie nie obsłużyło tego kliknięcia.
Sam wysyła dodanie do Shopify.
Otwiera drawer koszyka Aftersell.

Krok 1 jest najważniejszy i to właśnie z jego powodu istnieje ta strona.

Dlaczego to istnieje

Bez tego oba koszyki reagują na to samo kliknięcie. Motyw dodaje produkt i otwiera swój drawer, Aftersell dodaje go i otwiera nasz, a kupujący widzi dwa koszyki, często z produktem dodanym dwukrotnie. Zatrzymanie zdarzenia to najprostszy sposób, aby zagwarantować jedno dodanie i jeden koszyk.

Co to kosztuje

Zatrzymanie zdarzenia zatrzymuje je dla wszystkich, nie tylko dla motywu. Każdy inny kod nasłuchujący tego samego add-to-cart przestaje działać: Twoje analityki, piksel śledzący, aplikacja subskrypcyjna lub zestawów, skrypt dodany przez Ciebie samodzielnie. Zawodzi po cichu. W konsoli przeglądarki nic się nie pojawia, a samo dodanie nadal działa, więc typowym objawem jest raczej niepoprawna liczba niż coś widocznie zepsutego:

Brak zdarzeń add_to_cart w GA4, Meta lub TikTok
Aplikacja subskrypcyjna lub zestawów, która działa na stronie produktu, ale nie z poziomu koszyka
Twój własny addEventListener na formularzu nigdy się nie odpala

Jeśli coś z tego brzmi znajomo, to właśnie stąd bierze się problem, a rozwiązanie jest poniżej.

Kiedy Aftersell nie przechwytuje

Przechwytywanie nie zawsze jest włączone. Aftersell zostawia add-to-cart w spokoju, gdy:

Rozpoznaje koszyk Twojego motywu. Na motywach, z którymi Aftersell wie, jak współpracować, zamiast blokować zdarzenie, sprawia, że własny koszyk motywu staje się bezczynny, a następnie pozwala motywowi wykonać dodanie normalnie. Twoje skrypty działają tak jak zawsze. Zobacz Które motywy poniżej.
Formularz nie dodaje pozycji. Formularz bez id wariantu i bez items[] jest zostawiony w spokoju.
Zrezygnowałeś z tego jedną z poniższych metod.

Gdy Aftersell nie wykonuje dodania, i tak nadal śledzi żądanie koszyka i otwiera drawer, gdy je zobaczy. Zobacz Zanim wybierzesz: co się zmienia.

Które motywy Aftersell rozpoznaje

Motyw
Dawn i reszta darmowej rodziny Shopify	Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste
Horizon	Aktualny domyślny motyw Shopify
Impulse

Aftersell dopasowuje na podstawie tego, jak motyw jest zbudowany, nie po jego nazwie, więc niestandardowy motyw sforkowany z któregoś z powyższych jest zwykle również rozpoznawany, w tym prywatne buildy, których Aftersell nigdy nie widział.

Zdarza się też odwrotnie: mocno zmodyfikowany build może odejść od swojego rodzica na tyle, że Aftersell przestaje go rozpoznawać, mimo że motyw dalej nazywa się „Dawn”. Bycie na tej liście czyni rozpoznanie prawdopodobnym, ale nie pewnym.

Twoje opcje

Wybierz najwęższą, która rozwiązuje Twój problem. Każdy kolejny wiersz oddaje więcej niż poprzedni.

Opcja	Zakres	Aftersell nadal otwiera drawer
`registerSkipAddToCartRule`	Formularze, które wskaże Twoja reguła	Tak, z żądania koszyka
`aftersell-cart-skip-atc`	Jeden formularz lub przycisk	Tak, z żądania koszyka
`skip_add_to_cart_interceptor`	Każdy formularz w sklepie	Tak, z żądania koszyka

Zanim wybierzesz: co się zmienia

Rezygnacja z przechwytywania oddaje dodanie z powrotem Twojemu motywowi, co rodzi dwa pytania, na które warto odpowiedzieć przed wyborem wiersza: czy Twój koszyk nadal się otworzy i czy koszyk motywu pojawi się obok niego.

Czy Twój koszyk nadal się otworzy?

Zwykle tak, bez pracy z Twojej strony. Kto by nie wykonywał dodania, Aftersell śledzi żądanie idące do Shopify i otwiera drawer, gdy je zobaczy, zgodnie z Twoim zwykłym ustawieniem Open cart when an item is added. Nie musisz nic sam wywoływać. Trzy sytuacje to psują, i wszystkie trzy mają rozwiązanie: Dodanie idzie gdzie indziej niż na endpointy koszyka Shopify. Aftersell śledzi /cart/add, /cart/change, /cart/update i /cart/clear na Twojej własnej domenie. Aplikacja, która dodaje przez własny endpoint i następnie synchronizuje koszyk, nie jest dla tego widoczna. Otwórz koszyk sam, gdy dodanie tej aplikacji się zakończy:

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

Między kliknięciem a żądaniem mija więcej niż mniej więcej trzy sekundy. Aftersell traktuje dodanie, które ściśle podąża za prawdziwym kliknięciem lub naciśnięciem klawisza, jako inicjowane przez kupującego. Poza tym oknem jest ono uznawane za dodanie w tle, które nie otwiera drawera, chyba że włączysz taką opcję:

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

Twoje ustawienie koszyka mówi, że nie. Jeśli Open cart when an item is added jest wyłączone lub ustawiłeś open_on_add_to_cart: 'never', nic nie otworzy drawera. To działa zgodnie z konfiguracją.

Czy otworzy się też koszyk motywu?

To ryzyko, jakie niosą rezygnacje, a odpowiedź zależy od Twojego motywu. Uczynienie koszyka motywu bezczynnym jest oddzielone od przechwytywania i dzieje się przy ładowaniu strony w obu przypadkach, więc żadna z tutejszych rezygnacji nie włącza go z powrotem. Na motywie z listy rozpoznawanych własny koszyk motywu pozostaje cichy i kupujący widzi jeden koszyk, Twój. Na motywie, którego Aftersell nie rozpoznaje, nic nie powstrzymuje koszyka motywu. Rezygnacja oznacza, że motyw obsługuje dodanie dokładnie tak, jak zawsze to robił, wraz z otwarciem własnego drawera lub przekierowaniem do /cart, podczas gdy Aftersell otwiera swój drawer na podstawie żądania, które zobaczył. To dwa koszyki, i to jest powód, dla którego przechwytywanie w ogóle istnieje. Jeśli tak się dzieje, masz trzy możliwości: zostaw przechwytywanie włączone dla tego formularza, użyj węższej rezygnacji, która nie obejmuje formularzy powodujących problem, albo sam zatrzymaj koszyk motywu w kodzie swojego motywu.

Włącz rezygnację najpierw w motywie testowym lub nieopublikowanym. Jeśli własny koszyk motywu pojawia się tam, gdzie wcześniej się nie pojawiał, Twój motyw nie należy do tych, które Aftersell rozpoznaje, i lepiej zostawić przechwytywanie włączone dla tych formularzy.

Dotyczy to wyłącznie add-to-cart. Sprawienie, aby ikona koszyka omijała Aftersell za pomocą klasy aftersell-cart-wont-open-cart, to co innego: kliknięcie ikony koszyka nie wysyła żadnego żądania, więc Aftersell nie ma czego śledzić, a drawer się nie otworzy. Zobacz niżej.

Per formularz: reguła w kodzie

Preferowana opcja. Zarejestruj regułę zwracającą true dla formularzy, które chcesz zostawić w spokoju:

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

Umieść to w Cart settings → Custom script → Initialization. Reguły są addytywne: Twoja działa obok pozostałych, a każda reguła zwracająca true pomija dany formularz. Pełne szczegóły w Hookach.

Per formularz: klasa w Twoim motywie

Jeśli wolisz nie pisać reguły, dodaj klasę aftersell-cart-skip-atc w swoim motywie:

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

Przy submitcie formularza klasa musi być na samym elemencie form. Nadrzędny div nie zadziała. Dla przycisku, który dodaje do koszyka bez submitu formularza, klasa może być na przycisku lub na dowolnym elemencie wokół niego.

Cały sklep: wyłącz przechwytywanie

Opcja tępa. Add-to-cart zachowuje się dokładnie tak, jak pierwotnie w motywie, w każdym formularzu:

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

Ta opcja jest odczytywana raz, przy załadowaniu koszyka. Działa tylko ze skryptu Initialization Twojego koszyka. Ustawienie jej później, wewnątrz ready() lub z handlera zdarzenia, nic nie robi i zawodzi po cichu.

Sięgaj po to tylko wtedy, gdy opcje per formularz się nie sprawdzają, na przykład gdy formularze, które musisz zwolnić, są tworzone przez inną aplikację i nie da się ich wiarygodnie rozpoznać.

Ikona koszyka jest oddzielnym tematem

Ikoną koszyka w Twoim nagłówku zajmuje się własny interceptor, z własną rezygnacją. Wyłączenie przechwytywania add-to-cart nie zmienia tego, co robi ikona koszyka, i odwrotnie również. Kliknięcie ikony koszyka otwiera drawer Aftersell zamiast przechodzić do /cart. Aby zostawić jedną ikonę lub przycisk w spokoju, dodaj do niego klasę aftersell-cart-wont-open-cart lub do dowolnego elementu wokół niego:

<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>

Ten element robi wtedy to, co każe mu robić Twój motyw, zwykle przechodzi na stronę koszyka. Aftersell jest całkowicie poza obrazem, więc drawer się nie otworzy. W przeciwieństwie do add-to-cart nie ma żadnego żądania do śledzenia, więc jeśli chcesz, aby Twój koszyk otworzył się z tego elementu, musisz to powiedzieć wprost:

document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});

Ten sam problem wyciszania obowiązuje też tutaj: ponieważ Aftersell zatrzymuje kliknięcie, Twoje analityki i piksele również nie widzą kliknięć ikony koszyka. Jeśli tylko to musisz naprawić, zachowaj drawer i przestań wyciszać kliknięcie:

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

Twoi nasłuchujący działają, drawer nadal się otwiera, a kliknięcie nadal nie prowadzi do /cart. Pełne szczegóły w Konfiguracji.

Aby zmienić, które elementy otwierają koszyk, zamiast je wyłączać, użyj Cart settings → Advanced → Cart icon selector, a nie edytuj motywu.

Co dalej

Konfiguracja: każda opcja SDK, w tym te wymienione tutaj.
Hooki: kontrola per formularz i per pozycja.
Otwórz drawer z page buildera: dla Replo, PageFly, GemPages i niestandardowych przycisków, które dodają do koszyka po swojemu.

Pierwsze kroki

Strona główna

Najlepsze praktyki

Upselle po zakupie

Koszyk

Upselle przy realizacji zakupu (Shopify Plus)

Strona z podziękowaniem

Upselle na stronie produktu

Rokt Thanks

Strategie

Analityka i śledzenie

Integracje

Aftersell MCP

Rozliczenia i konto

Rozwiązywanie problemów

Co robi przechwytywanie

Dlaczego to istnieje

Co to kosztuje

Kiedy Aftersell nie przechwytuje

Które motywy Aftersell rozpoznaje

Twoje opcje

Zanim wybierzesz: co się zmienia

Czy Twój koszyk nadal się otworzy?

Czy otworzy się też koszyk motywu?

Per formularz: reguła w kodzie

Per formularz: klasa w Twoim motywie

Cały sklep: wyłącz przechwytywanie

Ikona koszyka jest oddzielnym tematem

Co dalej

​Co robi przechwytywanie

​Dlaczego to istnieje

​Co to kosztuje

​Kiedy Aftersell nie przechwytuje

​Które motywy Aftersell rozpoznaje

​Twoje opcje

​Zanim wybierzesz: co się zmienia

​Czy Twój koszyk nadal się otworzy?

​Czy otworzy się też koszyk motywu?

​Per formularz: reguła w kodzie

​Per formularz: klasa w Twoim motywie

​Cały sklep: wyłącz przechwytywanie

​Ikona koszyka jest oddzielnym tematem

​Co dalej

Co robi przechwytywanie

Dlaczego to istnieje

Co to kosztuje

Kiedy Aftersell nie przechwytuje

Które motywy Aftersell rozpoznaje

Twoje opcje

Zanim wybierzesz: co się zmienia

Czy Twój koszyk nadal się otworzy?

Czy otworzy się też koszyk motywu?

Per formularz: reguła w kodzie

Per formularz: klasa w Twoim motywie

Cały sklep: wyłącz przechwytywanie

Ikona koszyka jest oddzielnym tematem

Co dalej