Akcje

Akcje odczytują i zmieniają koszyk. Znajdują się pod window.aftersell.cart.actions.

Akcje uruchamiaj po tym, jak koszyk jest gotowy — wewnątrz ready() lub handlera zdarzenia.

window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  console.log(state.itemCount, 'items');
});

Zanim koszyk się załaduje, akcje są atrapami (stubs). Każda z nich loguje w konsoli ostrzeżenie z nazwą akcji, na przykład cart.actions.addItem() called before the cart loaded, i nic nie robi. Akcje asynchroniczne nadal zwracają rozwiązany Promise, więc łańcuch .then() działa normalnie, zamiast rzucać wyjątek; getCart() zwraca null, a formatMoney() zwraca pusty string.Nic się nie psuje, jeśli wywołasz którąś za wcześnie, ale też nic się nie dzieje. Obserwuj konsolę pod kątem tego ostrzeżenia, gdy akcja wydaje się nic nie robić.

Wszystkie akcje

Akcja	Sygnatura	Zwraca	Co robi
`open`	`open()`	Brak	Otwiera drawer.
`close`	`close()`	Brak	Zamyka drawer.
`getCart`	`getCart()`	`AftersellCart \| null`	Odczytuje bieżący koszyk.
`formatMoney`	`formatMoney(cents)`	`string`	Formatuje kwotę do wyświetlenia.
`addItem`	`addItem(variantId, quantity?)`	`Promise`	Dodaje wariant.
`removeItem`	`removeItem(key)`	`Promise`	Usuwa pozycję.
`updateItemQuantity`	`updateItemQuantity(key, quantity)`	`Promise`	Ustawia ilość pozycji.
`replaceLineVariant`	`replaceLineVariant(key, variantId)`	`Promise`	Zamienia wariant pozycji.
`refresh`	`refresh()`	`Promise`	Ponownie pobiera koszyk z Shopify.
`visualRefresh`	`visualRefresh()`	Brak	Odświeża widok bez ponownego pobierania.

Wywołanie akcji z handlera cart_updated może spowodować pętlę. Najpierw przeczytaj dwie zasady.

Drawer

open i close

Otwierają lub zamykają cart drawer. Obie są synchroniczne i nie przyjmują argumentów.

// Open the drawer from your own cart link.
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});

// Close it after the shopper does something in a custom block.
window.aftersell.cart.actions.close();

Odczyt

getCart()

Zwraca bieżący obiekt koszyka lub null, zanim się załaduje. Wynik jest kopią, więc jego modyfikacja nie zmieni prawdziwego koszyka.

window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  if (!state) return; // the initial load failed

  console.log(state.itemCount, 'items,', state.items.length, 'lines');
  console.log('Total:', window.aftersell.cart.actions.formatMoney(state.totalPrice));
});

Ponieważ to migawka, nie przechowuj wyniku; odczytuj go ponownie za każdym razem, gdy potrzebujesz aktualnych danych. W handlerze zdarzenia masz już świeży koszyk jako payload, więc getCart() jest tam zbędne.

formatMoney(cents)

Formatuje kwotę w jednostkach mniejszych (centach) według formatu walutowego Twojego sklepu. Każda cena w SDK jest w centach, więc w ten sposób zamieniasz ją na coś, co możesz wyświetlić.

window.aftersell.cart.actions.formatMoney(5779);  // "$57.79"
window.aftersell.cart.actions.formatMoney(0);     // "$0.00"

// Show the cart total in your own header element.
window.aftersell.cart.events.on('cart_updated', (state) => {
  document.querySelector('#header-total').textContent =
    window.aftersell.cart.actions.formatMoney(state.totalPrice);
});

Nadpisz format za pomocą configure({ money_format }).

Zmienianie koszyka

Akcje na pozycjach identyfikują pozycję po jej Shopify key, a nie po ID wariantu, ponieważ koszyk może zawierać ten sam wariant w kilku pozycjach z różnymi właściwościami. Odczytaj go z getCart().items[n].key.

addItem(variantId, quantity?)

Dodaje wariant do koszyka. quantity domyślnie wynosi 1. Rozwiązuje się, gdy koszyk się ustabilizuje.

// Add one, then show the shopper.
window.aftersell.cart.actions.addItem(41720671830082).then(() => {
  window.aftersell.cart.actions.open();
});

// Add a specific quantity.
window.aftersell.cart.actions.addItem(41720671830082, 3);

Dodanie wariantu, który już jest w koszyku, zwiększa ilość tej pozycji, zamiast tworzyć drugą pozycję — o ile istniejąca pozycja nie ma właściwości pozycji (line item properties). Pozycja z właściwościami to odrębna pozycja, więc powstaje nowa.

removeItem(key)

Całkowicie usuwa pozycję.

// Remove any free line from the cart.
const gift = window.aftersell.cart.actions
  .getCart()
  .items.find((line) => line.finalLinePrice === 0);
if (gift) window.aftersell.cart.actions.removeItem(gift.key);

