Carrito AJAX frente a la recarga de la página en PrestaShop: el impacto real en la conversión

Cuando añades un producto al carrito de PrestaShop, por defecto se recarga la página. Los patrones más recientes utilizan AJAX: el carrito se actualiza en tiempo real sin que cambie la página. La pregunta que se plantean los propietarios de las tiendas es si el patrón AJAX realmente influye en las ventas o si se trata simplemente de una preferencia de los desarrolladores disfrazada de optimización.

Respuesta breve: Sí, AJAX destaca en conversión, experiencia de usuario y velocidad percibida. — pero solo si se aplica correctamente. A continuación, te presentamos una comparación de los aspectos que realmente importan, y al final abordamos el mito del SEO.

Cómo funciona cada uno de ellos en realidad

Recarga de la página del carrito (clásico PrestaShop)

1. El usuario pulsa “Añadir al carrito”
2. El navegador envía el formulario mediante un método POST al controlador del carrito
3. El servidor procesa la solicitud, inserta una línea en el carrito y devuelve una página HTML completa
4. El navegador recibe un archivo HTML de entre 40 y 200 KB o más, lo analiza, vuelve a cargar todos los archivos CSS y JS, y lo representa.
5. El usuario ve la página del carrito (ahora en la parte superior de la página, fuera del contexto del producto)

Cada paso conlleva el riesgo de que se produzca un fallo: un servidor lento, una conexión móvil inestable, un tiempo de espera agotado o pulsar por error el botón «Atrás».

Carrito AJAX

1. El usuario pulsa “Añadir al carrito”
2. JavaScript envía una solicitud POST a un punto final AJAX (normalmente /module/slidingcartblock/ajax o similar)
3. El servidor procesa y devuelve un pequeño archivo JSON (entre 200 bytes y 5 KB)
4. JavaScript actualiza el recuento que aparece en el icono del carrito y, si se desea, abre un panel deslizante.
5. El usuario no pierde el contexto; el producto sigue apareciendo en pantalla

La diferencia no es solo técnica: es la diferencia entre un cliente que piensa “el carrito se ha actualizado” y otro que piensa “¿sigo comprando?”.”

Comparativa directa en los aspectos que realmente importan

Tasa de conversión

Los estudios del sector demuestran de forma sistemática que la reducción de las barreras en el proceso de añadir productos al carrito genera un aumento significativo de la tasa de conversión. Aunque no existe ningún estudio definitivo específico sobre PrestaShop, las conclusiones coincidentes en todas las plataformas son claras:

• Instituto Baymard señala que “un proceso de pago excesivamente largo o complicado” y “errores o fallos del sitio web” son dos de las cinco principales causas del abandono del carrito, ambas agravadas por las recargas de página completas (Estadísticas sobre la tasa de abandono de carritos de la compra, Baymard 2025).
• Estudio de Google sobre los «Core Web Vitals» documentos que usuarios de dispositivos móviles Descartar el 53% de las páginas que tardan más de 3 segundos en cargarse. La recarga completa de la página al actualizar el carrito suele superar ese umbral en conexiones 4G, sobre todo con temas PrestaShop no optimizados (web.dev — Largest Contentful Paint).
• La conclusión de Amazon, tan ampliamente citada: un retraso de 1 segundo reduce la conversión en un 7%. Una recarga mediante la acción del carrito añade fácilmente entre 1 y 3 segundos, frente a una respuesta AJAX de unos pocos cientos de milisegundos.
• Varios informes sobre plataformas de comercio electrónico (Shopify Plus, BigCommerce) señalan que Mejoras en la conversión 5-15% gracias a los cambios en el carrito que reducen la fricción —paneles deslizantes, controles de cantidad en línea, procesos de pago en una sola página—, con los mayores avances en dispositivos móviles.

La mejora es siempre mayor en dispositivos móviles porque allí la penalización por la recarga de la página es mayor: conexiones más lentas, menor tolerancia a los cambios de contexto y reinicios del desplazamiento provocados por la recarga, que hacen que el usuario pierda el contexto del producto.

Velocidad percibida

La recarga completa de una página provoca un momento de “página en blanco → aparece el contenido” que los usuarios perciben como un retraso, incluso cuando el servidor es rápido. Una respuesta del servidor de 400 ms se percibe como 400 ms con AJAX y como 1.5 segundos con una recarga completa, ya que esta última incluye el renderizado, el análisis de CSS, la carga de fuentes y la ejecución de JS.

La percepción es lo que provoca el abandono, no el tiempo de respuesta del servidor. Los carritos que dan la sensación de ser más rápidos generan más conversiones, incluso a la misma velocidad real.

