Otwieraj szufladę z page buildera

Aftersell przechwytuje dodawanie do koszyka na standardowych formularzach produktowych Shopify. Buildery stron docelowych często dodają do koszyka po swojemu, używając wywołania JavaScript zamiast przesłania formularza, więc produkt ląduje w koszyku, ale szuflada pozostaje zamknięta, albo kupujący jest przekierowywany na /cart.

Rozwiązanie w jednej linii

Po zakończeniu dodawania do koszyka przez builder każ koszykowi ponownie pobrać dane i się otworzyć:

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

Dodaj to jako drugą akcję na przycisku, po własnym „add to cart” buildera, i wyłącz opcję buildera „go to cart” lub „redirect after add”.

Najpierw wypróbuj open_on_background_add, ponieważ często rozwiązuje to problem bez dotykania przycisku.

Najpierw opcja bez kodu

Aftersell wykrywa dodania, których samo nie obsłużyło, na dwa sposoby. Oba działają cały czas — są podłączane razem przy starcie i żaden nie tłumi drugiego, więc jedno dodanie może być zgłoszone przez oba — a każde zgłoszenie stosuje regułę otwierania niezależnie:

Na łączu. Aftersell obserwuje żądania do endpointów koszyka Shopify. Jeśli dodanie nastąpiło po prawdziwym kliknięciu lub naciśnięciu klawisza w ciągu około trzech sekund, liczy się jako inicjowane przez kupującego, a szuflada otwiera się zgodnie z Twoim zwykłym ustawieniem Open cart when an item is added. Każdy builder dodający przez Ajax cart API Shopify (/cart/add.js) trafia tutaj, co jest częstym przypadkiem — więc najpierw wypróbuj swój przycisk, może już działać bez żadnych zmian.
Standardowe zdarzenia koszyka Shopify. Dodanie zgłoszone w ten sposób jest zawsze traktowane jako dodanie w tle, niezależnie od tego, czy kupujący kliknął. Dodania w tle nie otwierają szuflady, chyba że się na to zdecydujesz:

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

Wklej to w Cart settings → Custom script → Initialization. Jeśli szuflada otwiera się teraz po przycisku dodawania Twojego buildera, to koniec — bez pracy per przycisk i z pokryciem każdej strony.

open_on_background_add obejmuje też dodania bez żadnego gestu kupującego — inną aplikację lub skrypt zapisujący do koszyka. Włącz to tylko wtedy, gdy chcesz, aby one również otwierały szufladę.

Jeśli żadna ze ścieżek nie otwiera szuflady, wróć do jawnego wywołania poniżej.

Konfiguracja per builder

Replo

Otwórz swoją stronę w edytorze Replo i zaznacz przycisk Add to Cart.
W prawym pasku bocznym otwórz zakładkę Interactions.
W sekcji On Click kliknij + i wybierz Run JavaScript.

Wklej:

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

Zaznacz ponownie interakcję Add Product to Cart i wyłącz Go to cart after?.
Zobacz podgląd, potwierdź, że szuflada się otwiera, a następnie opublikuj.

Powtórz na każdej stronie, która ma przycisk dodawania do koszyka.

PageFly i GemPages

Oba pozwalają podpiąć niestandardowy JavaScript do kliknięcia przycisku lub dodać element niestandardowego kodu na stronę. Użyj tego samego fragmentu, podpiętego tak, aby uruchamiał się po akcji dodania do koszyka buildera, i wyłącz każde ustawienie „redirect to cart” na przycisku.

Twój własny przycisk

Jeśli sam dodajesz do koszyka, pomiń podróż w obie strony i użyj własnej akcji SDK, która aktualizuje koszyk i może otworzyć szufladę w jednym kroku:

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

Używaj refresh() tylko wtedy, gdy coś innego zmieniło koszyk i potrzebujesz, aby Aftersell to nadrobił:

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

Gdy przycisk buildera powinien całkowicie omijać Aftersell

Czasem jest odwrotnie: formularz potrzebuje własnego przepływu, a przechwytywanie przez Aftersell przeszkadza. Wyłącz tylko ten formularz:

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

Następnie dodaj data-skip-aftersell do formularza. To lepsze niż skip_add_to_cart_interceptor, które wyłącza przechwytywanie dla każdego formularza na stronie. Jeszcze prościej, jeśli możesz edytować znaczniki formularza: dodaj klasę aftersell-cart-skip-atc do <form>, a Aftersell go pominie, bez żadnego skryptu.

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

Rozwiązywanie problemów

Objaw	Prawdopodobna przyczyna
Produkt dodany, szuflada pozostaje zamknięta	Builder nie emituje standardowych zdarzeń koszyka Shopify. Użyj jawnego wywołania `refresh()` + `open()`.
Kupujący jest przekierowywany na `/cart`	Opcja buildera „go to cart after add” jest nadal włączona. Wyłącz ją.
Szuflada otwiera się, ale pokazuje nieaktualną zawartość	`open()` uruchomiło się, zanim `refresh()` się rozwiązało. Połącz je łańcuchem `.then()`, jak wyżej.
Nic się nie dzieje	Akcje wywołane przed załadowaniem koszyka ostrzegają w konsoli i nic nie robią. Opakuj w `window.aftersell.cart.ready().then(…)`, jeśli przycisk może być kliknięty tak wcześnie.
Działa na jednej stronie, na innej nie	Większość builderów stosuje interakcje per strona. Powtórz konfigurację na każdej.

Sprawdź window.aftersellCartDebugEvents, jeśli wywołanie zdaje się nic nie robić, ponieważ błędy SDK są połykane, a nie rzucane.

Co dalej

Configure: open_on_background_add i inne opcje szuflady.
Actions: refresh, open i addItem.
Hooks: wyłączanie pojedynczego formularza.

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

Rozwiązanie w jednej linii

Najpierw opcja bez kodu

Konfiguracja per builder

Replo

PageFly i GemPages

Twój własny przycisk

Gdy przycisk buildera powinien całkowicie omijać Aftersell

Rozwiązywanie problemów

Co dalej

​Rozwiązanie w jednej linii

​Najpierw opcja bez kodu

​Konfiguracja per builder

​Replo

​PageFly i GemPages

​Twój własny przycisk

​Gdy przycisk buildera powinien całkowicie omijać Aftersell

​Rozwiązywanie problemów

​Co dalej

Rozwiązanie w jednej linii

Najpierw opcja bez kodu

Konfiguracja per builder

Replo

PageFly i GemPages

Twój własny przycisk

Gdy przycisk buildera powinien całkowicie omijać Aftersell

Rozwiązywanie problemów

Co dalej