Vetrina Video Prodotto - Slider YouTube, Vimeo e Dailymotion con lightbox, home page o colonna laterale, senza jQuery

I tuoi video prodotto diventano uno strumento di vendita

Un video appoggiato su una scheda prodotto lo vede solo chi è già arrivato su quella scheda. Questo modulo porta i tuoi video prodotto dove i visitatori iniziano davvero: la home page, oppure una colonna laterale presente su ogni pagina.

Ogni slide usa l'immagine di copertina del prodotto come miniatura e rimanda direttamente a quel prodotto. Dimostrazioni, unboxing e video tutorial smettono di restare sepolti e cominciano a portare persone sulle schede prodotto.

Tre piattaforme, nessuna chiave API

Incolli un link e al resto pensa il modulo. Riconosce YouTube, Vimeo e Dailymotion, e mentre scrivi compare un badge che indica la piattaforma e ti ripete l'ID del video che ha estratto — così vedi che ha interpretato il video giusto prima ancora di salvare.

YouTube viene riconosciuto in tutte le forme più comuni: watch?v=…, youtu.be/…, Shorts, live, link di incorporamento e link /v/. Vimeo funziona con i link normali e con l'hash di privacy dei video non elencati (vimeo.com/123456789/abcdef1234) — incolla il link completo e l'hash viene conservato. Dailymotion accetta i suoi URL video standard.

Non c'è nessuna chiave API da ottenere e nessun account sviluppatore da registrare per nessuna delle tre.

Una lightbox che non manda via i visitatori

Un clic su una slide apre il video in un overlay senza distrazioni, sul tuo sito: nessuno viene consegnato a YouTube a metà visita. Si chiude con un clic o con il tasto Esc, ed è marcata come una vera finestra di dialogo per le tecnologie assistive. Alla chiusura il lettore viene svuotato e non semplicemente nascosto, così l'audio si ferma davvero invece di continuare in sottofondo.

I video YouTube vengono riprodotti tramite il lettore youtube-nocookie.com, rispettoso della privacy.

Home page, colonna laterale o ovunque nel tuo tema

Lo slider compare per impostazione predefinita in home page. Per metterlo in una colonna vai su Design → Posizioni, cerca Product Video Showcase e trapiantalo su displayLeftColumn o displayRightColumn. Chi sviluppa temi può anche inserirlo dove vuole con {widget name='productvideoslider'}.

Le colonne laterali mostrano automaticamente un video alla volta, qualunque sia la tua impostazione di video per riga — una colonna stretta non può contenerne quattro in modo leggibile.

Responsive per logica vera, non per buone intenzioni

Scegli da 1 a 6 video per riga su desktop. Il modulo poi riduce quel numero automaticamente in JavaScript, misurando la larghezza reale della finestra: al massimo 2 sotto i 576 px, 3 sotto i 768 px, 4 sotto i 992 px, e il numero che hai scelto al di sopra. La tua impostazione è un massimo, non un numero fisso.

Lo scorrimento avviene con lo swipe touch nativo su telefoni e tablet. Frecce, puntini, scorrimento automatico, velocità dello scorrimento e pausa al passaggio del mouse sono tutti opzionali e configurabili, e lo slider resta contenuto nella larghezza dei contenuti del tuo tema invece di allargarsi da bordo a bordo.

Ordine, visibilità e un elenco che ti dice la verità

L'elenco Your product videos si riordina con le frecce su e giù e ti permette di nascondere un video con un clic senza eliminarlo. Ogni riga mostra il prodotto, la piattaforma e lo stato.

Se in seguito il prodotto di un video viene eliminato, l'elenco te lo dice chiaramente con un avviso "Product deleted" invece di lasciarti nel dubbio — e puoi riassegnare quella riga a un altro prodotto oppure rimuoverla.

Niente di rotto arriva mai al tuo negozio

Una slide viene mostrata solo se il video è attivo e il suo prodotto è attivo nel negozio corrente. Il controllo è applicato nella query stessa, con un join sullo stato del prodotto a livello di negozio: un prodotto disattivato o non associato al negozio semplicemente sparisce. L'eliminazione di un prodotto rimuove automaticamente i suoi video.

La versione 2 ha chiuso un punto di scrittura non autenticato

Vale la pena dirlo apertamente, perché è il vero motivo per aggiornare.

La versione 1.x includeva un file ajax.php autonomo il cui controllo di autenticazione passava ogni volta che veniva inviato un ID prodotto. Qualsiasi visitatore anonimo poteva inviare in POST un ID prodotto e un testo arbitrario e farlo scrivere direttamente nella tabella product del core. Lo stesso file concatenava un valore della richiesta direttamente nell'SQL ed eseguiva error_reporting(0), nascondendo ogni errore che provocava.

Peggio ancora, il valore memorizzato veniva stampato tale e quale dentro un attributo href: un link costruito con uno pseudo-protocollo ostile eseguito dal browser partiva quindi al clic.

