PrestaShop Diseño & Navegación

DataFirefly SideCart — Carrito lateral para PrestaShop 8

El carrito que ya no abandona la ficha de producto.

Adiós a la redirección hacia /carrito que rompe el impulso de compra. SideCart desliza un panel de carrito desde el lateral de la pantalla en cuanto se añade un producto. El cliente ve lo que acaba de añadir, el subtotal se actualiza en tiempo real, y puede seguir navegando por su tienda sin recargar la página. La UX estándar del e-commerce moderno, en cinco minutos de instalación en su PrestaShop 8.

PrestaShop 8.0+ PHP 8.0+ Sin recarga 100% configurable Mobile-first Multi-tema
  • Reembolso de 30 días
  • 12 meses de actualizaciones
  • Soporte 24h
www.datafirefly.com/es/
SC
v1.0.0 · actualizado 2024-12-19
Qué hace

La versión corta.

01

Apertura instantánea al añadir

El panel se desliza desde el borde en cuanto se añade un producto — sin recarga, sin pérdida de contexto. El cliente permanece en la ficha de producto.

02

Todo es configurable

Posición (izquierda / derecha), color principal, overlay oscurecedor, auto-apertura al añadir, auto-cierre con retardo configurable, visualización del subtotal, los impuestos y el envío.

03

Compatible con su tema

Se conecta a los hooks estándar de PrestaShop 8 (displayHeader, actionCartUpdateQuantityBefore, displayAfterBodyOpeningTag). Funciona con Classic, Hummingbird y la mayoría de temas comerciales.

04

Rendimiento nativo

CSS y JS minificados y cargados solo en el front-office. Sin dependencia externa, sin framework pesado. Impacto cero en los Core Web Vitals.

La versión larga

Todo lo que querrías saber antes de instalar.

Una mirada detallada a cómo funciona DataFirefly SideCart — Carrito lateral para PrestaShop 8, por qué lo construimos así y la lógica detrás de las características anteriores.

§ 01

¿Por qué un carrito lateral?

Sobre 100 visitantes que hacen clic en «Añadir al carrito», ¿cuántos aterrizan en la página del carrito y abandonan? Muchos. La redirección rompe el momento en que la intención de compra es más fuerte. SideCart resuelve esto: el cliente ve su carrito llenarse sin abandonar la ficha de producto, y puede o bien seguir comprando, o bien ir al checkout en un clic. Es el patrón UX estándar de Amazon, Shopify, y de cualquier tienda que se tome en serio la conversión.

§ 02

Lo que ve el cliente

Un panel de 380 px que se desliza desde el lado derecho (configurable a la izquierda) con animación fluida. Dentro: la lista de productos con imagen, nombre, variante, precio unitario y control de cantidad. Abajo, el subtotal actualizado en tiempo real, más opcionalmente el IVA y el envío estimado. Dos botones de acción: ver el detalle del carrito o ir directamente al checkout. El overlay detrás del panel es cliqueable para cerrar.

§ 03

Configuración en 5 minutos

Instale el ZIP vía el gestor de módulos PrestaShop, después vaya a Módulos → DataFirefly SideCart → Configurar. Una sola página de ajustes con: Activar / Desactivar, Posición (Izquierda / Derecha), Auto-apertura al añadir (Sí / No), Overlay (Sí / No), Auto-cierre (Sí / No) + retardo en segundos, Color principal (color picker), y tres casillas para mostrar Subtotal / IVA / Envío. Guarde, está en línea.

§ 04

Arquitectura y rendimiento

El módulo usa los hooks nativos de PrestaShop 8 (displayHeader para los assets, actionCartUpdateQuantityBefore para detectar las adiciones, displayAfterBodyOpeningTag para inyectar el panel). El CSS pesa menos de 10 KB gzipped, el JS menos de 8 KB. Sin dependencia externa — no requiere jQuery, ningún framework. El impacto en los Core Web Vitals es nulo o negativo (la eliminación de la redirección a /carrito mejora el LCP percibido).

§ 05

Compatibilidad multitienda

Plenamente compatible con PrestaShop multitienda: cada subtienda puede tener su propia configuración (color diferente, posición diferente, hooks activados o no). Las variables de configuración se almacenan vía Configuration::updateValue con el contexto multitienda estándar.

§ 06

Móvil y accesibilidad

En móvil (< 768 px), el panel se expande a pantalla completa para una legibilidad máxima. El cierre es posible vía la tecla Esc, el botón X en la esquina, el clic en el overlay, o el swipe lateral (donde el dispositivo lo soporta). Todos los elementos interactivos tienen labels ARIA y el foco queda atrapado en el panel cuando está abierto.