La lista de productos deja de ser un callejón sin salida
Un visitante que recorre una página de categoría se hace una sola pregunta: ¿es este el producto que busco? Responderla cuesta normalmente un clic hacia la ficha del producto y otro para volver — y cada uno de esos viajes de ida y vuelta es una ocasión de perderlo.
Este módulo responde a la pregunta allí donde el visitante ya está. Apunta a una imagen, o hace clic en un pequeño botón de lupa, y una ventana de vista previa se abre sobre el listado: las fotos del producto en un carrusel, su nombre, su precio, su descripción corta y su insignia New (nuevo) o On sale (en oferta). Sin recargar la página y sin nada que instalar en su tema.
Al pasar el cursor o al hacer clic — usted decide
Ponga el disparador al pasar el cursor y la vista previa sigue la atención del visitante sin un solo clic. Póngalo al hacer clic y en su lugar aparece un pequeño botón de lupa sobre la imagen.
El modo clic es riguroso en un punto que importa: un clic normal sobre la imagen sigue abriendo la ficha del producto. Solo el botón de lupa abre la vista previa. A los visitantes que ya saben lo que quieren no se les intercepta nunca.
Dos diseños
El diseño vertical coloca la imagen principal arriba con una tira de miniaturas debajo. El horizontal pone la imagen a la izquierda y los detalles a la derecha. Ambos comparten la misma hoja de estilos y la misma plantilla — cambiar de uno a otro es un ajuste, no otro camino de código.
En el diseño vertical, apuntar a cualquier miniatura cambia la imagen principal al instante. El carrusel automático opcional recorre las fotos con el intervalo que usted elija entre 1000 y 20000 ms, y se pausa mientras el visitante apunta a la imagen, así que nunca le arrebata una foto a quien precisamente la está mirando.
Conviene saberlo antes de elegir: la tira de miniaturas forma parte únicamente del diseño vertical. En el diseño horizontal se llega a las fotos a través del carrusel automático, así que si elige horizontal y desactiva el carrusel, sus visitantes solo verán la primera imagen.
El precio que se muestra es el que se pagaría
Se calcula en el servidor, no se adivina en el navegador. La ventana usa la moneda del visitante, las reglas fiscales que se le aplican y su grupo de clientes — incluido si ese grupo tiene permitido ver precios o no.
Si su tienda funciona en modo catálogo, si el producto tiene los precios desactivados, o si el grupo del visitante no puede ver precios, el bloque de precio sencillamente no se muestra. Usted no tiene que acordarse de desactivarlo.
Insignias que dicen la verdad
La insignia New (nuevo) aparece solo en productos realmente recientes, según el ajuste de su propia tienda de número de días durante los cuales el producto se considera nuevo — de modo que desaparece por sí sola cuando un producto deja de ser nuevo.
On sale (en oferta) depende de la casilla Mostrar el distintivo "¡En oferta!" de la pestaña Precios del propio producto. Deliberadamente no se guía por los descuentos: un producto con precio rebajado no recibe una insignia "On sale" a menos que usted lo haya marcado realmente como en oferta. Esa es justamente la idea — la insignia significa lo que usted dijo que significaba, y no lo que haya hecho un precio específico.
Sobrevive a la búsqueda por facetas y al desplazamiento infinito
Los eventos están delegados, así que las fichas de producto que aparecen después de cargarse la página — filtradas por la búsqueda por facetas, añadidas por el desplazamiento infinito, sustituidas por un módulo de terceros — funcionan de inmediato. No hay ningún paso de reinicialización ni nada que reconectar.
Un solo interruptor para el Quick view de su tema
La mayoría de los temas incluyen su propio botón Quick view, y dos ventanas compitiendo son una mala experiencia. En vez de remitirle a editar su tema, el módulo puede ocultar ese botón por usted con un simple interruptor.
Conoce tanto el marcado de Classic (.quick-view, [data-link-action="quickview"]) como el de Hummingbird (.product-miniature__quickview-button, [data-ps-action="open-quickview"]). Y resuelve el detalle que aquí suele salir mal: el botón vive a menudo dentro de un panel blanco que aparece al pasar el cursor, de modo que ocultar solo el botón deja una franja blanca vacía en la ficha. El módulo mide lo que ese panel contiene realmente — si el Quick view era su único contenido, desaparece el panel entero, y si el panel también alberga muestras de color, esas se siguen viendo.
Dónde aparece, y dónde deliberadamente no
La vista previa se carga en las páginas de inicio, categoría, resultados de búsqueda, marca, proveedor, novedades, más vendidos y rebajas — y también en la ficha del producto, para que los bloques Productos de la misma categoría y Productos vistos la tengan igualmente.
El proceso de compra no se toca nunca. Allí no se carga absolutamente nada.
Los móviles conservan su comportamiento normal
Pasar el cursor no existe en una pantalla táctil, y una ventana de vista previa peleándose con un toque es peor que no tener vista previa. Fije un ancho mínimo de pantalla — 432 px por defecto — y por debajo de ese valor el módulo se desactiva por completo, dejando a sus visitantes de móvil el comportamiento simple y rápido que esperan.
La versión 3 sustituyó dos puntos de acceso realmente inseguros
Esto merece decirse con claridad.
La versión 2.x incluía archivos ajax/*.php independientes que arrancaban el núcleo de PrestaShop a mano y estaban protegidos por un token codificado en el código — el mismo valor en todas las instalaciones del planeta. Cualquiera que hubiera leído el módulo una vez conocía el token de todas las tiendas que lo usaban.
La versión 3 los sustituye por un controlador de front office de PrestaShop de verdad, protegido por un token específico de la tienda y comparado con hash_equals(). El controlador valida el identificador del producto y sirve únicamente productos activos, visibles en el catálogo y pertenecientes a la tienda actual. Todo lo demás recibe un 404 o un 403.
Qué más corrigió la versión 3
La versión 2.x cargaba jquery-1.11.0.min.js desde una ruta que no existe en PrestaShop 1.7 ni posteriores, lo que rompía la ventana en silencio en muchas tiendas. También incluía dieciséis archivos jQuery por versión, cada uno con su propia implementación SHA-1 de 130 líneas. Todo eso ha desaparecido: el front office se apoya ahora en un único archivo JavaScript vanilla, sin dependencias.
El viejo apaño de la cookie web_url también se ha ido — la configuración llega ahora al archivo JavaScript mediante Media::addJsDef.
Las URL amigables ya no importan. El producto se identifica por el atributo data-id-product de su propia ficha, con una URL como alternativa, en lugar de analizar direcciones reescritas.
Los formatos de imagen se detectan, no se codifican a mano. La ventana elige los formatos adecuados en sus Diseño → Ajustes de imágenes en vez de suponer nombres que cambian de una versión de PrestaShop a otra, así que los temas personalizados con tipos de imagen renombrados siguen funcionando.
La versión 3.0.2 la hizo funcionar en Hummingbird
Merece mencionarse porque el problema era invisible más que ruidoso. Hummingbird genera el enlace de la miniatura como .product-miniature__image-link, donde Classic usa .product-thumbnail / a.thumbnail. Esa clase no estaba en el selector de disparo, así que en Hummingbird no se abría absolutamente nada — y el botón Quick view del propio tema seguía a la vista, porque ninguno de sus nombres de clase coincidía tampoco con las reglas de ocultación. Ahora ambos se reconocen junto al marcado de Classic, y el CSS y el JavaScript del front office llevan la versión del módulo en su URL, de modo que la corrección llega a los visitantes que vuelven sin que nadie tenga que vaciar una caché.
La página de configuración se revisa a sí misma
Cada vez que la abre, el módulo ejecuta cuatro comprobaciones — Módulo activado, Hook de front office, Formatos de imagen de producto y Solicitudes seguras — y le muestra el resultado de cada una. Cuando la vista previa no aparece, ese panel suele decirle por qué antes de que empiece a hacer conjeturas. Los archivos que hayan quedado de versiones anteriores a la 3.0.0 también se limpian automáticamente.
Compatibilidad
PrestaShop 1.7 a 9, en ocho idiomas: alemán, español, francés, inglés, italiano, neerlandés, polaco y turco.
Sin overrides, sin modificar el núcleo ni el tema, y sin jQuery. La actualización desde una versión 2.x es automática: sus ajustes se conservan, las opciones nuevas reciben valores por defecto sensatos y los archivos obsoletos se eliminan por usted.
Preguntas frecuentes
¿Un clic normal sigue abriendo la ficha del producto?
Sí. En modo clic, solo el pequeño botón de lupa abre la vista previa — hacer clic en la imagen se comporta exactamente igual que siempre. En modo cursor, nada intercepta los clics.
¿El precio de la ventana coincidirá con lo que el cliente paga realmente?
Sí. Se calcula en el servidor usando su moneda, las reglas fiscales que se le aplican y su grupo de clientes. En modo catálogo, o para un grupo que no puede ver precios, el bloque de precio no se muestra en absoluto.
¿Sigue funcionando cuando filtro una categoría con la búsqueda por facetas?
Sí. Los eventos están delegados, así que las fichas regeneradas por la búsqueda por facetas o el desplazamiento infinito siguen funcionando sin ninguna reinicialización.
¿Mi tema ya tiene un botón Quick view — acabaré con dos ventanas?
No, si deja activada la opción Ocultar el botón de vista rápida del tema. Cubre tanto el marcado de Classic como el de Hummingbird, y retira el panel que lo rodea solo cuando el Quick view era su único contenido, de modo que no se pierden las muestras de color.
¿Funciona en móviles?
Por diseño se desactiva por debajo del ancho de pantalla que usted fije — 432 px por defecto — porque pasar el cursor no existe en las pantallas táctiles. Sus visitantes de móvil conservan el comportamiento normal.
¿Mi producto con descuento no muestra la insignia "On sale" — por qué?
Porque un descuento y el distintivo en oferta son dos cosas distintas. La insignia depende de la casilla Mostrar el distintivo "¡En oferta!" de la pestaña Precios del producto, no de sus precios específicos. Marque esa casilla y la insignia aparecerá. La insignia New (nuevo) es automática y sigue el ajuste de su tienda de "número de días en que un producto se considera nuevo".
¿Ralentiza mis páginas de producto?
El HTML de la ventana se solicita solo cuando un visitante abre realmente una vista previa, y la respuesta se guarda en caché privada durante un minuto. La página en sí carga una hoja de estilos pequeña y un archivo JavaScript vanilla pequeño, y nada en absoluto en el proceso de compra.
¿Voy a actualizar desde la 2.x — tengo que hacer algo?
No. La actualización conserva sus ajustes existentes, da valores por defecto sensatos a las opciones nuevas y elimina por sí sola los antiguos archivos AJAX independientes y los recursos propios de cada versión.
¿Modifica mi tema o sobrescribe archivos del núcleo?
No. Un hook de visualización y un controlador de front office, nada más.
Comentarios (2)
Su agradecimiento a la reseña no pudo ser enviado
Reportar comentario
Reporte enviado
Su reporte no pudo ser enviado