updateItemQuantity(key, quantity)

Ustawia ilość pozycji. Przekazanie 0 usuwa pozycję.

const line = window.aftersell.cart.actions.getCart().items[0];
if (line) window.aftersell.cart.actions.updateItemQuantity(line.key, 3);

// Cap a line at one unit.
window.aftersell.cart.events.on('cart_updated', (state) => {
  state.items.forEach((line) => {
    if (line.variantId === LIMITED_VARIANT_ID && line.quantity > 1) {
      window.aftersell.cart.actions.updateItemQuantity(line.key, 1);
    }
  });
});

Ten drugi przykład można bezpiecznie uruchamiać z cart_updated, ponieważ warunek > 1 jest fałszywy przy drugim przebiegu. Zobacz dwie zasady.

replaceLineVariant(key, variantId)

Zamienia wariant pozycji, zachowując jej ilość i właściwości. Przydatne dla przełącznika rozmiaru lub smaku wewnątrz koszyka.

const line = window.aftersell.cart.actions.getCart().items[0];
window.aftersell.cart.actions.replaceLineVariant(line.key, 41720671862850);

Przy zamianie plan sprzedaży pozycji jest resetowany. Pozycja subskrypcyjna staje się zakupem jednorazowym, chyba że ponownie zastosujesz plan.

Zamiana to dodanie, po którym następuje usunięcie, a nie edycja w miejscu, więc wynikiem jest nowa pozycja: dostaje nowy key i ląduje na końcu koszyka. Odczytaj ponownie getCart() po zamianie, zamiast ponownie używać przekazanego klucza.

Odświeżanie

refresh()

Ponownie pobiera koszyk z Shopify. Użyj tego, gdy coś spoza SDK zmieniło koszyk, a drawer tego nie zauważył.

// After a raw Ajax API call of your own.
fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });

Przez większość czasu tego nie potrzebujesz, ponieważ Aftersell już nasłuchuje standardowych zdarzeń koszyka Shopify i sam pobiera dane. Sięgnij po to, gdy niestandardowa integracja je omija.

visualRefresh()

Ponownie uruchamia transformacje renderowania bez ponownego pobierania koszyka z Shopify. Rzadko go potrzebujesz: zarejestrowanie (lub wyrejestrowanie) transformacji pozycji, komparatora, wzbogacacza lub któregokolwiek z hooków subskrypcji wywołuje go za Ciebie. Tylko dwa hooki add-to-cart tego nie robią, ponieważ nie zmieniają niczego, co jest już na ekranie. Sięgnij po niego, gdy zmienia się coś, od czego transformacja zależy, ale sam koszyk nie:

// A currency switcher changed the format: repaint prices already on screen.
window.myTheme.onCurrencyChange((currency) => {
  window.aftersell.cart.configure({ money_format: FORMATS[currency] });
  window.aftersell.cart.actions.visualRefresh();
});

Uwagi i przypadki brzegowe

Akcje asynchroniczne rozwiązują się, gdy zmiana się ustabilizuje. Oczekiwanie na jedną z nich pozwala sekwencjonować pracę po faktycznej aktualizacji koszyka.
getCart() zwraca kopię. Jej modyfikacja nie robi nic z prawdziwym koszykiem.
Nie ma akcji dla kodów rabatowych. Zastosowane kody można odczytać na koszyku (discountCodes, totalDiscount) i per pozycję (discountAllocations); klienci stosują je przez blok Discount code.
Nie ma akcji dla atrybutów koszyka ani notatek. Atrybuty można odczytać na obiekcie koszyka; klienci zapisują notatki przez blok Notes.
Aby ukryć pozycję zamiast ją usuwać, użyj registerLineTransform. Usunięcie zmienia sumę klienta; ukrycie nie.

Co dalej

Obiekt koszyka: co zwraca getCart().
Zdarzenia: kiedy uruchamiać te akcje.
Hooki: zmieniaj sposób renderowania pozycji zamiast zmieniać koszyk.
Przypadki użycia: kompletne rozwiązania typowych potrzeb.

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

Wszystkie akcje

Drawer

open i close

Odczyt

getCart()

formatMoney(cents)

Zmienianie koszyka

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Odświeżanie

refresh()

visualRefresh()

Uwagi i przypadki brzegowe

Co dalej

​Wszystkie akcje

​Drawer

​open i close

​Odczyt

​getCart()

​formatMoney(cents)

​Zmienianie koszyka

​addItem(variantId, quantity?)

​removeItem(key)

​updateItemQuantity(key, quantity)

​replaceLineVariant(key, variantId)

​Odświeżanie

​refresh()

​visualRefresh()

​Uwagi i przypadki brzegowe

​Co dalej

Wszystkie akcje

Drawer

open i close

Odczyt

getCart()

formatMoney(cents)

Zmienianie koszyka

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Odświeżanie

refresh()

visualRefresh()

Uwagi i przypadki brzegowe

Co dalej