Acciones

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

Las acciones se ejecutan después de que el carrito está listo, dentro de ready() o de un handler de eventos.

window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  console.log(state.itemCount, 'items');
});

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.

Todas las acciones

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

Llamar a una acción desde un handler de cart_updated puede generar un bucle. Lee primero las dos reglas.

Drawer

open y close

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

// Open the drawer from your own cart link.
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});

// Close it after the shopper does something in a custom block.
window.aftersell.cart.actions.close();

Lectura

getCart()

Devuelve el objeto cart actual, o null antes de que se haya cargado. El resultado es una copia, así que mutarlo no cambiará el carrito real.

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

formatMoney(cents)

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.

window.aftersell.cart.actions.formatMoney(5779);  // "$57.79"
window.aftersell.cart.actions.formatMoney(0);     // "$0.00"

// 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 }).

Cambiar el carrito

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.

addItem(variantId, quantity?)

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

// Add one, then show the shopper.
window.aftersell.cart.actions.addItem(41720671830082).then(() => {
  window.aftersell.cart.actions.open();
});

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

removeItem(key)

Elimina una línea por completo.

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

updateItemQuantity(key, quantity)

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

const line = window.aftersell.cart.actions.getCart().items[0];
if (line) window.aftersell.cart.actions.updateItemQuantity(line.key, 3);

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

replaceLineVariant(key, variantId)

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

const line = window.aftersell.cart.actions.getCart().items[0];
window.aftersell.cart.actions.replaceLineVariant(line.key, 41720671862850);

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.

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.

Actualización

refresh()

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

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

visualRefresh()

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, un comparador, un enriquecedor o cualquiera de los hooks de suscripción 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:

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

Notas y casos límite

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.
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.
Para ocultar una línea en lugar de eliminarla, usa registerLineTransform. Eliminar cambia el total del comprador; ocultar no.

Adónde ir después

Objeto cart: lo que getCart() devuelve.
Eventos: cuándo ejecutar estas acciones.
Hooks: cambia cómo se renderiza una línea en lugar de cambiar el carrito.
Casos de uso: soluciones completas a solicitudes comunes.

Primeros pasos

Página de inicio

Mejores prácticas

Ventas adicionales poscompra

Carrito

Ventas adicionales en el pago (Shopify Plus)

Página de agradecimiento

Ventas adicionales en la página de producto

Rokt Thanks

Estrategias

Analíticas y seguimiento

Integraciones

Aftersell MCP

Facturación y cuenta

Solución de problemas

Todas las acciones

Drawer

open y close

Lectura

getCart()

formatMoney(cents)

Cambiar el carrito

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Actualización

refresh()

visualRefresh()

Notas y casos límite

Adónde ir después

​Todas las acciones

​Drawer

​open y close

​Lectura

​getCart()

​formatMoney(cents)

​Cambiar el carrito

​addItem(variantId, quantity?)

​removeItem(key)

​updateItemQuantity(key, quantity)

​replaceLineVariant(key, variantId)

​Actualización

​refresh()

​visualRefresh()

​Notas y casos límite

​Adónde ir después

Todas las acciones

Drawer

open y close

Lectura

getCart()

formatMoney(cents)

Cambiar el carrito

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Actualización

refresh()

visualRefresh()

Notas y casos límite

Adónde ir después