El carrito de Shopify no se actualiza hasta que se actualiza: correcciones de AJAX, temas y aplicaciones (2026)

Solución rápida con Thunder

Primero demuestre si los datos del carrito o la interfaz de usuario del carrito están dañados

Abra DevTools, haga clic en Agregar al carrito y mire Red. si /cart/add.js o /cart/change.js devuelve una respuesta 200 y /cart.js muestra el recuento de artículos correcto, los datos del carrito de Shopify están bien. La pieza rota es la interfaz de usuario visible: HTML del cajón, recuento del carrito, cantidad de artículos en línea, subtotal o estado del botón de pago.

Si la solicitud falla con un 400, 422 o redireccionamiento, primero depure el formulario del producto. Los ID de variantes, los planes de venta, las aplicaciones de suscripción y las propiedades de los artículos en línea del paquete pueden hacer que una solicitud de carrito falle antes de que el cajón tenga algo que actualizar.

Para problemas relacionados con la ruta de compra, utilice el cajón del carro que no abre la guía, Lista de verificación del botón Agregar al carrito, y guía de solución de problemas desde el carrito hasta el pago.

Corregir actualizaciones del carrito AJAX con representación de secciones

Los temas modernos de Shopify a menudo obtienen secciones de carrito actualizadas después de una mutación del carrito. Esto mantiene sincronizados el cajón, el subtotal, la lista de artículos y el ícono del carrito sin tener que recargar la página completa. Los ID de sección exactos difieren según el tema, así que inspeccione el cajón del carrito y las secciones del encabezado antes de copiar el código.

async function changeCartQuantity(line, quantity) {
  const change = await fetch('/cart/change.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({ line, quantity }),
  });

  if (!change.ok) throw new Error('Cart quantity update failed');

  const sections = ['cart-drawer', 'cart-icon-bubble'];
  const html = await fetch('/?sections=' + sections.join(',')).then((res) => res.json());

  document.querySelector('cart-drawer')?.replaceWith(
    new DOMParser().parseFromString(html['cart-drawer'], 'text/html').querySelector('cart-drawer')
  );

  document.querySelector('#cart-icon-bubble')?.replaceWith(
    new DOMParser().parseFromString(html['cart-icon-bubble'], 'text/html').querySelector('#cart-icon-bubble')
  );

  document.dispatchEvent(new CustomEvent('cart:updated'));
}

No asuma que esos ID de sección existen en su tema. Busca tu tema para carro-cajón, burbuja-icono-carrito, artículos-carrito, y artículos-del-carrito-principal. Los temas de estilo Dawn tienen ayudas de actualización diferentes a los temas personalizados más antiguos.

Actualice el recuento de carritos, el subtotal y los botones de eliminación juntos

Una solución parcial común actualiza las líneas de pedido del cajón del carrito, pero deja obsoleto el recuento del encabezado. Otro error común elimina un elemento visualmente pero mantiene el subtotal anterior. Ambos hacen que los compradores desconfíen del proceso de pago. Trate el carrito como un sistema con estado, no como widgets separados.

Después de cada mutación del carrito, verifique cinco elementos: filas de artículos, cantidades ingresadas, recuento del carrito, subtotal y estado del botón de pago deshabilitado. Si alguno de ellos todavía muestra datos obsoletos, la actualización está incompleta.

Deshabilitar aplicaciones de carrito y fragmentos antiguos en un tema duplicado

Los problemas con el carrito a menudo comienzan después de instalar una aplicación de paquete, regalo, venta adicional, suscripción o cajón del carrito. La aplicación puede escuchar el nombre de un evento mientras su tema envía otro. O puede cambiar el carrito después de que su tema ya haya generado HTML nuevo.

Duplique el tema, desactive las incrustaciones de aplicaciones y pruebe un producto simple. Luego, vuelva a habilitar las aplicaciones una por una. Comience con aplicaciones de carrito, paquete, regalo, suscripción, ventana emergente, personalización y creación de páginas. Si el problema persiste después de desinstalar una aplicación, ejecute el Lista de verificación de limpieza de restos de la aplicación Shopify.

Las pilas de aplicaciones pesadas también perjudican la capacidad de respuesta. el guía de corrección de scripts de aplicaciones, Guía Shopify INP, y guía completa de optimización de velocidad de Shopify cubre el lado de velocidad con más profundidad.

Solución manual frente a solución Thunder

Si el problema del carrito está relacionado con el rendimiento general de la tienda, compare Precios de trueno con optimización práctica de la velocidad de Shopify.

FAQ