Módulo Vista Rápida PrestaShop 8/9 — Documentación

Presentación

DF Quick View sustituye la vista rápida nativa de su tema PrestaShop por una ventana moderna: galería de imágenes completa, selección de combinaciones en directo, indicador de stock, selector de cantidad y añadir al carrito por AJAX. Gracias a la precarga al pasar el ratón, la ventana se abre al instante y el cliente permanece en su página de categoría durante todo el recorrido.

El módulo no sobrescribe ninguna plantilla del tema: se inserta mediante el hook estándar actionFrontControllerSetMedia y trabaja del lado del navegador sobre las miniaturas de producto existentes. El JavaScript es nativo, sin jQuery ni dependencias externas.

Requisitos

• PrestaShop 8.0 a 9.x
• PHP 7.4 o superior
• Un tema que muestre miniaturas de producto en las páginas de listado (el tema Classic y sus temas hijo funcionan sin ajustes)

Instalación

1. Descargue el archivo dfquickview-1.0.0.zip desde su cuenta de cliente DataFirefly.
2. En el back office, vaya a Módulos > Gestor de módulos, haga clic en Subir un módulo y suelte el archivo.
3. Haga clic en Instalar y luego en Configurar.

No se crea ninguna tabla en la base de datos: el módulo solo guarda sus ajustes en la tabla de configuración de PrestaShop. La desinstalación es limpia y elimina todas sus claves.

Configuración

Modo de activación

Tres modos determinan cómo se abre la ventana:

• Interceptar — el módulo captura los enlaces de vista rápida de su tema (los elementos con las clases .quick-view, .js-quick-view o el atributo data-link-action="quickview") y abre su propia ventana en su lugar. El comportamiento nativo queda neutralizado.
• Inyectar — el módulo añade su propio botón superpuesto en cada miniatura de producto. Útil si su tema no ofrece ninguna vista rápida.
• Ambos (recomendado, valor por defecto) — los dos mecanismos están activos.

Selector CSS de las miniaturas de producto

El módulo necesita saber qué elementos de la página son miniaturas de producto. El valor por defecto, .product-miniature, .js-product-miniature, cubre el tema Classic y la gran mayoría de los temas hijo.

Si su tema usa otra estructura, abra una página de categoría, inspeccione el contenedor de un producto en las herramientas de desarrollo de su navegador e indique aquí su clase. El módulo busca a continuación el identificador de producto en el atributo data-id-product dentro de la miniatura y, en su defecto, lo deduce de la URL del enlace del producto.

Precarga inteligente

Activada por defecto. En cuanto el cursor se detiene sobre una miniatura durante el retardo de precarga (120 ms por defecto), el módulo recupera los datos del producto en segundo plano y precarga su primera imagen. Al hacer clic, todo está ya en memoria: la ventana se abre sin latencia.

En móvil, la precarga se activa al primer contacto táctil con la miniatura.

Se envía una sola petición por producto, aunque el visitante pase el ratón varias veces sobre la misma miniatura. Si le preocupa la carga del servidor, aumente el retardo (de 300 a 500 ms filtra los pasos involuntarios) o desactívela: la ventana se cargará entonces al hacer clic, mostrando un esqueleto de carga animado.

Duración de la caché del cliente

Los datos de producto recuperados se conservan en la sesión del navegador durante el tiempo indicado (300 segundos por defecto). Un visitante que vuelve a abrir la misma ventana no genera ninguna petición nueva.

La caché está aislada por idioma, moneda, tienda y grupo de clientes: un visitante nunca puede ver un precio calculado para otro grupo. Ajuste el valor a 0 para desactivar por completo la caché de sesión (la caché en memoria de la página sigue activa).

Contenido mostrado

• Mostrar la descripción corta — muestra el resumen del producto en la ventana (oculto en móvil para ahorrar espacio).
• Mostrar la referencia del producto — muestra la referencia del producto, o la de la combinación seleccionada si la tiene.
• Mostrar el enlace «Ver la ficha completa» — añade un enlace a la ficha completa bajo el botón de añadir al carrito.

Cargar en todas las páginas

Por defecto, los recursos del módulo solo se cargan en las páginas de listado: inicio, categorías, búsqueda, marcas, proveedores, ofertas, novedades y más vendidos. Active esta opción si muestra miniaturas de producto en otros lugares: páginas CMS, bloques personalizados, módulos de terceros.

Color de acento

Determina el color de los botones, los contornos de selección y los estados activos de la ventana. Introduzca un color hexadecimal acorde con su identidad visual.

