Cómo añadir un carrito lateral AJAX a PrestaShop 8 y 9 (sin editar el tema)

Cuando un cliente añade un producto en una tienda PrestaShop 1.7, 8 o 9 estándar, el tema muestra una ventana emergente de confirmación. Para cambiar una cantidad, eliminar un artículo o introducir un cupón, el cliente tiene que abrir una página de carrito aparte y luego encontrar el camino de vuelta a los productos.

Un carrito lateral mantiene todo eso en la página en la que ya está el cliente. Esta guía muestra lo que PrestaShop hace de serie, las dos formas de añadir un carrito lateral AJAX y una configuración paso a paso que no toca los archivos de tu tema.

Lo que PrestaShop hace de serie

En PrestaShop, el carrito lo gestiona el módulo Carrito de compra que viene con la tienda. En el tema Classic funciona así:

• El cliente hace clic en «Añadir al carrito» y una ventana modal confirma que el producto se ha añadido.
• La ventana modal ofrece dos botones: seguir comprando o pasar por caja.
• Cualquier cambio en el carrito (cantidad, eliminar un producto, un vale de descuento) se hace en la página del carrito, que supone una carga completa de página.
• En el móvil, la ventana modal cubre la mayor parte de la pantalla y la página del carrito es un paso más antes del pago.

Este flujo funciona, pero cada cambio en el carrito aleja al cliente del listado de productos. Alrededor del 70 % de los carritos online se abandonan, según el Instituto Baymard, y los pasos entre «añadir al carrito» y «pagar» son uno de los puntos en los que la gente abandona.

Qué cambia con un carrito lateral AJAX

Un carrito lateral AJAX es un panel que se desliza desde un lado de la pantalla cuando se añade un producto. La página de debajo se queda donde estaba.

• Las cantidades se cambian con los botones de más y menos, sin recargar la página.
• Los productos se eliminan desde el panel y los totales se actualizan al instante.
• Los códigos de descuento se introducen en el mismo panel.
• Una barra de envío gratuito muestra cuánto falta para alcanzar el umbral.
• El botón de pago está siempre a un toque.

Más información: carrito AJAX frente a recarga de página en PrestaShop y qué significa para la conversión →

Dos formas de añadir un carrito lateral

Opción 1: integrarlo en tu tema

Un desarrollador puede sustituir la ventana modal del carrito por un panel personalizado. Esto implica editar las plantillas del tema, escuchar los eventos del carrito de PrestaShop en JavaScript, llamar al controlador del carrito con AJAX y dar estilo al resultado para escritorio y móvil.

Ofrece control total, pero el trabajo queda dentro del tema. Una actualización del tema puede sobrescribirlo, y cada nueva función (cupones en el panel, una barra de envío, sugerencias de productos) es otra pieza de código personalizado que mantener.

Opción 2: instalar un módulo

Un módulo de carrito lateral añade el panel mediante los hooks de PrestaShop. Los archivos del tema no se tocan, el panel se mantiene tras las actualizaciones del tema y las opciones se activan en los ajustes del módulo en lugar de programarse.

El resto de esta guía utiliza Sliding Cart Block, nuestro módulo de carrito lateral AJAX para PrestaShop 1.7.8, 8 y 9. Los pasos para otros módulos son parecidos: subir, configurar, comprobar los hooks y probar.

Paso a paso: añadir un carrito lateral sin editar el tema

1. Comprueba los requisitos

• PrestaShop 1.7.8 o posterior, incluidos PrestaShop 8 y 9.
• PHP 7.2 o posterior (PrestaShop 9 necesita PHP 8.1 o posterior).
• Una cuenta del back office con permiso para gestionar módulos.

Si al mismo tiempo planeas actualizar a PrestaShop 9, analiza primero tus otros módulos.

Comprobador gratuito de compatibilidad de módulos con PrestaShop 9 →

2. Sube el módulo

