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

# Acciones

> Todas las acciones del Cart SDK de Aftersell para leer y cambiar el carrito: abrir, cerrar, agregar, eliminar, actualizar cantidad, cambiar una variante, leer estado y formatear dinero.

Las acciones **leen y cambian el carrito**. Viven bajo `window.aftersell.cart.actions`.

<Note>
  Las acciones se ejecutan **después de que el carrito está listo**, dentro de `ready()` o de un handler de [eventos](/es/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>
  **Antes de que el carrito se cargue, las acciones son stubs.** Cada una registra una advertencia en la consola nombrando la acción, por ejemplo `cart.actions.addItem() called before the cart loaded`, y no hace nada. Las acciones asíncronas aún resuelven una Promise, así que una cadena `.then()` se ejecuta normalmente en lugar de lanzar una excepción; `getCart()` devuelve `null` y `formatMoney()` devuelve una cadena vacía.

  Nada se rompe si llamas a una demasiado pronto, pero tampoco sucede nada. Observa la consola en busca de esa advertencia cuando una acción parezca no hacer nada.
</Note>

<div id="every-action">
  ## Todas las acciones
</div>

| Acción                                                   | Firma                                | Devuelve                | Qué hace                                   |
| -------------------------------------------------------- | ------------------------------------ | ----------------------- | ------------------------------------------ |
| [`open`](#open-and-close)                                | `open()`                             | Nada                    | Abre el drawer.                            |
| [`close`](#open-and-close)                               | `close()`                            | Nada                    | Cierra el drawer.                          |
| [`getCart`](#getcart)                                    | `getCart()`                          | `AftersellCart \| null` | Lee el carrito actual.                     |
| [`formatMoney`](#formatmoneycents)                       | `formatMoney(cents)`                 | `string`                | Formatea un monto para mostrarlo.          |
| [`addItem`](#additemvariantid-quantity)                  | `addItem(variantId, quantity?)`      | `Promise`               | Agrega una variante.                       |
| [`removeItem`](#removeitemkey)                           | `removeItem(key)`                    | `Promise`               | Elimina una línea.                         |
| [`updateItemQuantity`](#updateitemquantitykey-quantity)  | `updateItemQuantity(key, quantity)`  | `Promise`               | Establece la cantidad de una línea.        |
| [`replaceLineVariant`](#replacelinevariantkey-variantid) | `replaceLineVariant(key, variantId)` | `Promise`               | Cambia la variante de una línea.           |
| [`refresh`](#refresh)                                    | `refresh()`                          | `Promise`               | Vuelve a obtener el carrito desde Shopify. |
| [`visualRefresh`](#visualrefresh)                        | `visualRefresh()`                    | Nada                    | Repinta sin volver a obtener datos.        |

<Warning>
  Llamar a una acción desde un handler de `cart_updated` puede generar un bucle. Lee primero [las dos reglas](/es/aftersell/cart/sdk-events#the-two-rules).
</Warning>

***

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

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

Abre o cierra el drawer del carrito. Ambas son síncronas y no reciben argumentos.

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

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

Devuelve el [objeto cart](/es/aftersell/cart/sdk-cart-object) actual, o `null` antes de que se haya cargado. El resultado es una **copia**, así que mutarlo no cambiará el carrito real.

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

Como es un snapshot, no retengas el resultado; léelo de nuevo cada vez que necesites datos actuales. En un handler de eventos ya tienes el carrito fresco como payload, así que `getCart()` es redundante ahí.

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

Formatea un monto en unidades menores usando el formato de dinero de tu tienda. Todos los precios en el SDK están en centavos, así que esta es la forma de convertir uno en algo que puedas mostrar.

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

Anula el formato con [`configure({ money_format })`](/es/aftersell/cart/sdk-configure#money_format).

***

<div id="changing-the-cart">
  ## Cambiar el carrito
</div>

<Note>
  Las acciones de artículos identifican una línea por su **`key`** de Shopify, no por el ID de variante, porque un carrito puede contener la misma variante en varias líneas con propiedades diferentes. Léela desde `getCart().items[n].key`.
</Note>

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

Agrega una variante al carrito. `quantity` tiene como valor predeterminado `1`. Se resuelve una vez que el carrito se ha asentado.

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

Agregar una variante que ya está en el carrito aumenta la cantidad de esa línea en lugar de crear una segunda línea, siempre que la línea existente no tenga propiedades de línea de artículo. Una línea que lleva propiedades es una línea distinta, así que obtienes una nueva.

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

Elimina una línea por completo.

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

Establece la cantidad de una línea. Pasar `0` elimina la línea.

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

Ese segundo ejemplo es seguro de ejecutar desde `cart_updated` porque la verificación `> 1` es falsa en la segunda pasada. Consulta [las dos reglas](/es/aftersell/cart/sdk-events#the-two-rules).

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

Cambia la variante de una línea manteniendo su cantidad y propiedades. Útil para un selector de talla o sabor dentro del carrito.

```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>
  El **plan de venta de la línea se restablece** en un cambio. Una línea de suscripción se convierte en una compra única a menos que reapliques un plan.
</Warning>

El cambio es un agregado seguido de una eliminación, no una edición en el lugar, así que el resultado es una **línea nueva**: obtiene una nueva `key` y aterriza al final del carrito. Vuelve a leer `getCart()` después en lugar de reutilizar la key que pasaste.

***

<div id="refreshing">
  ## Actualización
</div>

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

Vuelve a obtener el carrito desde Shopify. Úsalo después de que algo fuera del SDK cambió el carrito y el drawer no lo notó.

```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 mayoría de las veces no necesitas esto, ya que Aftersell ya escucha los eventos estándar de carrito de Shopify y vuelve a obtener los datos por su cuenta. Recurre a él cuando una integración personalizada los omita.

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

Vuelve a ejecutar las transformaciones de renderizado sin volver a obtener el carrito desde Shopify. Rara vez lo necesitas: registrar (o anular el registro de) una [transformación de línea](/es/aftersell/cart/sdk-hooks#registerlinetransform), un [comparador](/es/aftersell/cart/sdk-hooks#registerlinecomparator), un [enriquecedor](/es/aftersell/cart/sdk-hooks#registercartenricher) o cualquiera de los [hooks de suscripción](/es/aftersell/cart/sdk-hooks#registersubscriptionoptionstransform) dispara uno por ti. Solo los dos hooks de agregar al carrito no lo hacen, ya que no cambian nada que ya esté en pantalla.

Recurre a él cuando algo de lo que *depende* una transformación cambia pero el carrito en sí no:

```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">
  ## Notas y casos límite
</div>

* **Las acciones asíncronas se resuelven cuando el cambio se asienta.** Hacer await de una te permite secuenciar trabajo después de que el carrito realmente se haya actualizado.
* **`getCart()` devuelve una copia.** Mutarla no hace nada al carrito real.
* **No hay acción para códigos de descuento.** Los códigos aplicados se pueden leer en el carrito (`discountCodes`, `totalDiscount`) y por línea (`discountAllocations`); los compradores los aplican mediante el bloque [Discount code](/es/aftersell/cart/discount-code-block).
* **No hay acción para atributos del carrito ni notas.** Los atributos se pueden leer en el objeto cart; los compradores escriben notas mediante el bloque [Notes](/es/aftersell/cart/notes-block).
* **Para ocultar una línea en lugar de eliminarla**, usa [`registerLineTransform`](/es/aftersell/cart/sdk-hooks#registerlinetransform). Eliminar cambia el total del comprador; ocultar no.

<div id="where-to-go-next">
  ## Adónde ir después
</div>

* **[Objeto cart](/es/aftersell/cart/sdk-cart-object)**: lo que `getCart()` devuelve.
* **[Eventos](/es/aftersell/cart/sdk-events)**: cuándo ejecutar estas acciones.
* **[Hooks](/es/aftersell/cart/sdk-hooks)**: cambia cómo se renderiza una línea en lugar de cambiar el carrito.
* **[Casos de uso](/es/aftersell/cart/sdk-use-cases)**: soluciones completas a solicitudes comunes.