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

# Carrito

> Gestiona los productos del carrito con la biblioteca cliente de Komerza

## Descripción general

El carrito se almacena en el localStorage del navegador y persiste entre recargas de página. Todas las operaciones del carrito son síncronas y actualizan el estado local de inmediato.

<Note>
  El objeto `komerza` está disponible globalmente después de incluir el script.
  Llama a `komerza.init('tu-id-de-tienda')` antes de usar otros métodos.
</Note>

## Añadir artículos

Añade una variante de producto al carrito con una cantidad especificada.

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

### Parámetros

<ParamField path="productId" type="string" required>
  El identificador único del producto
</ParamField>

<ParamField path="variantId" type="string" required>
  El identificador único de la variante del producto
</ParamField>

<ParamField path="quantity" type="number">
  Cuántos artículos añadir (por defecto 1 si no se indica)
</ParamField>

### Ejemplo

```javascript theme={null}
// Añadir 2 artículos de una variante de producto específica
komerza.addToBasket("prod_abc123", "var_xyz789", 2);

// Controlador del botón añadir al carrito
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("¡Añadido al carrito!");
});
```

## Ver el carrito

Obtén todos los artículos que hay actualmente en el carrito.

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

### Retorna

Retorna un array de objetos `BasketItem`:

```typescript theme={null}
interface BasketItem {
  productId: string; // ID del producto
  variantId: string; // ID de la variante
  quantity: number; // Número de artículos
}
```

### Ejemplo

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

if (basket.length === 0) {
  console.log("El carrito está vacío");
} else {
  basket.forEach((item) => {
    console.log(
      `Producto: ${item.productId}, Variante: ${item.variantId}, Cant: ${item.quantity}`,
    );
  });
}
```

## Obtener el recuento de artículos

Obtén el número total de artículos en el carrito (suma de todas las cantidades).

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

### Retorna

Retorna un número que representa la cantidad total de todos los artículos.

### Ejemplo

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

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

actualizarInsigniaCarrito();
```

## Eliminar artículos

Elimina una variante de producto completamente del carrito.

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

### Parámetros

<ParamField path="productId" type="string" required>
  El ID del producto a eliminar
</ParamField>

<ParamField path="variantId" type="string" required>
  El ID de la variante a eliminar
</ParamField>

### Ejemplo

```javascript theme={null}
function eliminarArticulo(productId, variantId) {
  if (confirm("¿Eliminar este artículo del carrito?")) {
    komerza.removeFromBasket(productId, variantId);
    actualizarVistaCarrito();
  }
}
```

## Vaciar el carrito

Elimina todos los artículos del carrito de una vez.

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

### Ejemplo

```javascript theme={null}
document.getElementById("clear-cart").addEventListener("click", () => {
  if (confirm("¿Eliminar todos los artículos del carrito?")) {
    komerza.clearBasket();
    actualizarVistaCarrito();
  }
});
```

## Copia de seguridad y restauración

Crea copias de seguridad del estado del carrito y restáuralas más tarde. Útil para gestionar errores de pago o implementar funciones de «guardar para después».

### Crear copia de seguridad

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

Retorna `true` si la copia de seguridad se creó correctamente.

### Restaurar copia de seguridad

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

Retorna `true` si la copia de seguridad se restauró correctamente.

### Ejemplo

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

  try {
    const order = await komerza.checkout(email, couponCode);
    // Éxito - redirigir al pago
  } catch (error) {
    // Restaurar el carrito si hay error
    komerza.restoreBasketFromBackup();
  }
}
```