Passa al contenuto principale

Video per Categoria

Assegna un video a qualsiasi categoria e visualizzalo come player inline o come hero a tutta larghezza sulla pagina della categoria — senza scrivere codice.

note

Disponibile dalla v3.2.0

Panoramica

Video per Categoria ti permette di associare un video a ciascuna categoria direttamente dal modulo di modifica della categoria nel Back Office. Quando un cliente visita quella categoria, il video appare automaticamente in base alle impostazioni di visualizzazione configurate nel modulo. Puoi scegliere, per ogni singola categoria, se mostrare il video come player inline standard (incorporato in una posizione specifica della pagina) oppure come video cinematografico di sfondo che sostituisce l'immagine di intestazione della categoria.

Questa funzionalità è utile per video di brand storytelling nelle categorie landing, promozioni stagionali o presentazioni di linee di prodotto che vengono riprodotte prima della griglia prodotti. Poiché ogni categoria viene configurata in modo indipendente, puoi avere un hero video in una categoria di primo livello mentre le sottocategorie usano un player inline o nessun video.

Due elementi di configurazione agiscono in sinergia: le impostazioni globali del modulo (che controllano il comportamento di tutti i video per categoria) e l'assegnazione per categoria (che associa un URL video specifico e una modalità di visualizzazione a ciascuna categoria).

Configurazione

Passo 1 — Abilita la funzionalità

  1. Vai su Moduli > Gestione moduli, trova Product Video e clicca su Configura.
  2. Apri la scheda Video per Categoria.
  3. Imposta Abilita Video per Categoria su e clicca su Salva.

Senza questo interruttore principale attivato, nessun video per categoria verrà visualizzato, anche se i video sono già stati assegnati alle categorie.

Passo 2 — Configura le opzioni di visualizzazione globali

Tutte le impostazioni seguenti si trovano in Moduli > Gestione moduli > Product Video > Configura > Video per Categoria.

Impostazioni modalità standard (inline)

CampoValoriPredefinitoDescrizione
Abilita Video per CategoriaSì / NoNoInterruttore principale per tutti i video per categoria.
Posizione del videoIn alto, Dopo la descrizione, Dopo le sottocategorie, Dopo i prodotti, Selettore personalizzatoIn altoPunto della pagina in cui viene inserito il player inline.
Selettore personalizzatoStringa selettore CSS(vuoto)Visibile solo quando Posizione del video è impostata su Selettore personalizzato. Inserisci il selettore CSS dell'elemento dopo cui deve apparire il video.
Larghezza video standardNumero (px)720Larghezza del player inline in pixel.
Altezza video standardNumero (px)405Altezza del player inline in pixel.

Impostazioni modalità sfondo (hero)

Queste opzioni riguardano solo le categorie in cui il video è impostato sulla modalità Sfondo / hero.

CampoValoriPredefinitoDescrizione
Altezza sfondoNumero (px)400Altezza della sezione hero a tutta larghezza in pixel.
Colore overlaySelettore colore#000000Una tinta colorata sovrapposta al video. Imposta l'opacità a 0 per rimuoverla del tutto.
Opacità overlay0–100 (%)40Livello di opacità dell'overlay colorato. 0 = completamente trasparente; 100 = copre il video interamente.
Mostra nome categoriaSì / NoSovrappone il nome della categoria come testo sul video di sfondo.
Mostra descrizione categoriaSì / NoNoSovrappone il testo della descrizione della categoria sul video di sfondo. Le descrizioni lunghe vengono troncate a 200 caratteri.

Il Selettore intestazione categoria sotto Compatibilità tema controlla quale elemento viene sostituito dal video di sfondo. Il valore predefinito (.page-category-heading,.category-cover) funziona con il tema Classic e la maggior parte dei temi standard. Se il video di sfondo non appare, è questa l'impostazione da modificare.

Passo 3 — Assegna un video a una categoria

  1. Vai su Catalogo > Categorie nel Back Office.
  2. Clicca su Modifica sulla categoria a cui vuoi aggiungere un video.
  3. Scorri fino al pannello Video in fondo al modulo della categoria.
  4. Inserisci l'URL del video (YouTube, Vimeo, o un URL diretto a un file video).
  5. Facoltativamente inserisci un Titolo — questo appare solo nel pannello di amministrazione a scopo identificativo e non viene mostrato ai clienti.
  6. Scegli la Modalità di visualizzazione: Inline (standard) o Sfondo / hero.
  7. Clicca il pulsante Salva nel pannello Video, poi salva il modulo della categoria.

Ripeti l'operazione per ogni categoria che deve avere un video.

Come Funziona

