<script>. On cart update ma akcję Reset to default, która przywraca jego szablon startowy; Initialization nie ma, więc zachowaj własną kopię, zanim go wyczyścisz.
Wiele z tego, co sprzedawcy kiedyś skryptowali, jest teraz wbudowanym ustawieniem. Najpierw sprawdź Zanim napiszesz skrypt: ustawienie działa dalej po przeprojektowaniach koszyka, a twój skrypt może nie.
Którego slotu użyć
Initialization
window.aftersell.cart.
Wywołania konfiguracyjne, które tu wykonujesz (configure(...), events.on(...), hooks.*), można bezpiecznie wywoływać na początku skryptu, nawet zanim koszyk w pełni się uruchomi; są buforowane i stosowane, gdy to nastąpi. Akcje, które odczytują lub zmieniają koszyk (jak addItem czy getCart), powinny działać wewnątrz ready() lub handlera zdarzenia.
Slot zaczyna z trzema zakomentowanymi przykładami — otwieraniem szuflady przy każdym dodaniu, reagowaniem na cart_loaded i ukrywaniem linii darmowych prezentów — więc nietknięty skrypt Initialization nic nie robi. Odkomentuj jeden, aby go wypróbować, albo je zastąp.
Naturalny kształt tego slotu to jednorazowa rejestracja bez udziału zdarzeń: zarejestruj zachowanie raz i pozwól koszykowi stosować je od tej pory. Ukrywanie linii darmowych prezentów w szufladzie, bez zmiany sumy, to dostarczony przykład tego podejścia:
registerLineTransform uruchamia się dla każdej linii podczas jej renderowania, a setHidden dotyczy tylko wyświetlania, więc linia pozostaje w koszyku i nadal liczy się do sumy — po prostu nie pokazuje się w szufladzie. Zobacz Ukrywanie i zmiana etykiet linii koszyka, aby poznać więcej możliwości transformacji.
Akcje odczytujące koszyk umieszczaj wewnątrz ready():
shadowRoot: koszyk renderuje się wewnątrz shadow rootu, więc document.querySelector nie widzi niczego w szufladzie.
On cart update
cart_updated, więc edytujesz tylko treść, a twój kod otrzymuje zaktualizowany cart.
Ten slot służy do reguł, które muszą być ponownie oceniane przy każdej zmianie koszyka. Próg darmowego prezentu to klasyczny przypadek (wydaj $75, odbierz darmową torbę), ponieważ odpowiedź zależy od bieżącej zawartości i nic innego nie powie ci, kiedy się zmienia:
Utrzymywanie koszyka w pożądanym stanie
if (shouldHaveGift === hasGift) return; czyni ten skrypt bezpiecznym i uogólnia się na każdy skrypt utrzymujący koszyk w pożądanym stanie. Ten slot zarówno reaguje na zmiany koszyka, jak i je powoduje, więc każde addItem lub removeItem ponownie do niego wchodzi. Opisz stan, którego chcesz, porównaj go ze stanem, który masz, i wyjdź wcześnie, gdy już się zgadzają — dzięki temu handler zbiega się po jednym przebiegu zamiast zapętlać. Zobacz dwie zasady, aby poznać wersję bez zabezpieczenia, której należy unikać, oraz dlaczego payload jest tylko do odczytu.
W wolniejszym sklepie warto też trzymać flagę „w toku” na poziomie modułu, aby dwie szybkie zmiany nie mogły obie rozpocząć dodawania, zanim pierwsze się zakończy.
cart_updated odpala się tylko przy zmianach po pierwszym załadowaniu (czasowanie zdarzeń), więc skrypt w tym slocie nie uzgodni koszyka, który już kwalifikuje się w momencie załadowania strony. Aby obsłużyć oba przypadki, zasubskrybuj cart_loaded i cart_updated tą samą funkcją ze slotu Initialization. Zobacz Automatyczne dodawanie darmowego prezentu przy progu.Gdy skrypt się psuje
configure, events.on czy hooks.register* dalej w kodzie nigdy nie zostanie zarejestrowane. To typowe wyjaśnienie sytuacji „mój handler nigdy się nie odpala”, gdy kod wygląda poprawnie.
Koszyk wskazuje błędną linię w konsoli przeglądarki, a każdy slot działa pod własną nazwą pliku (aftersell-cart-init.js i aftersell-cart-cart-update.js), więc możesz otworzyć dowolny z nich w panelu Sources w DevTools i ustawić breakpointy. Zobacz Debugowanie, aby poznać dokładne komunikaty oraz kanał debugowania, który wychwytuje błędy hooków nietrafiające do konsoli.
Ponieważ cart_loaded odtwarza się dla spóźnionych subskrybentów, kolejność rejestracji nigdy nie ma znaczenia. Najbezpieczniejsza struktura to zarejestrować wszystko najpierw i wykonywać ryzykowną pracę wewnątrz handlerów, gdzie wyjątek jest izolowany do tego handlera.
Co dalej
- Cart SDK: niestandardowe skrypty to sposób uruchamiania kodu SDK. Zobacz referencje configure, events, actions i hooks, aby poznać pełną powierzchnię, obiekt koszyka dla kształtu danych otrzymywanych przez handlery oraz przypadki użycia z gotowymi fragmentami kodu.
- Bloki Custom code: do dodawania struktury do koszyka. Pamiętaj, że tryb HTML bloku Custom code nie uruchamia JavaScriptu; do logiki używaj niestandardowych skryptów (lub trybu React tego bloku).