Galería de Fotos de Clientes Comprable — Guía completa
Instalación, conexión con Instagram, subida de clientes, moderación y editor de hotspots del módulo Galería de Fotos de Clientes Comprable.
Presentación
Galería de Fotos de Clientes Comprable (dfugcgallery) muestra las fotos reales de sus clientes en la portada y bajo las fichas de producto, con hotspots clicables que enlazan a los productos presentes en cada foto. Las fotos provienen de dos fuentes: la subida por sus clientes conectados (compradores verificados) y la importación de sus publicaciones de Instagram a través de la API oficial. Todo pasa por una cola de moderación en el back office, donde también se colocan los hotspots de producto.
Instalación
- En su back office de PrestaShop, vaya a Módulos → Gestor de módulos → Subir un módulo.
- Seleccione el archivo
dfugcgallery.zipy confirme. - El módulo crea automáticamente sus dos tablas de base de datos, su pestaña de administración Galería UGC (bajo Catálogo) y su carpeta de almacenamiento de imágenes protegida.
- Haga clic en Configurar para abrir los ajustes.
El módulo es compatible con PrestaShop 8.0 a 8.2 y 9.x, PHP 8.0 mínimo. No crea ningún override y solo utiliza hooks nativos: displayHome, displayFooterProduct, displayCustomerAccount y displayHeader.
Configuración
La página de configuración del módulo agrupa todos los ajustes:
- Galería de portada: activación y número máximo de fotos mostradas.
- Galería de ficha de producto: activación y número máximo de fotos mostradas en la franja bajo cada ficha.
- Auto-aprobación: si está activada, las subidas de clientes se publican inmediatamente sin moderación. Las importaciones de Instagram siempre pasan por moderación, independientemente de este ajuste.
- Tamaño máximo por archivo: en megabytes, aplicado a cada foto subida.
- Token de Instagram: el token long-lived que permite importar sus publicaciones (véase la sección siguiente).
Conectar Instagram
La importación utiliza la API oficial «Instagram API with Instagram Login». Es necesaria una configuración única:
- Acceda al portal de desarrolladores de Meta y cree una aplicación de tipo Business.
- Añada el producto Instagram y configure «API setup with Instagram login».
- Vincule la cuenta profesional de Instagram de su tienda.
- Genere un token long-lived con el permiso
instagram_business_basic. - Pegue este token en el campo Token de Instagram de la configuración del módulo y guarde.
El módulo refresca el token automáticamente antes de cada importación. Mientras lance una importación al menos una vez cada 60 días, el token nunca caduca y no tendrá que volver a tocarlo.
Para importar, abra Catálogo → Galería UGC y haga clic en el botón Importar desde Instagram de la barra de herramientas. El módulo recupera sus publicaciones recientes, ignora los duplicados ya importados (deduplicación por identificador de medio), toma la primera imagen de los carruseles y coloca todo en estado «Pendiente». Los vídeos y Reels se ignoran en esta versión.
Subida por sus clientes
Los clientes conectados disponen de un enlace Mis fotos en su área de cliente. La página de envío les permite:
- enviar hasta 5 fotos por envío (jpg, png o webp);
- asociar opcionalmente un producto — la lista solo propone los productos de sus pedidos válidos, lo que garantiza que cada foto etiquetada proviene de un comprador verificado;
- añadir una leyenda;
- consultar el estado de sus fotos (pendiente, aprobada, rechazada) y eliminarlas en cualquier momento.
Una casilla de consentimiento explícito es obligatoria antes de cualquier envío. La eliminación por el cliente borra los archivos del servidor, no solo el registro en base de datos: el módulo está diseñado para el cumplimiento del RGPD.
Moderación
La lista Catálogo → Galería UGC muestra todas las fotos con miniatura, origen (Subida o Instagram), autor, estado y fecha. Puede:
- filtrar por origen y por estado;
- aprobar, rechazar o eliminar cada foto en un clic desde las acciones de fila;
- aplicar estas acciones en masa mediante las casillas de verificación;
- abrir el editor de hotspots mediante la acción Ver.
Solo las fotos aprobadas aparecen en la tienda.
Editor de hotspots
El editor permite asociar productos a ubicaciones precisas en cada foto:
- Busque un producto por nombre, referencia o identificador en el campo de búsqueda.
- Selecciónelo y haga clic en la foto en el lugar deseado para colocar el punto.
- Arrastre y suelte un punto existente para reposicionarlo.
- Elimine un punto desde la lista lateral si es necesario.
- Haga clic en Guardar para almacenar las posiciones.
Las posiciones se guardan en porcentaje del ancho y el alto de la imagen: la representación es idéntica en móvil, tablet y escritorio. En la tienda, cada punto pulsa discretamente y abre al hacer clic una tarjeta de producto con el nombre, el precio actualizado formateado según la divisa del visitante, la imagen de portada y un enlace directo a la ficha.
Cuando un cliente etiqueta un producto al subir, se crea automáticamente un hotspot en el centro de la foto. Solo tiene que moverlo al lugar correcto durante la moderación.
Visualización en la tienda
- Portada: cuadrícula responsive con insignia que indica el número de productos etiquetados por foto y botón de llamada a compartir.
- Ficha de producto: franja horizontal de fotos de clientes vinculadas al producto consultado.
- Lightbox: pantalla completa, navegación por flechas y teclado, hotspots animados, preferencia
prefers-reduced-motionrespetada.
El JavaScript front es vanilla, sin jQuery, y los assets solo se cargan en las páginas afectadas. Las imágenes se recodifican en JPEG en dos tamaños (1600 px y miniatura de 600 px) para preservar el rendimiento.
Solución de problemas
- La importación de Instagram falla: compruebe que el token es un token long-lived válido asociado a una cuenta profesional, y que el permiso de lectura de medios está concedido. Un token caducado (más de 60 días sin importación) debe regenerarse desde el portal de Meta.
- Una foto subida es rechazada al enviarla: compruebe el formato (solo jpg, png, webp) y el tamaño máximo configurado.
- Las fotos no aparecen en la tienda: solo se muestran las fotos con estado «Aprobada»; compruebe también que la galería correspondiente (portada o ficha de producto) está activada en la configuración.
- Multitienda: cada tienda gestiona su propia galería; compruebe el contexto de tienda seleccionado en el back office.
Desinstalación
La desinstalación elimina las tablas del módulo, su pestaña de administración y su configuración. Los archivos de imagen de la carpeta de subida también se retiran con las fotos eliminadas.