Quando un cliente apre una pagina categoria, il modulo verifica se a quella categoria è stato assegnato un video. Se esiste, lo renderizza secondo la modalità di visualizzazione scelta.

Modalità inline (standard)

Il video è inizialmente nascosto nel sorgente della pagina e viene poi spostato nella posizione corretta da un piccolo snippet JavaScript che viene eseguito al DOMContentLoaded. La posizione è determinata dall'impostazione Posizione del video:

  • In alto — inserito dopo il titolo della pagina, prima della descrizione della categoria
  • Dopo la descrizione — inserito sotto il blocco di descrizione della categoria
  • Dopo le sottocategorie — inserito sotto la griglia delle sottocategorie
  • Dopo i prodotti — inserito sotto il listato dei prodotti
  • Selettore personalizzato — inserito dopo l'elemento che corrisponde al selettore CSS specificato

Il player inline rispetta i valori di Larghezza video standard e Altezza video standard configurati globalmente. I video YouTube e Vimeo vengono caricati tramite i loader del player esistenti nel modulo; i file video HTML5 vengono renderizzati con i controlli nativi del browser.

Modalità sfondo (hero)

Il video di sfondo sostituisce l'area dell'immagine di intestazione della categoria. Il modulo individua l'elemento intestazione tramite il Selettore intestazione categoria nelle impostazioni di Compatibilità tema, quindi renderizza il video dietro un overlay configurabile e label testuali opzionali.

  • I video di sfondo YouTube vengono riprodotti automaticamente, in modalità muto, in loop continuo con i controlli nascosti.
  • I video di sfondo Vimeo utilizzano il parametro background=1 di Vimeo per lo stesso effetto.
  • I file video HTML5 vengono riprodotti con gli attributi autoplay muted loop playsinline.

Il video viene sempre ridimensionato per coprire l'intera larghezza del contenitore senza bande nere, indipendentemente dall'aspect ratio nativo del video. Al ridimensionamento della finestra, il ridimensionamento viene ricalcolato automaticamente.

Se nessun video è assegnato a una categoria, non viene generato alcun output — nessun contenitore vuoto, nessuno spazio segnaposto.

Esempi di Utilizzo

Esempio: Video di presentazione del brand su una collezione di primo livello

Vendi attrezzatura outdoor e vuoi che un video promozionale di 60 secondi venga riprodotto in cima alla categoria "Escursionismo". Imposta la modalità di visualizzazione su Inline (standard) con Posizione del video impostata su In alto e dimensioni di 1140 × 641 px (corrispondenti alla colonna di contenuto del tuo tema). I clienti arrivano sulla pagina e vedono il video prima della griglia prodotti, senza lasciare la categoria.

Esempio: Intestazione stagionale cinematografica su una categoria in saldo

Per una categoria "Saldi Estivi", vuoi un video looping con stile lifestyle al posto di un'immagine statica di categoria. Assegna un URL YouTube con Modalità di visualizzazione impostata su Sfondo / hero, imposta l'Altezza sfondo a 500 px, abilita Mostra nome categoria e imposta l'Opacità overlay a 50 in modo che il testo "Saldi Estivi" risulti leggibile sul video. L'immagine di intestazione viene automaticamente sostituita dal video.

Esempio: Video tutorial dopo il listato prodotti

Hai una categoria "Macchine per il Caffè" e vuoi mostrare un video guida all'acquisto sotto tutti i prodotti. Imposta Posizione del video su Dopo i prodotti e usa un URL Vimeo nel pannello Video della categoria. I clienti finiscono di scorrere la griglia prodotti e poi vedono il tutorial.

Note Importanti

  • A ogni categoria può essere assegnato un solo video. Assegnare un nuovo URL a una categoria che ne ha già uno sovrascrive la voce precedente.
  • La funzionalità è compatibile con PrestaShop 1.6 e 1.7+. Su 1.7+ utilizza displayCategoryAdditionalDescription; su 1.6 utilizza displayHeaderCategory. Entrambi gli hook richiamano la stessa logica di rendering.
  • La modalità sfondo è progettata per YouTube, Vimeo e file video HTML5. I provider personalizzati (configurati sotto Provider Aggiuntivi) non sono supportati in modalità sfondo — tornano a un iframe, che potrebbe non riempire correttamente il contenitore.
  • Video per Categoria è una funzionalità per singolo negozio. In un'installazione multi-negozio, le assegnazioni dei video e le impostazioni di visualizzazione globali vengono applicate per contesto di negozio. Cambia negozio prima di assegnare video o modificare impostazioni per assicurarti che abbiano effetto sul corretto storefront.
  • L'overlay della descrizione in modalità sfondo rimuove i tag HTML dalla descrizione della categoria e tronca a 200 caratteri. Se la descrizione della categoria è formattata con HTML, l'overlay mostrerà solo testo normale.
  • Se un selettore CSS personalizzato non trova alcun elemento corrispondente nella pagina, il video viene comunque mostrato — viene visualizzato nella sua posizione di rendering predefinita nel sorgente della pagina invece di essere riposizionato.