Quel file non esiste più. I link ora vengono validati e vengono salvati solo gli URL YouTube, Vimeo e Dailymotion riconosciuti, ogni azione di amministrazione passa dal token dipendente standard e l'output viene sottoposto a escape nei template.

Non modifica più la tabella prodotti di PrestaShop

La versione 1.x eseguiva ALTER TABLE ps_product ADD product_video_field_1 all'installazione e non la rimuoveva mai — disinstallare lasciava una colonna permanente nella tabella prodotti del core.

La versione 2 tiene i suoi dati in una tabella propria. L'aggiornamento migra tutti i video esistenti fuori dalla colonna del core, rileva la piattaforma di ciascuno e poi elimina la colonna. Anche la disinstallazione la elimina, se in qualche modo fosse sopravvissuta. Ogni link migrato che non è stato possibile riconoscere viene nascosto invece che mostrato rotto, così puoi correggerlo e riattivarlo dall'elenco.

Il front office ha perso ogni dipendenza

La versione 1.x caricava jQuery 1.4.4, Fancybox e il plugin mousewheel su ogni pagina del negozio, entrando in conflitto con il jQuery già presente nel tuo tema. Tutto questo è sparito. Il front office è JavaScript e CSS vanilla, senza alcuna dipendenza — un piccolo file per ciascuno.

Il modulo registra quei due file solo sulle pagine in cui ha effettivamente qualcosa da mostrare. Da sapere: se usi l'opzione Combina, comprimi e memorizza nella cache di PrestaShop, la piattaforma unisce le risorse di tutti i moduli in pacchetti condivisi, quindi il codice di questo modulo viaggerà dentro quel pacchetto come quello di tutti gli altri — è il comportamento di PrestaShop, non qualcosa a cui un modulo possa sottrarsi.

Sono corretti anche altri due errori della versione 1.x: la visualizzazione in colonna sinistra e destra che dichiarava non era in realtà mai stata registrata, quindi non faceva assolutamente nulla; e la sua logica di home page prendeva i primi N prodotti della categoria Home e poi cercava i video, così un negozio i cui primi prodotti non ne avevano si ritrovava con uno slider vuoto.

Compatibilità

PrestaShop dalla 1.7 alla 9, in otto lingue: francese, inglese, italiano, olandese, polacco, spagnolo, tedesco e turco.

Nessun override, nessuna modifica al core o al tema, niente jQuery. La disinstallazione rimuove la tabella del modulo e le sue impostazioni, ed elimina la vecchia colonna del core — lasciando il tuo database com'era prima dell'installazione.

Domande frequenti

Mi serve una chiave API di YouTube, Vimeo o Dailymotion?

No. Incolli un normale link video e il modulo riconosce da solo la piattaforma. Non c'è nessuna chiave da ottenere e nessun account sviluppatore da registrare per nessuna delle tre.

Dove può comparire lo slider?

In home page per impostazione predefinita, nella colonna sinistra o destra trapiantandolo da Design → Posizioni, oppure ovunque nel tuo tema con {widget name='productvideoslider'}.

Perché la mia colonna laterale mostra un solo video alla volta?

È voluto. Le colonne laterali sono strette, quindi lì lo slider mostra sempre un video alla volta, qualunque sia l'impostazione dei video per riga.

Ho impostato sei video per riga ma ne vedo meno.

Il numero per riga è un massimo, valido per desktop. Il modulo misura la larghezza reale della finestra in JavaScript e mostra al massimo 2 video sotto i 576 px, 3 sotto i 768 px e 4 sotto i 992 px.

Il mio video Vimeo non parte nella lightbox.

Se è un video non elencato, gli serve il suo hash di privacy nel link, come vimeo.com/123456789/abcdef1234 — incolla l'URL completo dal pulsante Condividi. Un video il cui proprietario ha disattivato l'incorporamento non può essere riprodotto su nessun sito.

Un link non viene accettato.

Incolla l'URL completo dalla barra degli indirizzi o dal pulsante Condividi. Il badge sotto il campo ti dice subito se il link è riconosciuto e ti ripete l'ID del video estratto, così non devi mai salvare sperando che vada bene.

Uno dei miei video mostra un avviso "Product deleted".

Il prodotto a cui puntava quel video è stato eliminato. Modifica la riga per scegliere un altro prodotto, oppure elimina la riga.

Lo slider non compare affatto.

Viene mostrato solo se almeno un video è attivo e il suo prodotto è attivo nel negozio corrente. Controlla la colonna Status nell'elenco e lo stato del prodotto stesso.

Che fine fa la colonna aggiunta alla mia tabella prodotti dalla versione 1?

L'aggiornamento migra i tuoi video fuori da quella colonna e poi la elimina. Anche la disinstallazione la elimina. Il tuo database torna com'era prima che il modulo fosse installato.