Actions

Actions læser og ændrer kurven. De ligger under window.aftersell.cart.actions.

Actions kører, efter kurven er klar, inde i ready() eller en event-handler.

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

Før kurven indlæses, er actions stubbe. Hver enkelt logger en konsoladvarsel, der nævner actionen, for eksempel cart.actions.addItem() called before the cart loaded, og gør ingenting. De asynkrone actions resolver stadig et Promise, så en .then()-kæde kører normalt i stedet for at kaste en fejl; getCart() returnerer null, og formatMoney() returnerer en tom streng.Intet går i stykker, hvis du kalder en for tidligt, men der sker heller ikke noget. Hold øje med konsollen for den advarsel, når en action ser ud til ikke at gøre noget.

Alle actions

Action	Signatur	Returnerer	Hvad den gør
`open`	`open()`	Ingen	Åbner draweren.
`close`	`close()`	Ingen	Lukker draweren.
`getCart`	`getCart()`	`AftersellCart \| null`	Læser den aktuelle kurv.
`formatMoney`	`formatMoney(cents)`	`string`	Formaterer et beløb til visning.
`addItem`	`addItem(variantId, quantity?)`	`Promise`	Tilføjer en variant.
`removeItem`	`removeItem(key)`	`Promise`	Fjerner en linje.
`updateItemQuantity`	`updateItemQuantity(key, quantity)`	`Promise`	Sætter en linjes antal.
`replaceLineVariant`	`replaceLineVariant(key, variantId)`	`Promise`	Skifter en linjes variant.
`refresh`	`refresh()`	`Promise`	Genhenter kurven fra Shopify.
`visualRefresh`	`visualRefresh()`	Ingen	Gentegner uden at genhente.

At kalde en action fra en cart_updated-handler kan skabe en løkke. Læs de to regler først.

Drawer

open og close

Åbn eller luk cart draweren. Begge er synkrone og tager ingen argumenter.

// 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();

Læsning

getCart()

Returnerer det aktuelle cart-objekt, eller null før det er indlæst. Resultatet er en kopi, så at mutere det ændrer ikke den rigtige kurv.

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));
});

Fordi det er et øjebliksbillede, skal du ikke holde fast i resultatet; læs det igen, hver gang du har brug for aktuelle data. I en event handler har du allerede den friske kurv som payload, så getCart() er overflødig der.

formatMoney(cents)

Formaterer et beløb i mindste enhed ved hjælp af din butiks pengeformat. Alle priser i SDK’et er i cents, så det er sådan, du gør en af dem til noget, du kan vise.

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);
});

Tilsidesæt formatet med configure({ money_format }).

Ændring af kurven

Vare-actions identificerer en linje via dens Shopify-key, ikke via variant-ID, fordi en kurv kan indeholde den samme variant på flere linjer med forskellige properties. Læs den fra getCart().items[n].key.

addItem(variantId, quantity?)

Tilføjer en variant til kurven. quantity er som standard 1. Resolver, når kurven har stabiliseret sig.

// 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);

Tilføjelse af en variant, der allerede er i kurven, øger den linjes antal frem for at oprette en anden linje, så længe den eksisterende linje ikke har varelinje-properties. En linje med properties er en særskilt linje, så du får en ny.

removeItem(key)

Fjerner en linje helt.

// 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)

Sætter en linjes antal. Sendes 0, fjernes linjen.

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);
    }
  });
});

Det andet eksempel er sikkert at køre fra cart_updated, fordi > 1-tjekket er falsk ved anden gennemkørsel. Se de to regler.

replaceLineVariant(key, variantId)

Skifter en linjes variant, mens dens antal og properties bevares. Nyttig til en størrelses- eller smagsskifter inde i kurven.

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

Linjens selling plan nulstilles ved et skift. En abonnementslinje bliver et engangskøb, medmindre du genanvender en plan.

Skiftet er en tilføjelse efterfulgt af en fjernelse, ikke en redigering på stedet, så resultatet er en ny linje: den får en ny key og lander i slutningen af kurven. Genlæs getCart() bagefter i stedet for at genbruge den key, du sendte ind.

Genopfriskning

refresh()

Genhenter kurven fra Shopify. Brug den, efter at noget uden for SDK’et har ændret kurven, og draweren ikke opdagede det.

// 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(); });

Det meste af tiden har du ikke brug for denne, da Aftersell allerede lytter efter Shopifys standard-kurvevents og selv genhenter. Ræk ud efter den, når en brugerdefineret integration omgår dem.

visualRefresh()

Kører render-transformationerne igen uden at genhente kurven fra Shopify. Du har sjældent brug for den: registrering (eller afregistrering) af en line transform, comparator, enricher eller et af de to abonnements-hooks udløser én for dig. Kun de to add to cart-hooks gør det ikke, da de ikke ændrer noget, der allerede er på skærmen. Ræk ud efter den, når noget, en transformation afhænger af, ændres, men kurven selv ikke har:

// 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();
});

Noter og kanttilfælde

Asynkrone actions resolver, når ændringen har stabiliseret sig. At awaite en lader dig sekvensere arbejde, efter kurven faktisk er opdateret.
getCart() returnerer en kopi. At mutere den gør intet ved den rigtige kurv.
Der er ingen action til rabatkoder. Anvendte koder kan læses på kurven (discountCodes, totalDiscount) og pr. linje (discountAllocations); kunder anvender dem via Discount code-blokken.
Der er ingen action til kurvattributter eller noter. Attributter kan læses på cart-objektet; kunder skriver noter via Notes-blokken.
For at skjule en linje i stedet for at fjerne den skal du bruge registerLineTransform. Fjernelse ændrer kundens total; skjulning gør ikke.

Hvor skal du hen nu

Cart-objekt: hvad getCart() giver tilbage.
Events: hvornår du skal køre disse actions.
Hooks: ændr, hvordan en linje renderes, i stedet for at ændre kurven.
Use cases: komplette løsninger på almindelige ønsker.

Kom godt i gang

Startside

Bedste praksis

Mersalg efter køb

Kurv

Mersalg ved checkout (Shopify Plus)

Takkeside

Mersalg på produktsiden

Rokt Thanks

Strategier

Analyser og sporing

Integrationer

Aftersell MCP

Fakturering og konto

Fejlfinding

Alle actions

Drawer

open og close

Læsning

getCart()

formatMoney(cents)

Ændring af kurven

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Genopfriskning

refresh()

visualRefresh()

Noter og kanttilfælde

Hvor skal du hen nu

​Alle actions

​Drawer

​open og close

​Læsning

​getCart()

​formatMoney(cents)

​Ændring af kurven

​addItem(variantId, quantity?)

​removeItem(key)

​updateItemQuantity(key, quantity)

​replaceLineVariant(key, variantId)

​Genopfriskning

​refresh()

​visualRefresh()

​Noter og kanttilfælde

​Hvor skal du hen nu

Alle actions

Drawer

open og close

Læsning

getCart()

formatMoney(cents)

Ændring af kurven

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Genopfriskning

refresh()

visualRefresh()

Noter og kanttilfælde

Hvor skal du hen nu