> ## 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

> Toutes les actions du SDK du panier Aftersell pour lire et modifier le panier : ouvrir, fermer, ajouter, supprimer, mettre à jour la quantité, changer de variante, lire l'état et formater les montants.

Les actions **lisent et modifient le panier**. Elles se trouvent sous `window.aftersell.cart.actions`.

<Note>
  Les actions s'exécutent **après que le panier est prêt**, à l'intérieur de `ready()` ou d'un gestionnaire d'[événement](/fr/aftersell/cart/sdk-events).
</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>
  **Avant le chargement du panier, les actions sont des stubs.** Chacune émet un avertissement dans la console nommant l'action, par exemple `cart.actions.addItem() called before the cart loaded`, et ne fait rien. Les actions asynchrones résolvent quand même une Promise, donc une chaîne `.then()` s'exécute normalement au lieu de lever une exception ; `getCart()` renvoie `null` et `formatMoney()` renvoie une chaîne vide.

  Rien ne casse si vous en appelez une trop tôt, mais rien ne se passe non plus. Surveillez cet avertissement dans la console lorsqu'une action semble ne rien faire.
</Note>

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

| Action                                                   | Signature                            | Renvoie                 | Ce qu'elle fait                      |
| -------------------------------------------------------- | ------------------------------------ | ----------------------- | ------------------------------------ |
| [`open`](#open-and-close)                                | `open()`                             | Rien                    | Ouvre le tiroir.                     |
| [`close`](#open-and-close)                               | `close()`                            | Rien                    | Ferme le tiroir.                     |
| [`getCart`](#getcart)                                    | `getCart()`                          | `AftersellCart \| null` | Lit le panier actuel.                |
| [`formatMoney`](#formatmoneycents)                       | `formatMoney(cents)`                 | `string`                | Formate un montant pour l'affichage. |
| [`addItem`](#additemvariantid-quantity)                  | `addItem(variantId, quantity?)`      | `Promise`               | Ajoute une variante.                 |
| [`removeItem`](#removeitemkey)                           | `removeItem(key)`                    | `Promise`               | Supprime une ligne.                  |
| [`updateItemQuantity`](#updateitemquantitykey-quantity)  | `updateItemQuantity(key, quantity)`  | `Promise`               | Définit la quantité d'une ligne.     |
| [`replaceLineVariant`](#replacelinevariantkey-variantid) | `replaceLineVariant(key, variantId)` | `Promise`               | Change la variante d'une ligne.      |
| [`refresh`](#refresh)                                    | `refresh()`                          | `Promise`               | Recharge le panier depuis Shopify.   |
| [`visualRefresh`](#visualrefresh)                        | `visualRefresh()`                    | Rien                    | Redessine sans recharger.            |

<Warning>
  Appeler une action depuis un gestionnaire `cart_updated` peut boucler. Lisez d'abord [les deux règles](/fr/aftersell/cart/sdk-events#the-two-rules).
</Warning>

***

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

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

Ouvrent ou ferment le tiroir du panier. Les deux sont synchrones et ne prennent aucun argument.

```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">
  ## Lecture
</div>

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

Renvoie l'[objet cart](/fr/aftersell/cart/sdk-cart-object) actuel, ou `null` avant son chargement. Le résultat est une **copie**, donc le muter ne changera pas le vrai panier.

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

Comme il s'agit d'un instantané, ne conservez pas le résultat ; relisez-le chaque fois que vous avez besoin de données à jour. Dans un gestionnaire d'événement, vous avez déjà le panier à jour comme charge utile, donc `getCart()` y est redondant.

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

Formate un montant en unités mineures selon le format monétaire de votre boutique. Chaque prix dans le SDK est en centimes, c'est donc ainsi que vous en transformez un en quelque chose d'affichable.

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

Remplacez le format avec [`configure({ money_format })`](/fr/aftersell/cart/sdk-configure#money_format).

***

<div id="changing-the-cart">
  ## Modifier le panier
</div>

<Note>
  Les actions sur les articles identifient une ligne par sa **`key`** Shopify, pas par l'ID de variante, car un panier peut contenir la même variante sur plusieurs lignes avec des propriétés différentes. Lisez-la depuis `getCart().items[n].key`.
</Note>

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

Ajoute une variante au panier. `quantity` vaut `1` par défaut. Se résout une fois le panier stabilisé.

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

Ajouter une variante déjà présente dans le panier augmente la quantité de cette ligne plutôt que de créer une seconde ligne, tant que la ligne existante n'a pas de propriétés d'article. Une ligne portant des propriétés est une ligne distincte, vous en obtenez donc une nouvelle.

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

Supprime entièrement une ligne.

```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>

Définit la quantité d'une ligne. Passer `0` supprime la ligne.

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

Ce second exemple peut s'exécuter en toute sécurité depuis `cart_updated` parce que la vérification `> 1` est fausse au second passage. Consultez [les deux règles](/fr/aftersell/cart/sdk-events#the-two-rules).

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

Change la variante d'une ligne tout en conservant sa quantité et ses propriétés. Utile pour un sélecteur de taille ou de parfum à l'intérieur du panier.

```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>
  Le **plan de vente de la ligne est réinitialisé** lors d'un échange. Une ligne d'abonnement devient un achat unique sauf si vous réappliquez un plan.
</Warning>

L'échange est un ajout suivi d'une suppression, pas une modification sur place, donc le résultat est une **nouvelle ligne** : elle reçoit une nouvelle `key` et atterrit à la fin du panier. Relisez `getCart()` ensuite plutôt que de réutiliser la clé que vous avez passée.

***

<div id="refreshing">
  ## Rafraîchissement
</div>

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

Recharge le panier depuis Shopify. Utilisez-la après qu'un élément extérieur au SDK a modifié le panier sans que le tiroir ne s'en aperçoive.

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

La plupart du temps, vous n'en avez pas besoin, car Aftersell écoute déjà les événements de panier standard de Shopify et recharge de lui-même. Utilisez-la lorsqu'une intégration personnalisée les contourne.

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

Ré-exécute les transformations de rendu sans recharger le panier depuis Shopify. Vous en avez rarement besoin : enregistrer (ou désenregistrer) une [transformation de ligne](/fr/aftersell/cart/sdk-hooks#registerlinetransform), un [comparateur](/fr/aftersell/cart/sdk-hooks#registerlinecomparator), un [enrichisseur](/fr/aftersell/cart/sdk-hooks#registercartenricher) ou l'un des deux [hooks d'abonnement](/fr/aftersell/cart/sdk-hooks#registersubscriptionoptionstransform) en déclenche une pour vous. Seuls les deux hooks d'ajout au panier ne le font pas, puisqu'ils ne changent rien de ce qui est déjà à l'écran.

Utilisez-la lorsqu'un élément dont une transformation *dépend* change alors que le panier lui-même n'a pas changé :

```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">
  ## Notes et cas particuliers
</div>

* **Les actions asynchrones se résolvent lorsque le changement est stabilisé.** En attendre une vous permet de séquencer du travail après que le panier a réellement été mis à jour.
* **`getCart()` renvoie une copie.** La muter ne fait rien au vrai panier.
* **Il n'y a pas d'action pour les codes de réduction.** Les codes appliqués sont lisibles sur le panier (`discountCodes`, `totalDiscount`) et par ligne (`discountAllocations`) ; les acheteurs les appliquent via le bloc [Discount code](/fr/aftersell/cart/discount-code-block).
* **Il n'y a pas d'action pour les attributs de panier ou les notes.** Les attributs sont lisibles sur l'objet cart ; les acheteurs écrivent des notes via le bloc [Notes](/fr/aftersell/cart/notes-block).
* **Pour masquer une ligne plutôt que de la supprimer**, utilisez [`registerLineTransform`](/fr/aftersell/cart/sdk-hooks#registerlinetransform). La suppression modifie le total de l'acheteur ; le masquage non.

<div id="where-to-go-next">
  ## Pour aller plus loin
</div>

* **[Objet cart](/fr/aftersell/cart/sdk-cart-object)** : ce que `getCart()` renvoie.
* **[Événements](/fr/aftersell/cart/sdk-events)** : quand exécuter ces actions.
* **[Hooks](/fr/aftersell/cart/sdk-hooks)** : modifiez le rendu d'une ligne au lieu de modifier le panier.
* **[Cas d'usage](/fr/aftersell/cart/sdk-use-cases)** : des solutions complètes aux demandes courantes.