dfvariantswatch — Muestras de variantes con foto y stock
Instalación, configuración y personalización del módulo de muestras de variantes con foto, vista previa de galería y stock por variante para PrestaShop 8 y 9.
Presentación
dfvariantswatch sustituye los desplegables de combinaciones de las fichas de producto PrestaShop por muestras visuales clicables (fotos, colores o texto), muestra una vista previa de la variante en la galería principal al pasar el cursor, e indica el stock de cada variante directamente en la muestra.
El módulo funciona mejorando los widgets nativos de PrestaShop mediante JavaScript: no sustituye ninguna plantilla del tema, lo que lo mantiene compatible con Classic, Hummingbird y la mayoría de temas premium.
Instalación
- Back office → Módulos → Gestor de módulos → Subir un módulo
- Arrastre el archivo
dfvariantswatch.zipy haga clic en Instalar - Haga clic en Configurar para abrir los ajustes
La instalación crea la tabla df_variant_swatch, la carpeta de imágenes img/dfvariantswatch/ y los valores de configuración por defecto. No se requiere ninguna modificación del tema.
Justo después de instalar, abra una ficha de producto con combinaciones de color: si sus combinaciones tienen fotos, las muestras ya se muestran — es la derivación automática en acción.
Cómo se eligen las muestras
Para cada atributo, el módulo elige la fuente de la muestra en este orden de prioridad:
- Imagen subida en el back office para ese atributo (pestaña Muestras por atributo)
- Código de color hexadecimal definido en el back office
- Imagen derivada automáticamente de la primera combinación que usa ese atributo
- Color nativo de PrestaShop del atributo (campo de color del grupo)
- Chip de texto con el nombre del atributo
La salvaguarda de grupos no diferenciados
La derivación automática solo se conserva cuando las imágenes difieren realmente entre los atributos del grupo, o cuando el grupo está marcado como grupo de colores en PrestaShop. En la práctica: en un producto con un grupo Talla (S, M, L, XL) cuyas combinaciones comparten las mismas fotos, las tallas se quedan en chips de texto en lugar de mostrar cuatro veces la misma foto.
Configuración
Ajustes generales
- Activar el módulo — corta el renderizado front sin desinstalar
- Cambiar galería al pasar el cursor — vista previa de la variante al pasar sobre una muestra
- Mostrar insignia de stock — estado de disponibilidad bajo cada muestra
- Ocultar variantes agotadas — oculta por completo las muestras agotadas en lugar de tacharlas
- Forma — redonda, cuadrada o píldora; Tamaño en píxeles
- Umbral de stock bajo — por debajo, la insignia pasa al estado de stock bajo
- Etiquetas de stock — los tres textos son personalizables y traducibles vía Localización → Traducciones
- Modo de carga de datos — Inline (recomendado) o AJAX, ver más abajo
- Grupos no renderizados como muestras — los grupos seleccionados conservan su widget nativo
Muestras por atributo
Esta pestaña lista todos los grupos de atributos de la tienda. Para cada valor puede subir una imagen (jpg, png, webp o gif, 2 MB máximo, 200 por 200 píxeles recomendado) o introducir un código de color en formato #RRGGBB, previsualizar la muestra actual y eliminar una existente.
Modos de carga de datos
Inline (por defecto, recomendado): los datos de las variantes se incrustan en la página en el momento del renderizado. Ninguna llamada AJAX al cargar, visualización inmediata de las muestras, máxima robustez.
AJAX: los datos se recuperan tras la carga de la página. Reserve este modo para tiendas tras una caché full-page agresiva donde la frescura del stock mostrado prima sobre la velocidad de visualización.
Accesibilidad por teclado
El selector implementa el patrón WAI-ARIA radiogroup: la tecla Tab enfoca la variante seleccionada del grupo (un solo punto de tabulación por grupo), las flechas navegan y seleccionan dentro del grupo con bucle continuo saltando las variantes no disponibles, Espacio o Intro confirma la muestra enfocada. Los estados se anuncian a los lectores de pantalla mediante aria-checked y los tooltips respetan prefers-reduced-motion.
Personalización CSS
Las variables CSS expuestas permiten ajustar la apariencia desde el CSS de su tema hijo sin tocar el módulo:
.dfvs-swatch {
--dfvs-size: 56px; /* tamaño de las muestras */
}
.dfvs-swatch.dfvs-active {
box-shadow: 0 0 0 2px #b8860b; /* anillo de la variante activa */
}Para desactivar la vista previa al pasar el cursor en un producto concreto, añada un elemento con el atributo data-dfvs-disable-hover en la plantilla del producto.
Solución de problemas
Las muestras no aparecen
- Compruebe que el módulo está activado en su configuración
- Abra la consola del navegador: el módulo traza sus pasos con el prefijo
[dfvariantswatch]— verá el número de grupos renderizados o el motivo por el que no se renderizó nada - El producto debe tener combinaciones; un producto simple no muestra nada, es lo esperado
Las tallas se muestran en texto y no en foto
Es el comportamiento esperado de la salvaguarda: los valores del grupo comparten las mismas fotos de combinaciones. Suba imágenes dedicadas por talla en la pestaña Muestras por atributo si desea visuales (por ejemplo pictogramas de tallaje).
El bloque nativo reaparece tras un clic
El módulo vuelve a aplicar la ocultación tras cada actualización AJAX de PrestaShop. Si un tema muy personalizado elude los eventos estándar, contacte con el soporte con la URL de la ficha de producto afectada.
Desinstalación
La desinstalación elimina la tabla del módulo, las imágenes subidas a img/dfvariantswatch/ y todas las claves de configuración. Las fotos de sus combinaciones, por supuesto, no se tocan.