> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Actions

> Elke Aftersell Cart SDK-action om de winkelwagen te lezen en te wijzigen: openen, sluiten, toevoegen, verwijderen, aantal bijwerken, een variant wisselen, de staat lezen en bedragen formatteren.

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

<Note>
  Actions draaien **nadat de winkelwagen klaar is**, binnen `ready()` of een [event](/nl/aftersell/cart/sdk-events)-handler.
</Note>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  console.log(state.itemCount, 'items');
});
```

<Note>
  **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.
</Note>

<div id="every-action">
  ## Alle actions
</div>

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

<Warning>
  Een action aanroepen vanuit een `cart_updated`-handler kan een loop veroorzaken. Lees eerst [de twee regels](/nl/aftersell/cart/sdk-events#the-two-rules).
</Warning>

***

<div id="drawer">
  ## Drawer
</div>

<div id="open-and-close">
  ### open en close
</div>

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

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Open the drawer from your own cart link.
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});
```

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Close it after the shopper does something in a custom block.
window.aftersell.cart.actions.close();
```

***

<div id="reading">
  ## Lezen
</div>

<div id="getcart">
  ### getCart()
</div>

Geeft het huidige [cart-object](/nl/aftersell/cart/sdk-cart-object) terug, of `null` voordat het geladen is. Het resultaat is een **kopie**, dus muteren ervan verandert de echte winkelwagen niet.

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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.

<div id="formatmoneycents">
  ### formatMoney(cents)
</div>

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.

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.formatMoney(5779);  // "$57.79"
window.aftersell.cart.actions.formatMoney(0);     // "$0.00"
```

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// 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 })`](/nl/aftersell/cart/sdk-configure#money_format).

***

<div id="changing-the-cart">
  ## De winkelwagen wijzigen
</div>

<Note>
  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`.
</Note>

<div id="additemvariantid-quantity">
  ### addItem(variantId, quantity?)
</div>

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

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Add one, then show the shopper.
window.aftersell.cart.actions.addItem(41720671830082).then(() => {
  window.aftersell.cart.actions.open();
});
```

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// 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.

<div id="removeitemkey">
  ### removeItem(key)
</div>

Verwijdert een regel volledig.

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// 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);
```

<div id="updateitemquantitykey-quantity">
  ### updateItemQuantity(key, quantity)
</div>

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

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const line = window.aftersell.cart.actions.getCart().items[0];
if (line) window.aftersell.cart.actions.updateItemQuantity(line.key, 3);
```

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// 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](/nl/aftersell/cart/sdk-events#the-two-rules).

<div id="replacelinevariantkey-variantid">
  ### replaceLineVariant(key, variantId)
</div>

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

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const line = window.aftersell.cart.actions.getCart().items[0];
window.aftersell.cart.actions.replaceLineVariant(line.key, 41720671862850);
```

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

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.

***

<div id="refreshing">
  ## Verversen
</div>

<div id="refresh">
  ### refresh()
</div>

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.

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// 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.

<div id="visualrefresh">
  ### visualRefresh()
</div>

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](/nl/aftersell/cart/sdk-hooks#registerlinetransform), [comparator](/nl/aftersell/cart/sdk-hooks#registerlinecomparator), [enricher](/nl/aftersell/cart/sdk-hooks#registercartenricher) of een van beide [subscription hooks](/nl/aftersell/cart/sdk-hooks#registersubscriptionoptionstransform) 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:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// 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();
});
```

***

<div id="notes-and-edge-cases">
  ## Opmerkingen en randgevallen
</div>

* **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](/nl/aftersell/cart/discount-code-block)-blok.
* **Er is geen action voor cart attributes of notities.** Attributes zijn leesbaar op het cart-object; shoppers schrijven notities via het [Notes](/nl/aftersell/cart/notes-block)-blok.
* **Om een regel te verbergen in plaats van te verwijderen**, gebruik je [`registerLineTransform`](/nl/aftersell/cart/sdk-hooks#registerlinetransform). Verwijderen verandert het totaal van de shopper; verbergen niet.

<div id="where-to-go-next">
  ## Waar nu naartoe
</div>

* **[Cart-object](/nl/aftersell/cart/sdk-cart-object)**: wat `getCart()` teruggeeft.
* **[Events](/nl/aftersell/cart/sdk-events)**: wanneer je deze actions moet draaien.
* **[Hooks](/nl/aftersell/cart/sdk-hooks)**: verander hoe een regel wordt gerenderd in plaats van de winkelwagen te wijzigen.
* **[Use cases](/nl/aftersell/cart/sdk-use-cases)**: complete oplossingen voor veelvoorkomende verzoeken.