Listati Prodotti
Mostra un indicatore video, un pulsante o un player incorporato su ogni scheda prodotto nelle pagine categoria, nei risultati di ricerca e in qualsiasi altra griglia prodotti — senza che il cliente debba visitare la pagina prodotto.
Disponibile dalla v3.0.0
Panoramica
La funzionalità Listati Prodotti integra la riproduzione video nelle griglie prodotto. Quando a un prodotto è associato un video, i clienti possono guardarlo senza mai lasciare la pagina dell'elenco. Funziona sulle pagine categoria, nei risultati di ricerca, nei prodotti più venduti, nelle novità e in qualsiasi modulo di listing di terze parti che configuri.
Sono disponibili tre modalità di visualizzazione, impostabili separatamente per desktop e mobile:
- Icona Anteprima + Popup Video — un'icona play si sovrappone all'immagine del prodotto; passandoci sopra o cliccando si apre il video in un popup.
- Pulsante Cliccabile + Popup — un pulsante "Guarda Video" appare sulla scheda prodotto; cliccandolo si apre il popup.
- Sostituisci Immagine con Video — l'immagine del prodotto viene sostituita da un player video incorporato direttamente nella scheda.
Tutte le modalità sono gestite tramite selettori CSS, così il modulo si adatta a qualsiasi struttura di tema. Il modulo carica i dati video per tutti i prodotti della pagina con una singola query al database, mantenendo l'impatto sulle prestazioni minimo.
Configurazione
Vai su Moduli > Gestione Moduli > Product Video > Configura, quindi apri la scheda Listati Prodotti.
Abilitazione
| Impostazione | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Abilita / disabilita questa funzionalit à | On / Off | Off | Interruttore principale. Nulla appare nelle pagine elenco finché è disattivato. |
Selettori
Indicano al modulo come è strutturata la griglia prodotti del tuo tema. I valori predefiniti corrispondono al tema Classic di PrestaShop. I temi personalizzati o di terze parti richiedono quasi sempre delle modifiche qui.
| Impostazione | Valori | Predefinito (PS 1.7+) | Descrizione |
|---|---|---|---|
| Selettore Lista Prodotti | Selettore jQuery | #products article | Individua ogni singola scheda prodotto nella griglia. |
| Selettore Immagine | Selettore jQuery | .thumbnail-container | Individua l'area immagine all'interno di ogni scheda prodotto dove verrà iniettata l'icona o il video. |
| Selettore Filtro Personalizzato | Selettore jQuery | — | Se usi un modulo di filtro (es. Ricerca Sfaccettata), inserisci il selettore wrapper univoco di quel modulo. Il modulo riapplica l'iniezione video dopo che l'elenco si aggiorna tramite AJAX. |
| Controller Personalizzati | Nomi controller separati da virgola | — | Aggiungi i nomi dei controller per i moduli di listing di terze parti in cui vuoi che i video appaiano (es. BestSales,NewProducts). |
| Carica Font FontAwesome | On / Off | Off | Forza il caricamento del font di icone FontAwesome. Abilitalo se le icone play non sono visibili e il tuo tema non include già FontAwesome. |
Per trovare il selettore corretto per il tuo tema, apri una pagina categoria nel browser, fai clic destro su una scheda prodotto e usa l'ispettore degli elementi del browser per identificare le classi CSS pertinenti.
Modalità di Visualizzazione
Imposta la modalità separatamente per desktop e per mobile. Dopo aver selezionato una modalità, scorri verso il basso per configurare le opzioni specifiche di quella modalità.
Desktop (PV_LISTINGS_DESK):
| Opzione | Descrizione |
|---|---|
| Icona Anteprima + Popup Video (predefinito) | L'icona play si sovrappone all'immagine del prodotto. Passandoci sopra appare il popup; cliccando si apre. |
| Pulsante Cliccabile + Popup | Un pulsante "Guarda Video" appare su ogni scheda con video abilitato. |
| Sostituisci Immagine con Video | L'immagine del prodotto viene sostituita da un video incorporato nella scheda. |
Mobile (PV_LISTINGS_MOBILE):
| Opzione | Descrizione |
|---|---|
| Pulsante Cliccabile + Popup (predefinito) | Un pulsante appare su ogni scheda con video abilitato. |
| Sostituisci Immagine con Video | L'immagine del prodotto viene sostituita da un video incorporato. |
La modalità Icona Anteprima + Popup Video non è disponibile per mobile perché gli eventi hover non sono affidabili sui dispositivi touch.
Opzioni Icona Anteprima
Queste impostazioni si applicano quando la modalità desktop è Icona Anteprima + Popup Video.
| Impostazione | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Icona da mostrare | play, play-circle, play-circle-o, video-camera, eye, flash, info | play | L'icona FontAwesome visualizzata sull'immagine del prodotto. |
| Posizione Icona | Centrata verticalmente, In alto a sinistra, In alto a destra, In basso a destra, In basso a sinistra | Centrata verticalmente | Dove appare l'icona sull'immagine del prodotto. |
| Dimensione Icona | Pixel | 40 | Dimensione dell'icona quando si usa la posizione Centrata verticalmente. |
| Opacità Icona | 0–100 | 60 | Trasparenza dell'icona. 0 è invisibile; 100 è completamente opaco. |
| Sfondo Icona | Triangolo, Circolare | Triangolo | Forma dello sfondo dietro l'icona quando si usa una posizione angolare. |
| Abilita controlli nei video | On / Off | Off | Mostra i controlli di riproduzione nel player popup (si applica solo alla modalità Icona Anteprima). |
| Forza pulsante di chiusura nelle anteprime video | On / Off | Off | Per impostazione predefinita, il popup si chiude quando il mouse lascia la scheda. Abilitalo per mostrare un pulsante esplicito × di chiusura. |
Opzioni Pulsante Cliccabile
Queste impostazioni si applicano quando la modalità è Pulsante Cliccabile + Popup su desktop o mobile.
| Impostazione | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Posizione Pulsante | Posizione hook, Anteprima, Titolo, Prezzo, Pulsante vista rapida | Posizione hook | Dove appare il pulsante sulla scheda prodotto. Le opzioni diverse da Posizione hook possono avere compatibilità limitata a seconda della struttura del tuo tema. |
| Posizionamento Avanzato | Selettore jQuery | — | Sovrascrive la Posizione Pulsante con un selettore personalizzato se nessuna delle opzioni predefinite corrisponde al layout del tuo tema. |
| Metodo di Inserimento | Prima, All'inizio, Alla fine, Dopo | Prima | Controlla se il pulsante viene posizionato prima, dentro (inizio), dentro (fine) o dopo l'elemento di destinazione. |
| Classe pulsante | Classi CSS (separate da spazio) | — | Classi CSS personalizzate per l'elemento pulsante. Lascia vuoto per usare lo stile predefinito btn btn-default. |
| Mostra icona con il pulsante | Nessuna, Prima del Testo, Dopo il Testo | Prima del Testo | Se un'icona appare accanto all'etichetta del pulsante e su quale lato. |
| Scegli l'icona | Stesso set di icone dell'Icona Anteprima | play | L'icona visualizzata all'interno del pulsante. |
| Abilita controlli nei video | On / Off | Off | Mostra i controlli di riproduzione nel popup per la modalità pulsante. Può causare problemi se Forza pulsante di chiusura è disabilitato. |
| Avvio automatico all'apertura del popup | On / Off | Off | Avvia la riproduzione del video non appena il cliente apre il popup. |
Le opzioni di Posizione Pulsante diverse da Posizione hook sono parzialmente implementate. Per un posizionamento affidabile su tutti i temi, usa Posizione hook e perfeziona con Posizionamento Avanzato se devi spostare il pulsante.
Opzioni Sostituisci Immagine
Queste impostazioni si applicano quando la modalità è Sostituisci Immagine con Video su desktop o mobile.
| Impostazione | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Colore di sfondo | Selettore colore | #FFFFFF | Colore di sfondo mostrato dietro l'iframe video se il video non riempie completamente l'area della scheda. |
| Riproduzione Automatica Video | Nessuna, Quando si passa sul Prodotto, Sempre | Nessuna | Quando avviare la riproduzione automatica. Sempre forza il muto su tutti i video. Sempre potrebbe non funzionare sui browser mobile. |
| Riproduzione Automatica Silenziosa | On / Off | On | Riproduce senza audio durante l'avvio automatico. Richiesto dalla maggior parte dei browser affinché l'autoplay funzioni. |
| Riproduzione in loop | On / Off | On | Riavvia il video quando finisce. |
| Abilita clic per aprire | On / Off | On | Cliccando il video incorporato il cliente viene reindirizzato alla pagina prodotto. Disabilitalo se vuoi che i clienti interagiscano direttamente con il player. Non si applica ai provider iframe personalizzati. |
| Mostra Controlli | On / Off | Off | Mostra i controlli nativi del player video all'interno della scheda. |
Come Funziona
Quando la funzionalità Listati Prodotti è abilitata, il modulo carica tutti i dati video per i prodotti visualizzati sulla pagina con una singola query e li passa al JavaScript front-end.
Al caricamento della pagina, il JavaScript scansiona la griglia prodotti usando il Selettore Lista Prodotti, identifica l'area immagine di ogni scheda con il Selettore Immagine, quindi inietta l'icona sovrapposta, il pulsante "Guarda Video" o il video incorporato — a seconda della modalità selezionata e se il visitatore è su desktop o mobile.
Quando un cliente filtra o ordina i prodotti (tramite Ricerca Sfaccettata o un altro modulo filtro che aggiorna l'elenco via AJAX), il modulo rileva l'aggiornamento usando il Selettore Filtro Personalizzato e riapplica l'iniezione video al nuovo set di schede prodotto.
Modalità Icona Popup (desktop)
Il JavaScript aggiunge un'icona play sopra l'immagine del prodotto. Al passaggio del mouse appare un player popup sopra la scheda e il video si carica. Il popup si chiude quando il mouse lascia la scheda, a meno che Forza pulsante di chiusura non sia abilitato — in tal caso il cliente deve cliccare × per chiuderlo.
Modalità Pulsante (desktop e mobile)
Il pulsante viene posizionato su ogni scheda prodotto a cui è assegnato un video. Cliccando il pulsante si apre un popup. Se Avvio automatico all'apertura del popup è abilitato, il video parte automaticamente. Il pulsante non appare sui prodotti senza video.
Modalità Sostituisci Immagine (desktop e mobile)
Per ogni scheda prodotto che ha un video, l'immagine del prodotto viene sostituita da un player video incorporato. I clienti non devono cliccare nulla per vedere il video. Se Riproduzione Automatica Video è impostato su Quando si passa sul Prodotto, il video inizia a riprodursi non appena il cursore entra nella scheda (su desktop); su mobile, questo trigger al passaggio del mouse non è disponibile e il cliente deve interagire direttamente con il player.
Esempi d'Uso
Esempio: Pagina categoria con icone di anteprima al passaggio del mouse
Gestisci un negozio di arredamento e vuoi che i clienti vedano brevi video prodotto senza lasciare la pagina categoria. Abilita la funzionalità, mantieni la modalità desktop su Icona Anteprima + Popup Video, imposta Opacità Icona a 80 e Posizione Icona su Centrata verticalmente. Attiva Forza pulsante di chiusura in modo che i clienti possano controllare quando il popup si chiude. Su mobile, mantieni il Pulsante Cliccabile + Popup predefinito per un'esperienza pulita su schermi piccoli.
Esempio: Video incorporati con avvio automatico in un negozio di moda
Vendi abbigliamento e vuoi che i video partano automaticamente mentre i clienti navigano. Abilita la funzionalità, imposta la modalità desktop su Sostituisci Immagine con Video, imposta Riproduzione Automatica Video su Quando si passa sul Prodotto e abilita Riproduzione Automatica Silenziosa. Abilita Riproduzione in loop in modo che i brevi clip si ripetano senza interruzioni. Mantieni Abilita clic per aprire attivo in modo che cliccando si vada comunque alla pagina prodotto.
Esempio: Integrazione con un modulo di listing di terze parti
Usi un modulo "Prodotti in Evidenza" con un proprio controller chiamato FeaturedProducts. I video non appaiono nell'output di quel modulo. Vai al campo Controller Personalizzati e aggiungi FeaturedProducts. Salva. I video appariranno ora nelle pagine elenco di quel controller.
Note Importanti
- La funzionalità mostra i video solo sulle schede prodotto a cui è stato assegnato un video. Le schede senza video non vengono modificate.
- Su PS 1.6, il Selettore Lista Prodotti predefinito è
.product-list > lie il Selettore Immagine è.left-block. Questi valori sono precompilati correttamente per le installazioni PS 1.6. - Il campo Controller Personalizzati richiede il nome tecnico del controller (il nome della classe PHP senza il suffisso
Controller), non il nome visualizzato del modulo. - Riproduzione Automatica Video: Sempre forza automaticamente il muto ed è esplicitamente indicata come "non consigliata" nel Back Office perché la maggior parte dei browser mobile la blocca comunque.
- Multi-shop: tutte le impostazioni dei Listati Prodotti vengono salvate per negozio. Puoi configurare modalità di visualizzazione diverse per negozi diversi in una configurazione multi-shop.
- L'impostazione Carica Font FontAwesome è stata rinominata da
PV_LISTINGS_LOAD_FAnelle versioni precedenti aPV_LIST_LOAD_FAnella 3.0.0. Se aggiorni da una versione precedente alla 3.0.0, il valore viene migrato automaticamente.
Risoluzione dei Problemi
| Problema | Soluzione |
|---|---|
| Le icone play sono invisibili o appaiono come rettangoli | Abilita Carica Font FontAwesome nella sezione Selettori. Il tuo tema non sta caricando la libreria di icone FontAwesome. |
| I video appaiono nella posizione sbagliata su un tema personalizzato | Apri una pagina categoria nel browser, ispeziona un elemento scheda prodotto e aggiorna Selettore Lista Prodotti e Selettore Immagine per corrispondere alle classi CSS effettive del tuo tema. |
| I video scompaiono dopo aver applicato un filtro | Aggiungi il selettore wrapper univoco del tuo modulo filtro al Selettore Filtro Personalizzato (es. .faceted-overlay per la Ricerca Sfaccettata). |
| I video non appaiono su una pagina di listing di terze parti | Aggiungi il nome del controller di quel modulo a Controller Personalizzati (es. BestSales,NewProducts). |
| L'avvio automatico non funziona su mobile | I browser mobile bloccano l'autoplay con audio. Abilita Riproduzione Automatica Silenziosa, oppure evita del tutto l'autoplay per mobile mantenendo la modalità mobile su Pulsante Cliccabile + Popup. |
| Il pulsante "Guarda Video" appare nel posto sbagliato | Le opzioni predefinite di Posizione Pulsante hanno compatibilità limitata con i temi. Usa Posizionamento Avanzato con un selettore jQuery personalizzato per individuare l'elemento esatto nel tuo tema e imposta il Metodo di Inserimento in base a dove vuoi che il pulsante venga posizionato. |
| I controlli popup del pulsante causano problemi | Se abiliti Abilita controlli nei video in modalità pulsante ma lasci Forza pulsante di chiusura disattivato, il popup potrebbe essere difficile da chiudere. Abilita Forza pulsante di chiusura oppure disabilita Abilita controlli nei video. |
Domande Frequenti
Il video appare su ogni scheda prodotto o solo sui prodotti a cui è stato assegnato un video?
Sono interessate solo le schede dei prodotti a cui è stato assegnato un video. Le schede prodotto senza video rimangono completamente invariate.
Posso usare una modalità di visualizzazione diversa per desktop e mobile?
Sì. Desktop e mobile vengono configurati separatamente. Una configurazione comune è Icona Anteprima + Popup Video per desktop e Pulsante Cliccabile + Popup per mobile.
Il mio tema non è PrestaShop Classic. Funzionerà questa funzionalità?
Sì, ma probabilmente dovrai modificare i campi Selettore Lista Prodotti e Selettore Immagine per corrispondere alla struttura CSS del tuo tema. Usa l'ispettore degli elementi del browser su una pagina categoria per trovare i selettori corretti.
Perché l'avvio automatico non funziona sul mio dispositivo mobile?
I browser mobile (iOS Safari, Android Chrome) applicano una policy che blocca l'autoplay con audio. Abilita Riproduzione Automatica Silenziosa in modo che il video possa partire silenziosamente, oppure evita l'opzione Sempre per mobile e usa invece la modalità Pulsante Cliccabile + Popup.
Posso mostrare video di un modulo di listing di terze parti sullo stesso sito?
Sì. Aggiungi il nome tecnico del controller di quel modulo al campo Controller Personalizzati. Il modulo inietterà quindi i video nelle griglie prodotto visualizzate da quel controller.
L'opzione Avvio Automatico all'Apertura del Popup funziona per tutti i provider video?
Questa opzione è disponibile per la modalità pulsante e funziona per YouTube e Vimeo. Il supporto può variare per i provider basati su iframe personalizzati a seconda dei loro parametri di embed.
Cosa succede se imposto Abilita clic per aprire su Off in modalità Sostituisci Immagine?
Cliccando il video non si viene più reindirizzati alla pagina prodotto. I clienti possono interagire direttamente con il player video — mettere in pausa, avanzare, regolare il volume. Nota che questo non funziona per i provider iframe personalizzati.
Questa funzionalità rallenterà le mie pagine categoria?
No. Il modulo recupera tutti i dati video per ogni prodotto sulla pagina con una singola query al database, non una query per prodotto. L'impatto sul tempo di caricamento della pagina è minimo.
Funzionalità Correlate
- Posizionamento Galleria Immagini — Video incorporati nella galleria immagini della pagina prodotto
- Video Categoria — Aggiungi un video banner all'intestazione della pagina categoria
- Pannello Laterale — Mostra un video in un pannello flottante accanto all'immagine del prodotto