Compatibilità con il Tema
Indica al modulo esattamente dove si trovano gli elementi della galleria immagini del tuo tema, in modo che i video appaiano nel posto giusto e vengano riprodotti correttamente accanto allo slider del tema.
Disponibile dalla v3.0.0
Panoramica
Product Video funziona immediatamente con il tema Classic predefinito di PrestaShop. Quando si utilizza un tema personalizzato o di terze parti, il modulo potrebbe non trovare la galleria immagini, la striscia delle miniature o il contenitore dell'immagine principale, poiché quei temi usano nomi di classi CSS e strutture HTML differenti. La sezione Compatibilità con il Tema è il punto in cui si descrive la struttura del proprio tema al modulo.
Visita questa sezione se i video non appaiono nella galleria immagini, le miniature sono posizionate in modo errato, i video non si caricano cliccando su una miniatura, oppure il video è in conflitto con lo slider immagini del tema. La maggior parte dei problemi si risolve selezionando il Preset Tema corretto e, se necessario, affinando alcuni selettori individuali.
La sezione è suddivisa in sottosezioni: Selettori Principali (i tre selettori essenziali), Configurazione Slider (per i temi che utilizzano una libreria slider per la galleria), Markup Miniature e Immagini (modifiche alla struttura HTML), Debug e Altre Opzioni (impostazioni di temporizzazione, interazione e casi limite).
Configurazione
Vai su Moduli > Gestore moduli > Product Video > Configura, quindi clicca sulla scheda Compatibilità con il Tema.
Preset Tema
Seleziona la versione di PrestaShop per compilare automaticamente tutti i campi dei selettori principali con i valori corretti per il tema predefinito di quella versione. Dopo aver selezionato un preset, rivedi i valori inseriti e clicca Salva.
| Opzione | Descrizione |
|---|---|
| Personalizzato (manuale) | Tutti i campi dei selettori rimangono invariati; li compili tu stesso |
| PrestaShop 1.6 | Compila i selettori per il tema predefinito di PS 1.6 |
| PrestaShop 1.7 Classic | Compila i selettori per il tema Classic di PS 1.7 |
| PrestaShop 8 | Compila i selettori per il tema predefinito di PS 8 |
| PrestaShop 9 | Compila i selettori per il tema predefinito di PS 9 |
Inizia da qui. Seleziona il preset per la tua versione di PS, salva e verifica su una pagina prodotto prima di modificare qualsiasi altra cosa. Questo risolve la maggior parte dei problemi di integrazione con il tema senza ulteriori configurazioni.
Selettori Principali
Questi tre selettori sono i più critici. Se i video non appaiono affatto nella galleria immagini, questi sono i primi campi da controllare.
| Campo | Predefinito PS 1.6 | Predefinito PS 1.7 / 8 / 9 | Descrizione |
|---|---|---|---|
| Immagine principale prodotto | #bigpic | .product-cover:eq(0) img:eq(0) | Selettore per l'elemento <img> della foto principale del prodotto. L'iframe video sostituisce questa immagine. |
| Contenitore immagine principale / Segnaposto Video | #view_full_size | .product-cover:eq(0) | Selettore per il contenitore attorno all'immagine principale. L'embed video viene dimensionato e posizionato all'interno di questo elemento. |
| Selettore per il Contenitore delle Miniature | #thumbs_list_frame | .product-images:eq(0) | Selettore per l'elemento <ul> o wrapper che contiene tutte le miniature delle immagini del prodotto. Le miniature video vengono inserite in questo contenitore. |
Tutti i selettori usano la sintassi jQuery standard: .nomeclasse per le classi, #id per gli ID, :eq(0) per selezionare il primo risultato sulla pagina. Apri gli strumenti di sviluppo del browser (F12, scheda Inspector) su qualsiasi pagina prodotto per trovare i selettori corretti per il tuo tema.
Impostazioni Lista e Interazione
| Campo | Opzioni | Predefinito | Descrizione |
|---|---|---|---|
| Tipo di lista | li, div, a | li | L'elemento HTML usato per ogni miniatura nella lista delle miniature del tema. |
| Tipo di comportamento al clic | mousedown, mouseup, click, tap | mousedown | L'evento jQuery usato per rilevare i clic sulle miniature. Modificalo se le miniature non rispondono, o rispondono solo al secondo clic. |
Configurazione Slider
Se il tuo tema utilizza una libreria slider per la galleria prodotti, devi indicare al modulo quale libreria viene usata affinché possa inserire le miniature video nello slider correttamente.
| Campo | Opzioni / Note | Predefinito | Descrizione |
|---|---|---|---|
| Slider immagini personalizzato | Slick Slider, BX Slider, Owl Carousel (pre-2.0), Owl Carrousel, Swiper Slider, Flickity Carousel, Light Slider, Bootstrap 5 Carousel | Nessuno | Seleziona la libreria slider del tuo tema. |
| Selettore per il contenitore delle miniature dello slider | Selettore jQuery | — | L'elemento che racchiude la traccia delle miniature all'interno dello slider. Esempio: per Swiper, punta all'elemento con la classe .swiper-container. |
| Selettore per lo slider dell'immagine principale | Selettore jQuery | — | L'elemento slider che racchiude l'immagine principale del prodotto. Compilalo se il tuo tema costruisce uno slider per l'area dell'immagine principale. |
| HTML dello slider dell'immagine principale (prima) | HTML grezzo | — | HTML inserito prima di ogni slide immagine. Usalo se la tua libreria slider richiede un tag wrapper specifico per ogni slide. |
| HTML dello slider dell'immagine principale (dopo) | HTML grezzo | — | HTML inserito dopo ogni slide immagine. |
| Sincronizza slider miniature e immagini | Abilitato / Disabilitato | Disabilitato | Abilita solo se lo slider delle miniature e lo slider dell'immagine principale del tema sono sincronizzati. |
| Aggiorna slider dopo l'aggiunta degli elementi | Abilitato / Disabilitato | Disabilitato | Forza la reinizializzazione dello slider dopo che le miniature video vengono inserite. Abilita se si usa Slick Slider o Owl Carousel v2 e le miniature video non sono visibili. |
Markup Miniature e Immagini
Usa questi campi quando il tuo tema racchiude le miniature in HTML specifico che il modulo deve replicare attorno alle miniature video che inserisce.
| Campo | Predefinito | Descrizione |
|---|---|---|
| Classi aggiuntive per gli elementi miniatura | — | Classi CSS aggiunte a ogni miniatura video inserita. Separa più classi con spazi. |
| Prima della miniatura | — | HTML grezzo inserito prima di ogni elemento miniatura. |
| Dopo la miniatura | — | HTML grezzo inserito dopo ogni elemento miniatura. |
Link miniatura <a> | Disabilitato | Abilita se il tuo tema racchiude ogni miniatura in un tag <a>. Il modulo genererà un wrapper link corrispondente attorno alla miniatura video. |
Classi aggiuntive per il tag link <a> | — | Classi CSS per l'elemento link generato. Separate da spazi. |
| Classe aggiuntiva per il tag IMG | — | Classe CSS aggiunta all'elemento <img> della miniatura video. |
Debug
| Campo | Predefinito | Descrizione |
|---|---|---|
| Debug generazione video nella console del browser | Disabilitato | Genera log dettagliati di inizializzazione e inserimento nella console del browser. Usalo per diagnosticare problemi di integrazione. Disabilita in produzione. |
Altre Opzioni
Queste impostazioni gestiscono casi limite specifici di determinati temi. Lasciale ai valori predefiniti a meno che tu non abbia un problema specifico che sono destinate a risolvere.
| Campo | Predefinito | Descrizione |
|---|---|---|
| Ritardo di caricamento | 0 ms | Millisecondi da attendere prima che il modulo si inizializzi. Aumenta questo valore con temi JavaScript pesanti che terminano il rendering dopo l'evento DOM-ready standard. |
| Ritardo di aggiornamento AJAX / cambio combinazione | 0 ms | Millisecondi da attendere prima di reinserire i video dopo un cambio combinazione o un aggiornamento AJAX del prodotto. |
| Ritardo iniziale cambio combinazione | 0 ms | Ritardo aggiuntivo prima del reinserimento del video dopo un cambio combinazione. Lascia a 0 — il controllo di disponibilità dello slider gestisce automaticamente la temporizzazione. |
| Direzione delle miniature | Orizzontale | Se il tema visualizza le miniature in una striscia orizzontale o verticale. |
| Z-index dell'embed video | 1 | Z-index CSS per l'elemento video incorporato. Aumenta se il video appare dietro altri elementi della pagina, come un'intestazione fissa. |
| Fancy Box | Abilitato | Apre i video in un lightbox FancyBox quando si clicca su una miniatura. Disabilita se il tuo tema ha il proprio lightbox e si verifica un conflitto. |
| Elementi da nascondere / visualizzare | — | Selettori jQuery separati da virgola per gli elementi della pagina da nascondere mentre un video è in riproduzione. Riappaiono quando il cliente torna a un'immagine normale del prodotto. |
| Usa l'elemento selezionato più profondo | Disabilitato | Forza il modulo a selezionare l'elemento più profondo all'interno del selettore (tipicamente <img>). Abilita se i video si attivano in modo incoerente o non scompaiono quando si torna a un'immagine. |
| Disabilita il calcolo della dimensione delle miniature | Disabilitato | Impedisce al modulo di ridimensionare il contenitore delle miniature dopo l'inserimento delle miniature video. Abilita se le miniature spostano i contenuti della pagina. |
| Disabilita nascondi immagine principale | Disabilitato | Impedisce al modulo di nascondere l'immagine principale del prodotto quando viene caricato un video. Usalo per temi con slider che mostrano più immagini contemporaneamente. |
| Disabilita sostituzione immagine principale | Disabilitato | Impedisce al modulo di sostituire il contenuto dell'elemento immagine principale. Usalo per temi con slider. |
| Nascondi contenitore immagine | Disabilitato | Nasconde l'intero contenitore dell'immagine principale quando viene caricato un video, invece di nascondere solo l'immagine al suo interno. Usalo per temi con slider. |
| Larghezza aggiuntiva lista miniature | 0 | Pixel aggiuntivi aggiunti alla larghezza del contenitore delle miniature. Usalo se la miniatura video inserita esce dalla striscia. Imposta a 0 per disabilitare. |
| Disabilita l'uso delle miniature | Disabilitato | Bypassa completamente l'inserimento delle miniature. Usalo per temi con una visualizzazione griglia di grandi immagini che non usa una striscia di miniature. |
| Disabilita il padding nell'embed | Disabilitato | Rimuove il wrapper di padding responsivo dall'embed video. Abilita se il video appare troppo grande. |
| Ritardo tra i cambi miniatura | 0 ms | Millisecondi da attendere tra gli eventi di cambio miniatura. Usalo se il modulo si attiva più velocemente del sistema di gestione delle miniature del tema, causando la ricomparsa dell'immagine precedente. |
Blocco Interazione Video (solo YouTube)
Queste impostazioni consentono di posizionare un overlay invisibile sul player YouTube per impedire l'interazione diretta dell'utente mantenendo il video visibile. Questo è utile quando si visualizza un video in autoplay come sfondo e si vuole nascondere gli elementi dell'interfaccia di YouTube.
| Campo | Predefinito | Descrizione |
|---|---|---|
| Blocca interazione video | Disabilitato | Aggiunge un <div> invisibile sull'embed YouTube, impedendo i clic, la riproduzione/pausa e la visualizzazione dei controlli YouTube. |
| Mostra icona play quando in pausa | Abilitato | Mostra un'icona play circolare sul video bloccato quando è in pausa. |
| Mostra icona pausa durante la riproduzione | Abilitato | Mostra un'icona pausa circolare mentre il video bloccato è in riproduzione. |
| Mantieni visibile l'icona dell'azione | Abilitato | Mantiene l'icona pausa/play sempre visibile invece di lasciarla svanire. |
Come Funziona
Quando un cliente visita una pagina prodotto, il modulo esegue JavaScript che analizza il DOM della pagina utilizzando i selettori CSS configurati. Trova l'elemento dell'immagine principale, il contenitore dell'immagine e la lista delle miniature, quindi inserisce la miniatura video nella lista e posiziona l'embed video all'interno del contenitore dell'immagine.
Corrispondenza dei selettori
Il modulo seleziona gli elementi usando selettori jQuery standard. Se un selettore non restituisce alcun elemento — perché il tuo tema usa nomi di classi o ID diversi — non viene inserito nulla e la galleria appare invariata. Gli errori appaiono nella console del browser quando il Debug generazione video è abilitato.
Integrazione con lo slider
Per i temi che racchiudono la galleria in una libreria slider JavaScript, il modulo esegue passaggi aggiuntivi dopo l'inserimento: chiama le API dello slider per aggiungere la nuova slide miniatura e, opzionalmente, aggiorna lo slider in modo che la nuova slide sia visibile. La chiamata API esatta dipende dalla libreria slider selezionata in Slider immagini personalizzato. Se la tua libreria slider non è nell'elenco, usa i campi dei selettori manuali (PV_SLIDER_THUMB_SEL, PV_SLIDER_IMG_SEL) per definire gli elementi che il modulo deve selezionare.
Temporizzazione
I temi pesanti a volte inizializzano i loro slider o aggiornano via AJAX la galleria prodotti dopo che l'evento DOM-ready del modulo si è attivato. I campi Ritardo di caricamento e Ritardo di aggiornamento AJAX / cambio combinazione aggiungono un periodo di attesa prima che il modulo tenti l'inserimento, garantendo che gli elementi della galleria esistano nel momento in cui il modulo li cerca.
Esempi d'Uso
Esempio: tema personalizzato con una classe diversa per il contenitore delle miniature
Il tuo tema usa .product-gallery__thumbs invece di .product-images. Apri la pagina prodotto nel browser, ispeziona il contenitore delle miniature (F12 > clicca sull'elemento), copia la sua classe. Nella scheda Compatibilità con il Tema, imposta il Selettore per il Contenitore delle Miniature su .product-gallery__thumbs e salva. I video appariranno ora nella striscia delle miniature.
Esempio: tema che usa Swiper Slider
Il tuo tema marketplace usa Swiper per la galleria immagini del prodotto. Seleziona Swiper Slider in Slider immagini personalizzato. Imposta il Selettore per il contenitore delle miniature dello slider sul selettore CSS dell'elemento con la classe .swiper-container nella tua pagina prodotto. Abilita Aggiorna slider dopo l'aggiunta degli elementi e salva. La miniatura video apparirà ora come slide all'interno della galleria Swiper.
Esempio: il video appare dietro una barra di navigazione fissa
Dopo il caricamento di un video, risulta nascosto sotto l'intestazione fissa del sito (z-index 1000). Imposta lo Z-index dell'embed video su 1001 e salva. L'embed video apparirà ora sopra l'intestazione.
Esempio: i video scompaiono dopo il cambio di una variante prodotto
Dopo aver modificato un attributo del prodotto (taglia, colore), il video scompare e non riappare. Imposta il Ritardo di aggiornamento AJAX / cambio combinazione su 300 e salva. Il modulo attenderà ora 300 ms affinché il tema finisca di aggiornare la galleria prima di reinserire il video.
Note Importanti
- Il Preset Tema compila automaticamente ma non salva automaticamente. Dopo aver selezionato un preset, rivedi sempre i selettori compilati e clicca Salva prima di eseguire i test.
- Librerie slider non presenti nell'elenco. Se lo slider del tuo tema non è nel menu a tendina Slider immagini personalizzato, compila manualmente i campi dei selettori
PV_SLIDER_THUMB_SELePV_SLIDER_IMG_SELe abilita Aggiorna slider per coprire la maggior parte dei casi. - Multi-shop. Queste impostazioni sono configurate per negozio. Se gestisci negozi con temi diversi, configura la scheda Compatibilità con il Tema per ogni negozio separatamente.
- Disabilita il padding con cautela. Abilitare Disabilita il padding nell'embed rimuove il wrapper del rapporto d'aspetto. Su alcuni temi questo crea un embed di dimensioni corrette; su altri il video collassa a zero altezza. Attiva/disattiva l'opzione e salva per vedere quale comportamento si applica al tuo tema.
- Il Blocco Interazione Video è solo per YouTube. L'overlay invisibile non funziona con embed Vimeo o video HTML5.
- Modalità Debug in produzione. Lasciare Debug generazione video abilitato su un negozio live non causa problemi, ma aggiunge output nella console visibile a qualsiasi cliente che apra gli strumenti di sviluppo. Disabilitalo una volta che l'integrazione funziona correttamente.
Risoluzione dei Problemi
| Problema | Soluzione |
|---|---|
| I video non appaiono nella galleria | Inizia con il Preset Tema per la tua versione di PS. Se non aiuta, usa gli strumenti di sviluppo del browser (F12 > Inspector) per trovare i nomi delle classi effettivi sull'immagine principale, il contenitore immagine e la lista delle miniature, quindi aggiorna i tre campi dei Selettori Principali. |
| Il video appare nella posizione sbagliata | Il selettore Contenitore immagine principale / Segnaposto Video punta all'elemento sbagliato. Ispeziona la pagina e identifica il wrapper diretto attorno all'immagine principale. |
| Il video appare dietro altri elementi della pagina | Aumenta lo Z-index dell'embed video sopra lo z-index dell'elemento sovrapposto (le intestazioni fisse sono spesso 1000–9999). |
| Il clic sulla miniatura richiede due clic per attivarsi | Cambia il Tipo di comportamento al clic da mousedown a click. |
| La miniatura video non è visibile nello slider | Se si usa Slick Slider o Owl Carousel v2, abilita Aggiorna slider dopo l'aggiunta degli elementi. |
| I video scompaiono dopo il cambio di una variante prodotto | Aggiungi un valore di 200–500 al Ritardo di aggiornamento AJAX / cambio combinazione. |
| Il video appare troppo grande o distorto | Abilita Disabilita il padding nell'embed e verifica. Se ancora non è corretto, controlla che il selettore Contenitore immagine principale punti al contenitore corretto. |
| La galleria funziona al caricamento della pagina ma si interrompe dopo la navigazione AJAX | Abilita Aggiorna slider dopo l'aggiunta degli elementi e, se necessario, aumenta il Ritardo di aggiornamento AJAX / cambio combinazione. |
| La miniatura video spinge le altre miniature fuori dallo schermo | Abilita Disabilita il calcolo della dimensione delle miniature per impedire al modulo di ridimensionare il contenitore delle miniature. |
Domande Frequenti
Come trovo il selettore CSS corretto per il contenitore delle miniature del mio tema?
Apri una pagina prodotto nel browser e premi F12 per aprire gli strumenti di sviluppo. Clicca sulla scheda Inspector o Elements, quindi clicca direttamente sulla striscia delle miniature nella pagina prodotto. Il pannello HTML evidenzia l'elemento. Osserva il suo attributo id o class — quello diventa il tuo selettore, preceduto da # per gli ID o . per le classi.
Il mio tema usa Slick Slider e le miniature video vengono inserite ma sono invisibili. Cosa devo fare?
Abilita Aggiorna slider dopo l'aggiunta degli elementi in Configurazione Slider. Questo indica al modulo di chiamare l'API slickAdd di Slick dopo l'inserimento della miniatura, così lo slider registra la nuova slide e la rende visibile.
Posso usare più selettori CSS in un singolo campo?
Sì. jQuery accetta selettori separati da virgola (ad esempio .product-cover, .product-image). Tuttavia, usare il selettore singolo più specifico che corrisponde al tuo tema evita corrispondenze indesiderate su altri elementi.
La selezione del Preset Tema sovrascrive i miei selettori esistenti?
Sì. Selezionando un preset si compilano automaticamente i campi dei Selettori Principali con i valori predefiniti del preset. Se hai personalizzato quei campi, l'applicazione di un preset sostituirà i tuoi valori. Rivedi tutti e tre i campi dei Selettori Principali dopo aver applicato un preset prima di salvare.
Ho abilitato la modalità Debug ma non vedo alcun output nella console. Cosa c'è di sbagliato?
Assicurati di aprire la console del browser (F12 > scheda Console) prima di ricaricare la pagina prodotto — l'output di debug viene scritto durante l'inizializzazione della pagina e non apparirà se la console viene aperta dopo il caricamento della pagina.
Il Blocco Interazione Video funziona con Vimeo o video HTML5?
No. L'overlay invisibile è solo per YouTube. Abilitare Blocca interazione video su un prodotto con un video Vimeo o HTML5 non avrà alcun effetto visibile.
Queste impostazioni influenzeranno tutti i negozi in una configurazione multi-shop?
Le impostazioni di Compatibilità con il Tema sono specifiche per negozio. Passa al negozio che vuoi configurare nel selettore negozio del Back Office prima di salvare le modifiche.