Product quick view
La vista rápida abre los detalles del producto en una ventana lightbox - sin salir de la página de categoría ni de los resultados de búsqueda. El cliente puede añadir al carrito de inmediato.
Activación del módulo
Section titled “Activación del módulo”Ve a WooCommerce > Polski > Módulos de tienda y activa la opción Quick View. En las tarjetas de producto aparecerá un icono de ojo o un botón Quick View.
Lightbox
Section titled “Lightbox”La vista rápida se abre en una ventana modal (lightbox) con el fondo atenuado. La ventana es responsiva - en escritorio ocupa alrededor del 70 % del ancho de la pantalla, en dispositivos móviles se extiende a todo el ancho.
Contenido del lightbox:
- Galería de imágenes (lado izquierdo)
- Nombre del producto
- Precio (incluidas las promociones Omnibus)
- Descripción corta
- Selección de variantes (para productos variables)
- Campo de cantidad
- Botón Añadir al carrito
- Enlace Ver detalles completos que lleva a la página del producto
El lightbox se cierra:
- Al hacer clic en el botón X
- Al hacer clic fuera de la ventana (en el overlay)
- Al pulsar la tecla Escape
- Con el botón atrás del navegador (History API)
Compatibilidad con variantes
Section titled “Compatibilidad con variantes”Para los productos variables, la vista rápida muestra menús desplegables de atributos, igual que en la página del producto. Tras seleccionar una variante:
- El precio se actualiza al precio de la variante
- La imagen cambia a la imagen de la variante
- El estado de disponibilidad se actualiza
- El botón Añadir al carrito solo se activa tras seleccionar todos los atributos requeridos
Los datos de las variantes se cargan una sola vez junto con el lightbox - cambiar de variante no genera solicitudes adicionales al servidor.
Galería de imágenes (hasta 4 imágenes)
Section titled “Galería de imágenes (hasta 4 imágenes)”El lightbox muestra hasta 4 imágenes del producto - la imagen principal y hasta 3 imágenes de la galería. Este límite garantiza una carga rápida y una interfaz limpia en la ventana de vista previa.
Navegación por la galería:
- Al hacer clic en las miniaturas bajo la imagen principal
- Flechas izquierda/derecha en la imagen principal
- Deslizamiento en dispositivos táctiles
- Teclas de flecha en el teclado
El límite de imágenes de la galería se puede cambiar con un filtro:
add_filter('polski/quick_view/gallery_limit', function (): int { return 6;});Configuración
Section titled “Configuración”Opciones disponibles en los ajustes del módulo:
| Opción | Descripción | Predeterminado |
|---|---|---|
| Posición del botón | Dónde mostrar el botón en la tarjeta de producto | En la miniatura |
| Tipo de botón | Icono de ojo o texto Quick View | Icono |
| Galería | Cuántas imágenes mostrar en el lightbox | 4 |
| Descripción | Si se muestra la descripción corta | Sí |
| Valoraciones | Si se muestra la valoración con estrellas | Sí |
| Tiempo de entrega | Si se muestra el tiempo de entrega estimado | Sí |
| Animación | Tipo de animación de apertura (fade/slide/zoom) | fade |
Carga de contenido por AJAX
Section titled “Carga de contenido por AJAX”El contenido del lightbox se carga mediante AJAX tras hacer clic en el botón. Durante la carga se muestra un spinner. Los datos del producto se almacenan en caché en el lado del cliente - volver a abrir el mismo producto no genera otra solicitud.
// Cambiar la plantilla del lightboxadd_filter('polski/quick_view/template', function (string $template): string { return get_stylesheet_directory() . '/polski/quick-view-custom.php';});Integración con otros módulos
Section titled “Integración con otros módulos”La vista rápida se integra con otros módulos de Polski for WooCommerce:
- Lista de deseos - botón de corazón visible en el lightbox
- Comparador - botón de comparación visible en el lightbox
- Etiquetas - insignias (rebaja, novedad, más vendido) mostradas sobre la imagen
- Precio Omnibus - precio más bajo de los últimos 30 días visible junto al precio promocional
Accesibilidad
Section titled “Accesibilidad”El lightbox admite la navegación completa por teclado:
- Tab - desplazarse entre los elementos interactivos
- Escape - cerrar la ventana
- Flechas - navegación por la galería
- Focus trap - el foco no sale del lightbox mientras está abierto
- Atributos ARIA:
role="dialog",aria-modal="true",aria-label
Estilos CSS
Section titled “Estilos CSS”Clases CSS del módulo:
.polski-quick-view-overlay- atenuación del fondo.polski-quick-view-modal- ventana del lightbox.polski-quick-view-gallery- galería de imágenes.polski-quick-view-content- contenido del producto.polski-quick-view-close- botón de cierre.polski-quick-view-trigger- botón de apertura en la tarjeta de producto
Rendimiento
Section titled “Rendimiento”El script y los estilos del lightbox se cargan de forma diferida (lazy load) - solo cuando hay al menos un producto con un botón de vista rápida en la página. El código JavaScript pesa alrededor de 8 KB (gzip) y no bloquea el renderizado de la página.
Resolución de problemas
Section titled “Resolución de problemas”El lightbox no se abre - revisa la consola del navegador. La causa más frecuente es un conflicto con otro plugin de lightbox (por ejemplo, WooCommerce Lightbox, FancyBox). Desactiva el lightbox predeterminado de WooCommerce.
Las variantes no se cargan - asegúrate de que el producto variable tenga variantes correctamente configuradas con precios. Las variantes vacías se omiten.
La galería muestra solo 1 imagen - añade imágenes a la galería del producto en el editor de WooCommerce (sección Galería del producto, no solo Imagen del producto).
Informar de problemas: github.com/wppoland/polski/issues