Pannello Laterale
Posiziona un lettore video o una griglia di miniature accanto alla descrizione del prodotto — vicino al prezzo, al pulsante aggiungi al carrello e agli altri elementi di acquisto — senza modificare la galleria immagini.
Disponibile dalla v3.0.0
Panoramica
Il Pannello Laterale offre una seconda area di visualizzazione video nella pagina prodotto, posizionata nella colonna delle informazioni sul prodotto anziché all'interno della striscia fotografica. Questo colloca i contenuti video esattamente dove avvengono le decisioni di acquisto: vicino al titolo, alla descrizione breve, al prezzo o al blocco aggiungi al carrello.
Puoi scegliere tra due stili di visualizzazione. Il primo mostra il video incorporato e pronto alla riproduzione immediata, senza necessità di clic. Il secondo mostra una griglia compatta di miniature in cui i clienti possono cliccare su qualsiasi anteprima per aprire il lettore a schermo intero in un overlay lightbox. Entrambi gli stili sono completamente compatibili con YouTube, Vimeo, HTML5 e provider video personalizzati.
Il Pannello Laterale è indipendente dalle funzionalità Galleria Immagini e Schede. Puoi usarli tutti e tre contemporaneamente, oppure utilizzare solo il Pannello Laterale. La posizione è altamente configurabile: un hook PrestaShop standard (la più compatibile), diverse posizioni predefinite nella pagina prodotto, oppure qualsiasi selettore CSS a tua scelta.
Configurazione
- Vai su Moduli > Gestione moduli, trova Product Video e clicca su Configura.
- Apri la scheda Pannello Laterale.
- Modifica le impostazioni riportate di seguito, quindi clicca su Salva.
Abilitazione
| Campo | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Abilita / disabilita questa funzione | Sì / No | Sì | Interruttore principale. Disattivalo per nascondere il Pannello Laterale senza perdere la configurazione. |
| Visualizza su | Tutti i dispositivi / Solo desktop / Solo mobile e tablet | Tutti i dispositivi | Limita il Pannello Laterale a specifici tipi di dispositivo. Utile quando il pannello appare bene su desktop ma occupa troppo spazio su mobile. |
Posizione (PrestaShop 1.6)
| Campo | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Posizione | Colonna sinistra / Colonna destra | Colonna destra | Inserisce il pannello nell'area widget della colonna sinistra o destra del tuo tema. Si applica solo su PrestaShop 1.5–1.6. |
Posizione (PrestaShop 1.7+)
| Campo | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Posizione | Posizione pulsanti aggiuntivi / Dopo le miniature del prodotto / Il titolo / La descrizione breve / Il prezzo / Il blocco quantità–aggiungi al carrello / Posizione personalizzata | Posizione pulsanti aggiuntivi | Dove nella pagina prodotto viene inserito il Pannello Laterale. Consulta le note seguenti per ciascuna opzione. |
| Selettore posizione personalizzata | Qualsiasi selettore CSS/jQuery | — | Visibile solo quando è selezionata la Posizione personalizzata. Inserisci il selettore dell'elemento di destinazione nel tuo tema (ad es. .product-variants o #main .product-add-to-cart). |
| Modalità di inserimento | Prima / All'inizio / Alla fine / Dopo | Dopo | Controlla come il pannello viene inserito rispetto all'elemento scelto. Prima e Dopo lo posizionano all'esterno dell'elemento; All'inizio e Alla fine lo posizionano all'interno. |
Posizione pulsanti aggiuntivi utilizza l'hook
displayProductAdditionalInfodi PrestaShop — l'opzione più sicura perché non richiede manipolazione del DOM. Se il tuo tema non include questo hook, scegli una posizione predefinita o usa la Posizione personalizzata.
Dopo le miniature del prodotto utilizza l'hook
displayAfterProductThumbs. Il template del prodotto del tuo tema deve includere{hook h="displayAfterProductThumbs" product=$product}affinché funzioni.
Le posizioni predefinite (titolo, descrizione breve, prezzo, aggiungi al carrello) utilizzano l'iniezione DOM via JavaScript e non sono compatibili con page builder come Elementor o Divi.
Stile di visualizzazione
| Campo | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Visualizzazione video | Mostra il primo video incorporato / Mostra un elenco di miniature | Mostra un elenco di miniature | Scegli se visualizzare subito un lettore incorporato oppure una griglia di miniature cliccabili. |
| Numero di video per riga | 2 / 3 / 4 / 5 / 6 | 3 | Si applica quando è selezionato Mostra un elenco di miniature. Imposta il numero di colonne di miniature nella griglia. |
Titolo
| Campo | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Visualizzazione titolo | Sì / No | No | Se abilitato, appare un'intestazione sopra il pannello. |
| Formattazione titolo | h2 / h3 / h4 / h5 / p / span | h3 | L'elemento HTML utilizzato per l'intestazione. Scegli un livello adatto alla gerarchia delle intestazioni del tuo tema. |
| Classe del contenitore del titolo | Testo | — | Classe CSS opzionale aggiunta all'elemento titolo. Usala per applicare stili personalizzati senza modificare i file del tema. |
Modal Vista rapida
| Campo | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Visualizza nella Modal View | Sì / No | No | Solo PrestaShop 1.7+. Se abilitato, il Pannello Laterale viene visualizzato anche all'interno del popup di vista rapida del prodotto. |
Come Funziona
Modalità lettore incorporato
Quando è selezionato Mostra il primo video incorporato, il modulo visualizza direttamente nella pagina un iframe per il primo video del prodotto. Il lettore è visibile e pronto alla riproduzione non appena la pagina si carica — non è richiesta alcuna interazione. Questa modalità funziona al meglio quando hai un video principale che vuoi che i clienti vedano immediatamente.
Modalità elenco miniature
Quando è selezionato Mostra un elenco di miniature, i clienti vedono una griglia di immagini di anteprima dei video. La griglia occupa la larghezza disponibile con il numero di colonne specificato. Cliccando su una miniatura si apre il video corrispondente in un overlay lightbox FancyBox. I clienti possono sfogliare tutte le miniature prima di scegliere quale video guardare.
Posizionamento e inserimento
Per i posizionamenti basati su hook (Posizione pulsanti aggiuntivi, Dopo le miniature del prodotto), il modulo visualizza il pannello lato server attraverso il sistema di hook di PrestaShop. Non è necessaria alcuna iniezione JavaScript, il che rende queste le opzioni più affidabili.
Per le posizioni predefinite e la Posizione personalizzata, il modulo utilizza JavaScript per trovare l'elemento di destinazione e chiama .before(), .prepend(), .append() o .after() di jQuery in base alla Modalità di inserimento selezionata.
Modal di vista rapida
Quando Visualizza nella Modal View è abilitato, il modulo rileva l'apertura del modal di vista rapida e visualizza il Pannello Laterale al suo interno. Questo consente ai clienti di guardare i video senza dover navigare alla pagina completa del prodotto.
Esempi d'uso
Esempio: Video accanto al pulsante aggiungi al carrello per un prodotto con un video principale
Vendi un frullatore e hai un video dimostrativo. Imposta Visualizzazione video su Mostra il primo video incorporato, Posizione su Il blocco quantità / aggiungi al carrello e Modalità di inserimento su Prima. Il lettore video appare direttamente sopra il pulsante aggiungi al carrello, visibile nel momento in cui la pagina si carica. Non è necessario scorrere né fare clic.
Esempio: Griglia di miniature sotto la descrizione breve per un prodotto con più angolazioni
Vendi mobili con cinque video da angolazioni diverse. Imposta Visualizzazione video su Mostra un elenco di miniature, Numero di video per riga su 3 e Posizione su La descrizione breve con Modalità di inserimento impostata su Dopo. I clienti vedono una striscia di miniature a 3 colonne immediatamente dopo la descrizione breve. Cliccando su una miniatura si apre una lightbox a schermo intero.
Esempio: Posizione personalizzata su un tema con layout non standard
Il tuo tema inserisce il blocco aggiungi al carrello in un contenitore personalizzato <div class="my-theme-purchase">. Imposta Posizione su Posizione personalizzata, inserisci .my-theme-purchase come selettore e imposta Modalità di inserimento su Prima. Il Pannello Laterale appare sopra quel contenitore, indipendentemente dalla struttura del tema.
Note Importanti
- Il Pannello Laterale e la Galleria Immagini sono completamente indipendenti. Abilitare l'uno non influisce sull'altro.
- Su PrestaShop 1.6, si applicano solo le opzioni Colonna sinistra e Colonna destra. Il selettore di posizione PS 1.7 viene ignorato.
- Le posizioni predefinite e la Posizione personalizzata utilizzano l'iniezione DOM via JavaScript al caricamento della pagina. Se l'elemento di destinazione non esiste nel DOM quando lo script viene eseguito, il pannello non apparirà. Verifica il selettore con l'ispettore del browser.
- La Posizione personalizzata non è compatibile con page builder (Elementor, Divi, WPBakery) che visualizzano i contenuti in modo asincrono.
- Numero di video per riga influisce solo sulla modalità elenco miniature. Non ha alcun effetto quando è selezionata la modalità lettore incorporato.
- L'opzione Modal di vista rapida è nascosta su PrestaShop 1.6 — è rilevante solo per i temi 1.7+ che includono una funzione di vista rapida.
- In una configurazione multi-shop, le impostazioni del Pannello Laterale sono per negozio. Puoi abilitare il Pannello Laterale su un negozio e disabilitarlo su un altro, oppure utilizzare posizioni diverse per negozio.
Risoluzione dei Problemi
| Problema | Soluzione |
|---|---|
| Il Pannello Laterale non appare da nessuna parte nella pagina | Verifica che Abilita / disabilita questa funzione sia impostato su Sì e che Visualizza su corrisponda al dispositivo che stai usando per il test. Se stai usando un posizionamento basato su hook, verifica che l'hook sia presente nel tuo tema. |
| Il pannello appare nella posizione sbagliata | Passa a Posizione personalizzata, apri l'ispettore del browser, individua l'esatto elemento contenitore, copia il suo selettore CSS e incollalo in Selettore posizione personalizzata. Regola la Modalità di inserimento per posizionarlo prima o dopo. |
| Il pannello si sovrappone al pulsante aggiungi al carrello o al prezzo | Cambia la Modalità di inserimento da Alla fine (interno) a Dopo (esterno). In questo modo il pannello viene posizionato dopo il contenitore invece di essere al suo interno. |
| Il pannello appare su desktop ma non su mobile | Visualizza su è impostato su Solo desktop. Cambialo in Tutti i dispositivi o Solo mobile e tablet secondo le necessità. |
| Il modal di vista rapida non mostra il Pannello Laterale | Verifica che Visualizza nella Modal View sia impostato su Sì e che tu stia usando PrestaShop 1.7+. Alcuni plugin di vista rapida di terze parti utilizzano una struttura modal diversa che il modulo non riesce a rilevare automaticamente. |
| L'intestazione del titolo rompe il layout | Imposta Visualizzazione titolo su No se l'intestazione non è necessaria. In alternativa, regola la Formattazione titolo in modo che corrisponda al livello di intestazione atteso dal tuo tema, oppure usa la Classe del contenitore del titolo per applicare un override CSS. |
Domande Frequenti
Posso mostrare video diversi nel Pannello Laterale rispetto alla Galleria Immagini?
No — entrambi mostrano le stesse voci video associate al prodotto. Ciò che cambia è lo stile di visualizzazione, la posizione e la presentazione del lettore. Puoi controllare quali video appaiono gestendo l'elenco video del prodotto.
Il Pannello Laterale rallenta il caricamento della pagina?
I posizionamenti basati su hook (Posizione pulsanti aggiuntivi, Dopo le miniature del prodotto) vengono visualizzati lato server insieme alla pagina, quindi non comportano tempi di caricamento aggiuntivi. Le posizioni predefinite e la Posizione personalizzata inseriscono il contenuto tramite JavaScript dopo il caricamento del DOM, il che aggiunge un breve istante prima che il pannello appaia, ma non si tratta di una richiesta di rete separata.
Cosa succede se imposto sia la Galleria Immagini sia il Pannello Laterale per mostrare un lettore incorporato?
Entrambi verranno visualizzati in modo indipendente. La Galleria Immagini incorpora il video nell'area del carosello fotografico; il Pannello Laterale lo incorpora nella colonna delle informazioni sul prodotto. Questa configurazione è valida e alcuni merchant la usano intenzionalmente per rendere il video impossibile da ignorare.
Posso limitare il Pannello Laterale ai soli clienti registrati?
Non direttamente dalle impostazioni del Pannello Laterale. Usa la funzione Restrizioni di accesso (disponibile nella configurazione del modulo) per limitare i gruppi di clienti che possono vedere i video in tutte le posizioni di visualizzazione, incluso il Pannello Laterale.
L'opzione "Dopo le miniature del prodotto" è selezionata ma non appare nulla. Perché?
Questa opzione si basa sulla presenza dell'hook displayAfterProductThumbs nel template del prodotto del tuo tema. Molti temi non lo includono. Apri il file product.tpl del tema (o product.html.twig su PS 1.7) e verifica la presenza di questo hook. Se manca, passa a una posizione diversa o usa la Posizione personalizzata.
Posso mostrare il Pannello Laterale solo su determinati prodotti?
Il Pannello Laterale appare solo sui prodotti a cui è stato assegnato almeno un video. Se un prodotto non ha video, il Pannello Laterale non viene visualizzato indipendentemente dalle impostazioni.
Funzionalità Correlate
- Posizionamento nella Galleria Immagini — Integra i video nella striscia fotografica del prodotto
- Schede e Descrizione — Visualizza un lettore a schermo intero in una scheda prodotto dedicata o sotto la descrizione
- Listini Prodotti — Mostra indicatori video o miniature nelle pagine di categoria e nei risultati di ricerca
- Restrizioni di Accesso — Limita i gruppi di clienti che possono vedere i video