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

# Panier

> Gérez les articles du panier avec la bibliothèque client Komerza

## Aperçu

Le panier est stocké dans le localStorage du navigateur et persiste entre les rechargements de page. Toutes les opérations sur le panier sont synchrones et mettent à jour l'état local immédiatement.

<Note>
  L'objet `komerza` est disponible globalement après l'inclusion du script.
  Appelez `komerza.init('votre-id-boutique')` avant d'utiliser d'autres
  méthodes.
</Note>

## Ajouter des articles

Ajoutez une variante de produit au panier avec une quantité spécifiée.

```javascript theme={null}
komerza.addToBasket(productId, variantId, quantity);
```

### Paramètres

<ParamField path="productId" type="string" required>
  L'identifiant unique du produit
</ParamField>

<ParamField path="variantId" type="string" required>
  L'identifiant unique de la variante du produit
</ParamField>

<ParamField path="quantity" type="number">
  Combien d'articles ajouter (par défaut 1 si non fourni)
</ParamField>

### Exemple

```javascript theme={null}
// Ajouter 2 articles d'une variante de produit spécifique
komerza.addToBasket("prod_abc123", "var_xyz789", 2);

// Gestionnaire du bouton ajouter au panier
document.getElementById("add-to-cart").addEventListener("click", () => {
  const productId = "prod_abc123";
  const variantId = document.getElementById("variant-select").value;
  const quantity = parseInt(document.getElementById("quantity").value) || 1;

  komerza.addToBasket(productId, variantId, quantity);
  alert("Ajouté au panier !");
});
```

## Voir le panier

Obtenez tous les articles actuellement dans le panier.

```javascript theme={null}
const items = komerza.getBasket();
```

### Retours

Retourne un tableau d'objets `BasketItem` :

```typescript theme={null}
interface BasketItem {
  productId: string; // Identifiant du produit
  variantId: string; // Identifiant de la variante
  quantity: number; // Nombre d'articles
}
```

### Exemple

```javascript theme={null}
const basket = komerza.getBasket();

if (basket.length === 0) {
  console.log("Le panier est vide");
} else {
  basket.forEach((item) => {
    console.log(
      `Produit : ${item.productId}, Variante : ${item.variantId}, Qté : ${item.quantity}`,
    );
  });
}
```

## Obtenir le nombre d'articles

Obtenez le nombre total d'articles dans le panier (somme de toutes les quantités).

```javascript theme={null}
const count = komerza.getBasketItemCount();
```

### Retours

Retourne un nombre représentant la quantité totale de tous les articles.

### Exemple

```javascript theme={null}
function mettreAJourBadgePanier() {
  const count = komerza.getBasketItemCount();
  document.getElementById("cart-count").textContent = count;

  if (count > 0) {
    document.getElementById("cart-badge").style.display = "block";
  }
}

mettreAJourBadgePanier();
```

## Retirer des articles

Retirez entièrement une variante de produit du panier.

```javascript theme={null}
komerza.removeFromBasket(productId, variantId);
```

### Paramètres

<ParamField path="productId" type="string" required>
  L'identifiant du produit à retirer
</ParamField>

<ParamField path="variantId" type="string" required>
  L'identifiant de la variante à retirer
</ParamField>

### Exemple

```javascript theme={null}
function retirerArticle(productId, variantId) {
  if (confirm("Retirer cet article du panier ?")) {
    komerza.removeFromBasket(productId, variantId);
    mettreAJourAffichagePanier();
  }
}
```

## Vider le panier

Retirez tous les articles du panier en une seule fois.

```javascript theme={null}
komerza.clearBasket();
```

### Exemple

```javascript theme={null}
document.getElementById("clear-cart").addEventListener("click", () => {
  if (confirm("Retirer tous les articles du panier ?")) {
    komerza.clearBasket();
    mettreAJourAffichagePanier();
  }
});
```

## Sauvegarde et restauration

Créez des sauvegardes de l'état du panier et restaurez-les ultérieurement. Utile pour gérer les erreurs de paiement ou implémenter des fonctionnalités « enregistrer pour plus tard ».

### Créer une sauvegarde

```javascript theme={null}
const success = komerza.createBasketBackup();
```

Retourne `true` si la sauvegarde a été créée avec succès.

### Restaurer une sauvegarde

```javascript theme={null}
const success = komerza.restoreBasketFromBackup();
```

Retourne `true` si la sauvegarde a été restaurée avec succès.

### Exemple

```javascript theme={null}
async function procederAuPaiement() {
  komerza.createBasketBackup();

  try {
    const order = await komerza.checkout(email, couponCode);
    // Succès - redirection vers le paiement
  } catch (error) {
    // Restaurer le panier en cas d'échec
    komerza.restoreBasketFromBackup();
  }
}
```