1. En el back office, ve a Módulos → Gestor de módulos.
2. Haz clic en «Subir un módulo» en la esquina superior derecha.
3. Arrastra el archivo ZIP del módulo a la zona de carga.
4. Cuando termine la instalación, haz clic en «Configurar».

3. Elige cómo se abre el carrito

Los primeros ajustes deciden qué ocurre después de «Añadir al carrito»:

• Abrir el panel del carrito automáticamente al añadir un producto, o mantenerlo cerrado y actualizar solo el icono del carrito.
• Un ajuste aparte para móviles, con un punto de corte por ancho de pantalla (480 px por defecto). Muchas tiendas mantienen el panel cerrado en pantallas pequeñas y lo abren en escritorio.
• Panel a la izquierda o a la derecha, modo claro u oscuro y diseño a ancho completo en móviles.
• Una barra lateral opcional que permanece abierta en pantallas anchas (1300 px o más por defecto).

4. Activa lo que debe mostrar el carrito

• Botones de cantidad, imágenes de producto y atributos seleccionados (talla, color).
• Campo de cupón y ahorro total.
• Barra de envío gratuito. Lee el umbral de envío gratuito de la configuración de tus transportistas, así que no hay que volver a escribir ningún importe.
• Hasta tres niveles de recompensa en la barra de progreso, por ejemplo un descuento, un regalo y el envío gratuito.
• Sugerencias de productos dentro del panel y en la ventana emergente de añadir al carrito.
• Un mensaje de pedido mínimo que desactiva el botón de pago por debajo del importe mínimo.

5. Comprueba los hooks

El panel se engancha mediante hooks, así que no hay que editar ninguna plantilla. Si el carrito no aparece tras la instalación, ve a Diseño → Posiciones y comprueba que el módulo está enganchado a displayHeader y displayNav.

Si hay otro módulo de carrito activo, puede mostrar un segundo carrito o una segunda ventana emergente. Desactiva el otro módulo antes de probar.

6. Vacía la caché y prueba

Vacía la caché de PrestaShop en Parámetros avanzados → Rendimiento y luego prueba como cliente:

• Añade un producto desde una página de categoría y desde una página de producto.
• Cambia una cantidad y elimina un producto en el panel.
• Aplica un código de descuento.
• Comprueba la barra de envío gratuito por debajo y por encima del umbral.
• Repite en un móvil y después haz un pedido de prueba.

Todos los ajustes explicados en la documentación de Sliding Cart Block →

Qué medir después del cambio

Compara las cuatro semanas anteriores y posteriores al cambio, en escritorio y en móvil por separado:

• Tasa de paso de añadir al carrito a pago.
• Tasa de abandono del carrito.
• Valor medio del pedido, si has activado la barra de envío gratuito o las sugerencias de productos.

Cómo medir el abandono del carrito en PrestaShop →

Patrones de UX del carrito en móvil para PrestaShop →

Preguntas frecuentes

¿Tengo que editar mi tema para añadir un carrito lateral?

No. Un módulo añade el panel mediante los hooks de PrestaShop, así que los archivos del tema se quedan como están. Algunos temas necesitan unas pocas líneas de CSS para ajustar colores o espaciados.

¿Un carrito lateral sustituye a la página del carrito?

No. La página del carrito y el proceso de pago siguen funcionando como antes. El carrito lateral es una capa adicional que resuelve las acciones más habituales sin salir de la página.

¿Funciona en PrestaShop 9?

Sliding Cart Block funciona en PrestaShop 1.7.8, 8 y 9. Si vas a actualizar toda la tienda, revisa tus otros módulos en busca de código que PrestaShop 9 ha eliminado.

¿Ralentizará la tienda?

El panel usa su propio controlador AJAX y carga solo los datos que necesita el carrito. La página de producto no se recarga cuando cambia el carrito.

¿Pueden los clientes usar códigos de descuento en el carrito lateral?

Sí. Se puede activar un campo de cupón desplegable en el panel, y los totales se actualizan en cuanto se aplica el código.