Vimeo Video Showcase - slider responsive e lightbox con miniature automatiche

Un video che porta su Vimeo è un video che ti fa perdere la vendita

Video di prodotto, tutorial e clip di marca vendono, ma solo finché il cliente resta nel tuo negozio. Questo modulo lo trattiene: i video vivono in uno slider sulla home page e, con un clic, si apre un lightbox sopra la pagina invece di una nuova scheda su vimeo.com.

Incolla un link. La configurazione finisce qui.

• 1. Copia il link del video dalla barra degli indirizzi o dal pulsante Condividi di Vimeo.
• 2. Incollalo in "Add a video" e clicca Aggiungi. L'anteprima compare non appena il link viene riconosciuto.
• 3. Non c'è un terzo passaggio: miniatura e titolo arrivano da Vimeo in automatico e lo slider è già attivo sulla tua home page.

Lascia il titolo vuoto e verrà usato il titolo del video su Vimeo. Va bene qualsiasi formato di link: vimeo.com/…, player.vimeo.com/video/…, link di canale, di gruppo e di showcase, perfino il solo ID del video.

Video non elencati, senza doverli rendere pubblici

Incolla il link privato completo, quello con il codice aggiuntivo dopo il numero, e il video viene riprodotto nel tuo negozio pur restando nascosto su Vimeo. È esattamente ciò che serve per tutorial, materiale riservato ai clienti o contenuti non ancora pronti per un canale pubblico.

Un lightbox, non una deviazione

I video si aprono in un overlay privo di distrazioni, che si chiude con un clic o con il tasto Esc, e vengono riprodotti nella modalità Do-Not-Track di Vimeo (dnt=1). Lo scorrimento automatico dello slider si mette in pausa mentre un video è in riproduzione e mentre la scheda del browser resta in secondo piano: dietro al player non si muove nulla.

Uno slider che si comporta bene su ogni schermo

Scegli quanti video mettere in fila su desktop, da uno a otto; lo slider ne mostra automaticamente al massimo quattro sui desktop piccoli, tre su tablet e due su smartphone, con swipe touch nativo. Frecce e pallini sono facoltativi e spariscono da soli quando tutti i video stanno già nello schermo. Anche la velocità dello scorrimento automatico e la pausa al passaggio del mouse sono impostazioni.

Controllo per singolo video e per lingua

L'elenco Your videos ti permette di riordinare con le frecce su e giù, nascondere un video con un clic, modificarlo o eliminarlo. Ogni video può essere limitato a una sola lingua del negozio oppure mostrato a tutti: comodo quando un tutorial esiste solo in tedesco o quando una clip di campagna è pensata per un solo mercato. I video la cui lingua è stata poi rimossa dal negozio vengono segnalati, così puoi riassegnarli invece di vederli sparire senza preavviso.

Leggero per scelta

Niente jQuery. Niente slick, niente plugin modal-video, nessuna libreria esterna, nessuna chiave API. Un piccolo file CSS e un piccolo file di codice JavaScript, caricati solo quando c'è qualcosa da mostrare e con la versione del modulo nell'URL per invalidare la cache, così gli aggiornamenti raggiungono i visitatori di ritorno senza ricaricare a forza la pagina.

Che cosa ha risolto la versione 2.0

Le versioni precedenti caricavano jQuery 1.10 da una CDN su ogni pagina, si agganciavano sia a header sia a displayHeader (quindi le risorse venivano caricate due volte), lasciavano che gli URL vuoti generassero slide grigie e rotte e avevano una pagina di configurazione che si bloccava sulle versioni recenti di PrestaShop. Tutto questo è sparito per scelta progettuale: nessun jQuery, ogni salvataggio validato e reindirizzato, e nessun video salvabile senza un link Vimeo valido. L'aggiornamento migra automaticamente i video esistenti: gli ID vengono estratti, le miniature recuperate di nuovo e ogni vecchia slide priva di un video valido viene conservata e contrassegnata come Hidden anziché essere cancellata.

Compatibilità

PrestaShop 1.7, 8 e 9, in otto lingue: francese, inglese, italiano, olandese, polacco, spagnolo, tedesco e turco. All'installazione lo slider si aggancia a displayHome, viene visualizzato su qualsiasi hook di visualizzazione se lo sposti da Design → Positions e può essere inserito direttamente in un template con {widget name='vimeoslider'}. La disinstallazione elimina la tabella e le impostazioni del modulo: i tuoi video su Vimeo restano intatti.

Domande frequenti

Serve una chiave API di Vimeo?

No. Incolla il link e il modulo recupera da solo miniatura e titolo.

Posso usare video non elencati?

Sì: incolla il link privato completo, con il codice che segue il numero del video, e verrà riprodotto nel tuo negozio pur restando non elencato su Vimeo.

Dove viene riprodotto il video?

In un lightbox sopra la tua pagina, che si chiude con un clic o con il tasto Esc, così il cliente non esce mai dal negozio.

Quanti video si vedono alla volta?

Scegli tu, da uno a otto per riga su desktop; su tablet e smartphone ne compaiono automaticamente di meno, con lo swipe touch.

Un video può essere mostrato solo in una lingua?

Sì. Ogni video può essere limitato a una sola lingua del negozio oppure mostrato a tutti.

Posso mettere lo slider da un'altra parte, non sulla home page?

Sì. Spostalo o copialo su qualsiasi hook di visualizzazione da Design → Positions, oppure inseriscilo in un template con {widget name='vimeoslider'}.

Una miniatura appare come un riquadro scuro: che faccio?

Vimeo non ha risposto quando il modulo gliel'ha richiesta. Apri il modulo di modifica del video, clicca Update video e verifica che il video non sia privato; per i video non elencati serve il link privato completo.