Funcionamiento de la ventana

Galería

La ventana muestra todas las imágenes del producto: imagen principal, miniaturas cliqueables debajo y flechas anterior y siguiente. Se admite la navegación con teclado (flechas izquierda y derecha para cambiar de imagen, tecla Escape para cerrar) y el deslizamiento táctil funciona en móvil.

Si la combinación seleccionada tiene imágenes asociadas en PrestaShop, la galería se limita automáticamente a esas imágenes. En caso contrario, se muestran todas las imágenes del producto.

Combinaciones

Los grupos de atributos se representan según su tipo configurado en PrestaShop:

• Muestra de color — los grupos marcados como grupos de color muestran un círculo, con la textura si existe un archivo de textura para el atributo, o el color hexadecimal en su defecto.
• Lista desplegable — los grupos de tipo «lista desplegable» muestran un menú.
• Botón — los demás grupos muestran botones rectangulares cliqueables.

Con cada cambio de selección, el módulo recalcula la combinación correspondiente y actualiza el precio, el precio tachado, el porcentaje de descuento, la referencia, el stock, la cantidad mínima y las imágenes.

Dos estados visuales señalan los callejones sin salida:

• Atenuado — el atributo, combinado con la selección actual, no corresponde a ninguna combinación existente.
• Sombreado — la combinación existe pero está agotada, y el producto no permite pedidos en rotura de stock.

Stock y cantidad

Se muestran tres estados según la disponibilidad de la combinación seleccionada: en stock, disponible bajo pedido (pedido permitido sin stock) o agotado (el botón de añadir queda desactivado).

El selector de cantidad respeta la cantidad mínima definida en el producto o en la combinación: se inicializa con ese valor e impide bajar de él.

Añadir al carrito

La adición se envía por AJAX al controlador de carrito nativo de PrestaShop. Si tiene éxito, el módulo emite el evento updateCart del framework de front office: el bloque del carrito de la cabecera se actualiza automáticamente, sin recargar.

Los errores devueltos por la tienda —agotado, cantidad mínima no alcanzada, producto no disponible— se muestran en la ventana, bajo el botón.

Los productos con campos de personalización obligatorios no pueden añadirse al carrito desde una ventana: el módulo muestra un mensaje e invita al cliente a abrir la ficha de producto completa.

Compatibilidad con la navegación por facetas

Cuando el cliente aplica un filtro, PrestaShop reemplaza la lista de productos sin recargar la página. El módulo escucha el evento updateProductList y también vigila las modificaciones del documento: sus botones se reinyectan automáticamente en las nuevas miniaturas, sin que usted tenga que intervenir.

Resolución de problemas

No aparece ningún botón en las miniaturas

Compruebe primero que el modo de activación incluye la inyección («Inyectar» o «Ambos»). Luego revise el selector CSS de las miniaturas: abra una página de categoría, inspeccione el contenedor de un producto y confirme que coincide con el selector configurado. Por último, asegúrese de que la miniatura contiene un atributo data-id-product o un enlace a la ficha de producto.

La ventana no se abre al hacer clic en la vista rápida del tema

El modo de activación debe incluir la interceptación («Interceptar» o «Ambos»). Algunos temas usan clases no estándar para su botón: en ese caso, cambie al modo «Inyectar» y oculte el botón nativo de su tema con una regla CSS en su hoja de estilos personalizada.

Los recursos no se cargan en una página concreta

El módulo solo carga sus recursos en las páginas de listado estándar. Si muestra miniaturas de producto en una página CMS o dentro de un módulo de terceros, active la opción Cargar en todas las páginas.

Los cambios de configuración no se ven

Vacíe la caché de PrestaShop (Parámetros avanzados > Rendimiento > Vaciar la caché) y recargue la página forzando la actualización del navegador. Si ha modificado la duración de la caché del cliente, los visitantes ya en sesión conservan sus datos hasta que expiren.

El precio de la ventana no coincide con el del listado

Los precios de la ventana se calculan en el servidor con el mismo método que la ficha de producto, teniendo en cuenta el grupo de clientes, la moneda y los impuestos. Si persiste una diferencia, compruebe que su tema no aplique una visualización de precios personalizada en las miniaturas y vacíe la caché del cliente ajustando temporalmente su duración a 0.

Desinstalación

Desde el gestor de módulos, elija Desinstalar. Se eliminan todas las claves de configuración del módulo. No se ve afectado ningún dato de producto ni de pedido.