Galleria Foto Clienti Acquistabile — Guida completa

Panoramica

Galleria Foto Clienti Acquistabile (dfugcgallery) mostra le foto reali dei vostri clienti sulla homepage e sotto le schede prodotto, con hotspot cliccabili che rimandano ai prodotti presenti in ogni foto. Le foto provengono da due fonti: il caricamento da parte dei vostri clienti connessi (acquirenti verificati) e l’importazione dei vostri post Instagram tramite l’API ufficiale. Tutto passa per una coda di moderazione nel back office, dove posizionate anche gli hotspot prodotto.

Installazione

1. Nel vostro back office PrestaShop, andate in Moduli → Gestore moduli → Carica un modulo.
2. Selezionate il file dfugcgallery.zip e confermate.
3. Il modulo crea automaticamente le sue due tabelle di database, la sua scheda di amministrazione Galleria UGC (sotto Catalogo) e la sua cartella di archiviazione immagini protetta.
4. Cliccate su Configura per aprire le impostazioni.

Configurazione

La pagina di configurazione del modulo raggruppa tutte le impostazioni:

• Galleria homepage: attivazione e numero massimo di foto visualizzate.
• Galleria scheda prodotto: attivazione e numero massimo di foto visualizzate nella striscia sotto ogni scheda.
• Auto-approvazione: se attivata, i caricamenti dei clienti vengono pubblicati immediatamente senza moderazione. Le importazioni Instagram passano sempre per la moderazione, indipendentemente da questa impostazione.
• Dimensione massima per file: in megabyte, applicata a ogni foto caricata.
• Token Instagram: il token long-lived che permette l’importazione dei vostri post (vedere la sezione seguente).

Collegare Instagram

L’importazione utilizza l’API ufficiale «Instagram API with Instagram Login». È necessaria una configurazione una tantum:

1. Accedete al portale sviluppatori Meta e create un’applicazione di tipo Business.
2. Aggiungete il prodotto Instagram e configurate «API setup with Instagram login».
3. Collegate l’account Instagram professionale del vostro negozio.
4. Generate un token long-lived con il permesso instagram_business_basic.
5. Incollate questo token nel campo Token Instagram della configurazione del modulo e salvate.

Per importare, aprite Catalogo → Galleria UGC e cliccate sul pulsante Importa da Instagram della barra degli strumenti. Il modulo recupera i vostri post recenti, ignora i duplicati già importati (deduplicazione per identificativo del media), prende la prima immagine dei caroselli e mette tutto nello stato «In attesa». I video e i Reels vengono ignorati in questa versione.

Caricamento da parte dei clienti

I clienti connessi dispongono di un link Le mie foto nel loro account. La pagina di invio permette loro di:

• inviare fino a 5 foto per invio (jpg, png o webp);
• associare opzionalmente un prodotto — l’elenco propone solo i prodotti dei loro ordini validi, il che garantisce che ogni foto taggata provenga da un acquirente verificato;
• aggiungere una didascalia;
• consultare lo stato delle loro foto (in attesa, approvata, rifiutata) ed eliminarle in qualsiasi momento.

Moderazione

L’elenco Catalogo → Galleria UGC mostra tutte le foto con miniatura, origine (Caricamento o Instagram), autore, stato e data. Potete:

• filtrare per origine e per stato;
• approvare, rifiutare o eliminare ogni foto in un clic dalle azioni di riga;
• applicare queste azioni in massa tramite le caselle di controllo;
• aprire l’editor di hotspot tramite l’azione Vedi.

Solo le foto approvate appaiono sul negozio.

Editor di hotspot

L’editor permette di associare prodotti a posizioni precise su ogni foto:

1. Cercate un prodotto per nome, riferimento o identificativo nel campo di ricerca.
2. Selezionatelo e cliccate sulla foto nel punto desiderato per posizionare il punto.
3. Trascinate e rilasciate un punto esistente per riposizionarlo.
4. Eliminate un punto dall’elenco laterale se necessario.
5. Cliccate su Salva per memorizzare le posizioni.

Le posizioni vengono salvate in percentuale della larghezza e dell’altezza dell’immagine: la resa è identica su mobile, tablet e desktop. Sul negozio, ogni punto pulsa discretamente e apre al clic una scheda prodotto con il nome, il prezzo aggiornato formattato secondo la valuta del visitatore, l’immagine di copertina e un link diretto alla scheda.

Visualizzazione sul negozio

• Homepage: griglia responsive con badge che indica il numero di prodotti taggati per foto e pulsante di invito alla condivisione.
• Scheda prodotto: striscia orizzontale delle foto clienti collegate al prodotto consultato.
• Lightbox: schermo intero, navigazione con frecce e tastiera, hotspot animati, preferenza prefers-reduced-motion rispettata.

Il JavaScript front-end è vanilla, senza jQuery, e gli asset vengono caricati solo sulle pagine interessate. Le immagini vengono ricodificate in JPEG in due dimensioni (1600 px e miniatura da 600 px) per preservare le prestazioni.

Risoluzione dei problemi

• L’importazione da Instagram fallisce: verificate che il token sia un token long-lived valido associato a un account professionale, e che il permesso di lettura dei media sia concesso. Un token scaduto (più di 60 giorni senza importazione) deve essere rigenerato dal portale Meta.
• Una foto caricata viene rifiutata all’invio: verificate il formato (solo jpg, png, webp) e la dimensione massima configurata.
• Le foto non appaiono sul negozio: vengono visualizzate solo le foto con stato «Approvata»; verificate anche che la galleria interessata (homepage o scheda prodotto) sia attivata nella configurazione.
• Multinegozio: ogni negozio gestisce la propria galleria; verificate il contesto negozio selezionato nel back office.

Disinstallazione

La disinstallazione rimuove le tabelle del modulo, la sua scheda di amministrazione e la sua configurazione. Anche i file immagine della cartella di caricamento vengono rimossi con le foto eliminate.