Velocidad de actualización del carrito (añadir, eliminar, cantidad)

Aquí es donde AJAX destaca por encima de todo. Cambiar la cantidad en un carrito que se actualiza al recargar la página:

• Pulsa “+”, haz clic en «Confirmar», espera a que se actualice la página y vuelve a desplazarte hasta el elemento.
• ~2-5 segundos por cambio en el móvil

La misma operación en un carrito AJAX:

• Pulsa “+”; el valor cambia al instante y el total se actualiza en tiempo real.
• ~200 ms, sin recarga

En un carrito con cinco artículos en el que el usuario quiere modificar las cantidades, AJAX ahorra entre 10 y 20 segundos. Esa es la diferencia entre decir “Vale, ya he terminado” y “Olvídalo”.

Experiencia de usuario en dispositivos móviles

Se trata en detalle en Experiencia de usuario del carrito móvil para PrestaShop: 7 patrones que realmente generan conversiones. En resumen: AJAX es fundamental para todos los patrones móviles que funcionan (paneles deslizantes, notificaciones emergentes, resúmenes fijos). La recarga de la página hace que sean imposibles.

Carga del servidor

Aunque parezca contradictorio, AJAX supone menos carga para el servidor. Un carrito que requiere la recarga de la página implica:

• Representación completa en HTML en cada acción del carrito
• Se vuelven a solicitar todos los recursos de la página (a menos que estén almacenados en caché de forma intensiva)
• Consultas a la base de datos para el encabezado, el pie de página, el menú, los productos relacionados, etc.

Un punto final AJAX devuelve datos en formato JSON, lo que suele suponer entre 5 y 20 veces menos ancho de banda, menos consultas a la base de datos y un menor consumo de CPU. En un plan de alojamiento compartido con recursos limitados, los carritos AJAX gestionan mejor los picos de tráfico.

Gestión de errores

Los errores que se producen al recargar la página del carrito son muy molestos: artículo agotado, cupón no válido, pago rechazado… Cada uno de ellos se muestra como una nueva carga de la página. Es posible que el usuario no sepa qué ha cambiado.

Los errores de AJAX se pueden tratar de forma específica: mostrar un aviso rojo junto al elemento, mantener todo lo demás intacto y permitir que el usuario corrija un dato y vuelva a intentarlo. Una mejor recuperación ante errores se traduce en menos abandonos.

Comportamiento del botón «Atrás»

A veces, AJAX puede hacer que el botón «Atrás» deje de funcionar (si no se implementa correctamente, es decir, si no se registra la acción del carrito en el historial). La recarga de la página ofrece un comportamiento correcto del botón «Atrás», pero la página se recarga cada vez que se pulsa dicho botón, lo que supone otra fuente de frustración. Las buenas implementaciones de AJAX utilizan la API de historial para mantener el comportamiento del botón «Atrás»; las que no lo hacen, no.

Cuando la página se recarga correctamente

Actualizar la página no siempre es un error. Casos en los que resulta razonable:

• Catálogos muy pequeños — 10 productos; la mayoría de los usuarios añaden entre 1 y 2 artículos; el coste de recarga es insignificante
• Tiendas B2B con ciclos de compra lentos y reflexivos — Los clientes añaden productos y los revisan con atención; se espera y se desea que la página del carrito esté llena.
• Temas heredados en los que el coste de la adaptación a AJAX supera el aumento de las ventas — Es probable que una tienda antigua con unos ingresos de 500 € al mes no pueda justificar la migración.
• Contextos normativos en los que cada acción realizada en el carrito debe poder ser objeto de auditoría — algunos sectores prefieren la recarga explícita por acción para mayor claridad jurídica

En el caso de las tiendas B2C típicas con tráfico móvil, esas excepciones rara vez se aplican. A la mayoría de las tiendas que actualmente utilizan un carrito de recarga les convendría cambiar de sistema.

Cómo implementar un carrito AJAX en PrestaShop

Opción 1: Carrito AJAX nativo PrestaShop

El modelo PrestaShop 1.7+ incluye ajax-cart.js y un punto final de controlador predeterminado. Muchos temas lo desactivan o no lo aprovechan al máximo. Para activarlo: Parámetros de la tienda → General → Activar Ajax en la página de productos. El resultado es funcional, pero minimalista: se han implementado las actualizaciones del carrito, no hay ningún panel deslizante ni barra de envío gratuito.

Opción 2: Personalización a nivel de tema

Modifica el tema de tu cart-detailed.tpl y añadir código JavaScript para interceptar los envíos de formularios. Funciona, pero es inestable; cada actualización del tema conlleva el riesgo de que deje de funcionar. Solo se recomienda si se dispone de personal interno con conocimientos de PHP y JavaScript.

