Skip to main content
Niestandardowe skrypty pozwalają uruchamiać własny JavaScript na koszyku za pomocą Cart SDK. Dodaj je w edytorze koszyka w Cart settings → Custom script, gdzie lista rozwijana przełącza między dwoma slotami: Initialization i On cart update. W tych edytorach pisz czysty JavaScript, bez tagów <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

Skrypt Initialization uruchamia się raz, gdy koszyk się ładuje. To twój punkt wejścia do konfiguracji: ustawiania zachowania koszyka, subskrybowania zdarzeń i rejestrowania hooków. SDK jest dostępne jako 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():
Sięganie do DOM koszyka wymaga tego samego oczekiwania oraz shadowRoot: koszyk renderuje się wewnątrz shadow rootu, więc document.querySelector nie widzi niczego w szufladzie.
Rozgałęziasz logikę według rynku, kraju lub waluty zanim koszyk się załaduje? Odczytaj zamiast tego context. Jest dostępny synchronicznie, bez potrzeby ready(), więc możesz całkowicie pominąć rejestrowanie handlerów dla kupujących, których reguła nie dotyczy.

On cart update

Skrypt On cart update uruchamia się przy każdej zmianie koszyka. To zablokowany wrapper wokół subskrypcji 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

Linia 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

Każdy slot działa we własnej piaskownicy, więc zepsuty skrypt Initialization nie może zatrzymać działania On cart update, a żaden z nich nie może zepsuć samego koszyka. W obrębie slotu jednak wykonanie zatrzymuje się na pierwszym błędzie. Wszystko poniżej tej linii jest pomijane, co oznacza, że żadne 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).