Risoluzione dei Problemi

ProblemaSoluzione
Il video non appare nella pagina categoriaVerifica che Abilita Video per Categoria sia impostato su nelle impostazioni del modulo. Controlla anche che un URL video sia salvato su quella specifica categoria (modifica la categoria e controlla il pannello Video).
Il video di sfondo appare ma copre l'area sbagliataIl Selettore intestazione categoria sotto Compatibilità tema non corrisponde all'elemento intestazione del tuo tema. Ispeziona la pagina categoria con gli strumenti per sviluppatori del browser per trovare il selettore CSS corretto e aggiornarlo.
Il player inline appare nella posizione sbagliataIl tuo tema potrebbe usare nomi di classe diversi da quelli predefiniti. Cambia Posizione del video su Selettore personalizzato e inserisci il selettore CSS esatto per il blocco di descrizione o il contenitore della lista prodotti del tuo tema.
Il video di sfondo non parte in riproduzione automaticaI browser richiedono che i video siano in muto prima di consentire l'autoplay. I video di sfondo YouTube e Vimeo vengono sempre silenziati automaticamente. Per i file HTML5, l'attributo muted viene impostato dal modulo. Se l'autoplay continua a non funzionare, controlla le impostazioni dei criteri di autoplay del tuo browser.
Il testo del nome o della descrizione della categoria non è leggibile sopra il videoAumenta l'Opacità overlay in modo che lo strato colorato crei più contrasto, oppure cambia il Colore overlay con una tonalità che si abbina meglio al contenuto del video.
Il video è assegnato ma il modulo è stato appena installato — non appare nullaDopo aver installato o aggiornato il modulo, svuota la cache di PrestaShop da Parametri avanzati > Prestazioni in modo che i nuovi template vengano riconosciuti.

Domande Frequenti

Posso usare un video diverso per desktop e mobile?

No. Lo stesso URL video viene utilizzato su tutte le dimensioni dello schermo. In modalità sfondo, il modulo ridimensiona il video per riempire il contenitore a qualsiasi larghezza della finestra, quindi lo stesso clip funziona sia su desktop che su mobile.

Il video per categoria appare anche nelle schede prodotto all'interno di quella categoria?

No. Video per Categoria appare solo sulla pagina della categoria stessa. Per mostrare video all'interno della griglia prodotti (sulle schede prodotto), utilizza invece la funzionalità Listati Prodotti.

Cosa succede se elimino una categoria a cui è stato assegnato un video?

L'assegnazione del video è memorizzata con un riferimento all'ID della categoria. L'eliminazione della categoria tramite il Back Office rimuove il record della categoria, e l'assegnazione video orfana semplicemente non verrà mai più visualizzata (non esiste una pagina categoria su cui mostrarla). Non genera alcun errore.

Posso assegnare un video alla categoria home o alla categoria radice?

Sì. Qualsiasi categoria visibile in Catalogo > Categorie può avere un video assegnato tramite il pannello Video nel suo modulo di modifica, inclusa la categoria Home se il tuo tema la renderizza come pagina categoria navigabile.

Il video di sfondo sfarfalla o mostra un breve frame bianco prima di partire. È normale?

Un breve ritardo prima che il video venga caricato è normale, specialmente su connessioni più lente. I video YouTube e Vimeo richiedono l'inizializzazione dell'API del player esterno. Puoi ridurre l'impatto visivo aumentando leggermente l'Opacità overlay, che nasconde lo stato vuoto prima che appaia il frame del video.

Posso mostrare un video su ogni categoria senza assegnarlo singolarmente?

No. I video devono essere assegnati per categoria. Non esiste un video di fallback globale applicabile a tutte le categorie contemporaneamente.

Il video per categoria influenzerà la SEO della mia pagina?

Il modulo genera elementi standard <iframe> e <video> — esattamente come apparirebbe qualsiasi video incorporato. Non viene generato alcun trattamento SEO speciale né markup Schema.org per i video per categoria (quella funzionalità si applica solo ai video prodotto).

Funzionalità Correlate

  • Listati Prodotti — Mostra miniature video o icone sulle schede prodotto nella griglia della categoria
  • Compatibilità tema — Regola il Selettore intestazione categoria e altri selettori CSS specifici del tema