Opción 3: Módulo de carrito deslizante específico

Un módulo que incluye todos los patrones AJAX (panel deslizante, controles para móviles, barra de envío gratuito, ventas cruzadas) en una única instalación. Sliding Cart Block Es nuestro módulo en esta categoría: basado en AJAX, compatible con PS 1.7 y 8.x, y funciona con la mayoría de los temas sin necesidad de personalizarlos.

El mito del SEO: ¿afecta negativamente al posicionamiento el carrito de la compra AJAX?

Una preocupación recurrente: “Si el carrito utiliza JavaScript, Google no puede verlo y mi sitio web se posicionará peor”. Esto es incorrecto, y lo ha sido desde aproximadamente 2015.

Datos:

• Google procesa el JavaScript durante el rastreo (Googlebot utiliza un motor Chromium reciente desde 2019)
• La página del carrito suele ser noindex o excluidos del rastreo — el posicionamiento no depende de ello
• Lo que importa para el SEO son las páginas de productos y las páginas de categorías, no el carrito
• Los datos estructurados de Schema.org (Producto, Oferta, Preguntas frecuentes) son totalmente independientes de la implementación del carrito de la compra.

¿Qué? podría Afecta al posicionamiento: un JavaScript lento que hunde los Core Web Vitals. Un carrito AJAX mal implementado que bloquea el hilo principal durante la carga de la página puede afectar a las puntuaciones de LCP e INP. Sin embargo, uno bien implementado (con carga diferida, aplazado y modular) no tiene ningún impacto negativo en el SEO, y a menudo mejora el posicionamiento al aumentar el tiempo de permanencia, reducir la tasa de rebote y aumentar las señales de conversión.

El contexto completo de SEO para los carritos PrestaShop se trata en La guía de PrestaShop sobre el abandono de carritos.

Preguntas frecuentes

¿Funciona bien el carrito AJAX predeterminado de PrestaShop?

Funciona, pero de forma muy básica. Actualiza el recuento del icono del carrito y permite añadir productos al carrito sin necesidad de recargar la página. No incluye un panel deslizante, una barra de envío gratuito, un bloque de ventas cruzadas ni controles de cantidad optimizados para dispositivos móviles. En la mayoría de las tiendas, un módulo de carrito específico lo sustituye o lo complementa.

¿Un carrito AJAX puede estropear mi tema personalizado?

Depende de cómo lo incorpores. Las modificaciones a nivel de tema pueden dejar de funcionar con las actualizaciones del tema. Los carritos AJAX a nivel de módulo (como un módulo de carrito deslizable) se integran a través de hooks y no requieren modificaciones en el tema: las actualizaciones del tema no les afectan, y las actualizaciones del módulo no requieren cambios en el tema.

¿Cuánto más rápido es el carrito AJAX en cifras reales?

Operación media de actualización del carrito en PrestaShop:

• Recarga de la página: 800-2500 ms (depende del servidor y del peso del tema)
• AJAX: 150-400 ms

Eso supone entre 5 y 10 veces más rápido por operación. Si lo multiplicamos por las 3-5 modificaciones del carrito por sesión, la diferencia acumulada es significativa.

¿El carrito AJAX es accesible para los lectores de pantalla?

Sí, si se implementa con regiones activas de ARIA. Al actualizar el carrito, debería anunciarse “Artículo añadido al carrito” mediante aria-live="polite". Los buenos módulos de carrito de la compra lo incluyen; sin embargo, en las implementaciones de temas «hazlo tú mismo» suele faltar.

¿Puedo seguir teniendo una página completa del carrito con AJAX?

Sí, la mayoría de las implementaciones de carritos AJAX mantienen la página completa del carrito como opción secundaria (a la que se accede mediante el enlace “Ver carrito”). La ventana emergente es el flujo predeterminado; la página completa está pensada para los usuarios que desean revisar el contenido antes de finalizar la compra. Ambas opciones coexisten.

En resumen

Para cualquier tienda PrestaShop con un tráfico móvil significativo (actualmente, más de 70% tiendas), el carrito AJAX es imprescindible. La mejora prevista en la tasa de conversión, de entre 9 y 13%, amortiza el coste de implementación en cuestión de semanas en cualquier tienda que genere 5.000 € al mes o más en ventas.

El punto de partida más sencillo: un módulo específico de carrito deslizante que gestiona AJAX, el envío gratuito, los diseños para móviles y las ventas cruzadas en una sola instalación, sin necesidad de modificar tu tema.