Actions

Actions lezen en wijzigen de winkelwagen. Ze staan onder window.aftersell.cart.actions.

Actions draaien nadat de winkelwagen klaar is, binnen ready() of een event-handler.

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

Voordat de winkelwagen laadt, zijn actions stubs. Elke stub logt een consolewaarschuwing met de naam van de action, bijvoorbeeld cart.actions.addItem() called before the cart loaded, en doet niets. De asynchrone actions resolven nog steeds een Promise, dus een .then()-keten draait normaal in plaats van een fout te gooien; getCart() geeft null terug en formatMoney() een lege string.Er breekt niets als je er een te vroeg aanroept, maar er gebeurt ook niets. Houd de console in de gaten voor die waarschuwing wanneer een action niets lijkt te doen.

Alle actions

Action	Signatuur	Geeft terug	Wat het doet
`open`	`open()`	Niets	Opent de drawer.
`close`	`close()`	Niets	Sluit de drawer.
`getCart`	`getCart()`	`AftersellCart \| null`	Leest de huidige winkelwagen.
`formatMoney`	`formatMoney(cents)`	`string`	Formatteert een bedrag voor weergave.
`addItem`	`addItem(variantId, quantity?)`	`Promise`	Voegt een variant toe.
`removeItem`	`removeItem(key)`	`Promise`	Verwijdert een regel.
`updateItemQuantity`	`updateItemQuantity(key, quantity)`	`Promise`	Stelt het aantal van een regel in.
`replaceLineVariant`	`replaceLineVariant(key, variantId)`	`Promise`	Wisselt de variant van een regel.
`refresh`	`refresh()`	`Promise`	Haalt de winkelwagen opnieuw op bij Shopify.
`visualRefresh`	`visualRefresh()`	Niets	Tekent opnieuw zonder opnieuw op te halen.

Een action aanroepen vanuit een cart_updated-handler kan een loop veroorzaken. Lees eerst de twee regels.

Drawer

open en close

Open of sluit de cart drawer. Beide zijn synchroon en hebben geen argumenten.

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

Lezen

getCart()

Geeft het huidige cart-object terug, of null voordat het geladen is. Het resultaat is een kopie, dus muteren ervan verandert de echte winkelwagen niet.

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

Omdat het een snapshot is, moet je het resultaat niet vasthouden; lees het opnieuw telkens wanneer je actuele data nodig hebt. In een event-handler heb je de verse winkelwagen al als payload, dus getCart() is daar overbodig.

formatMoney(cents)

Formatteert een bedrag in de kleinste munteenheid volgens het geldformaat van je winkel. Elke prijs in de SDK is in centen, dus zo maak je er iets van dat je kunt weergeven.

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

Overschrijf het formaat met configure({ money_format }).

De winkelwagen wijzigen

De item-actions identificeren een regel via de Shopify-key, niet via variant-ID, omdat een winkelwagen dezelfde variant op meerdere regels met verschillende properties kan bevatten. Lees hem uit getCart().items[n].key.

addItem(variantId, quantity?)

Voegt een variant toe aan de winkelwagen. quantity is standaard 1. Resolvet zodra de winkelwagen tot rust is gekomen.

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

Het toevoegen van een variant die al in de winkelwagen zit, verhoogt het aantal op die regel in plaats van een tweede regel aan te maken, zolang de bestaande regel geen line item properties heeft. Een regel met properties is een aparte regel, dus dan krijg je een nieuwe.

removeItem(key)

Verwijdert een regel volledig.

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

Stelt het aantal van een regel in. 0 doorgeven verwijdert de regel.

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

Dat tweede voorbeeld is veilig om vanuit cart_updated te draaien, omdat de > 1-check bij de tweede doorloop onwaar is. Zie de twee regels.

replaceLineVariant(key, variantId)

Wisselt de variant van een regel met behoud van het aantal en de properties. Handig voor een maat- of smaakwisselaar in de winkelwagen.

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

Het selling plan van de regel wordt gereset bij een wissel. Een abonnementsregel wordt een eenmalige aankoop tenzij je opnieuw een plan toepast.

De wissel is een toevoeging gevolgd door een verwijdering, geen bewerking op de plek zelf, dus het resultaat is een nieuwe regel: hij krijgt een nieuwe key en belandt aan het einde van de winkelwagen. Lees daarna getCart() opnieuw in plaats van de key te hergebruiken die je hebt doorgegeven.

Verversen

refresh()

Haalt de winkelwagen opnieuw op bij Shopify. Gebruik het nadat iets buiten de SDK de winkelwagen heeft gewijzigd en de drawer het niet heeft opgemerkt.

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

Meestal heb je dit niet nodig, aangezien Aftersell al luistert naar Shopify’s standaard cart-events en zelf opnieuw ophaalt. Grijp ernaar wanneer een aangepaste integratie daaraan voorbijgaat.

visualRefresh()

Draait de render-transforms opnieuw zonder de winkelwagen opnieuw bij Shopify op te halen. Je hebt het zelden nodig: het registreren (of deregistreren) van een line transform, comparator, enricher of een van beide subscription hooks triggert er al een voor je. Alleen de twee add-to-cart-hooks doen dat niet, aangezien die niets veranderen dat al op het scherm staat. Grijp ernaar wanneer iets waar een transform van afhangt verandert, maar de winkelwagen zelf niet:

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

Opmerkingen en randgevallen

Asynchrone actions resolven wanneer de wijziging tot rust is gekomen. Door er een te awaiten kun je werk plannen nadat de winkelwagen daadwerkelijk is bijgewerkt.
getCart() geeft een kopie terug. Muteren ervan doet niets met de echte winkelwagen.
Er is geen action voor kortingscodes. Toegepaste codes zijn leesbaar op de winkelwagen (discountCodes, totalDiscount) en per regel (discountAllocations); shoppers passen ze toe via het Discount code-blok.
Er is geen action voor cart attributes of notities. Attributes zijn leesbaar op het cart-object; shoppers schrijven notities via het Notes-blok.
Om een regel te verbergen in plaats van te verwijderen, gebruik je registerLineTransform. Verwijderen verandert het totaal van de shopper; verbergen niet.

Waar nu naartoe

Cart-object: wat getCart() teruggeeft.
Events: wanneer je deze actions moet draaien.
Hooks: verander hoe een regel wordt gerenderd in plaats van de winkelwagen te wijzigen.
Use cases: complete oplossingen voor veelvoorkomende verzoeken.

Aan de slag

Startpagina

Best practices

Post-purchase upsells

Winkelwagen

Checkout-upsells (Shopify Plus)

Bedankpagina

Upsells op de productpagina

Rokt Thanks

Strategieën

Analytics en tracking

Integraties

Aftersell MCP

Facturering en account

Probleemoplossing

Alle actions

Drawer

open en close

Lezen

getCart()

formatMoney(cents)

De winkelwagen wijzigen

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Verversen

refresh()

visualRefresh()

Opmerkingen en randgevallen

Waar nu naartoe

​Alle actions

​Drawer

​open en close

​Lezen

​getCart()

​formatMoney(cents)

​De winkelwagen wijzigen

​addItem(variantId, quantity?)

​removeItem(key)

​updateItemQuantity(key, quantity)

​replaceLineVariant(key, variantId)

​Verversen

​refresh()

​visualRefresh()

​Opmerkingen en randgevallen

​Waar nu naartoe

Alle actions

Drawer

open en close

Lezen

getCart()

formatMoney(cents)

De winkelwagen wijzigen

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Verversen

refresh()

visualRefresh()

Opmerkingen en randgevallen

Waar nu naartoe