Vitrine vidéo produit - Slider YouTube, Vimeo et Dailymotion avec lightbox, page d'accueil ou colonne, sans jQuery

Vos vidéos produit deviennent un outil de vente

Une vidéo posée sur une fiche produit n'est vue que par les visiteurs qui sont déjà sur cette fiche. Ce module place vos vidéos produit là où les visiteurs commencent vraiment : la page d'accueil, ou une colonne latérale présente sur toutes les pages.

Chaque diapositive utilise l'image de couverture du produit comme miniature et renvoie directement vers ce produit. Démonstrations, déballages et tutoriels cessent d'être enfouis et se mettent à ramener du monde vers vos fiches produit.

Trois plateformes, aucune clé API

Vous collez un lien, le module se charge du reste. Il reconnaît YouTube, Vimeo et Dailymotion, et un badge "reconnu" apparaît pendant la saisie : il nomme la plateforme et vous réaffiche l'identifiant de la vidéo qu'il a extrait, ce qui vous permet de vérifier qu'il a bien saisi la bonne vidéo avant même d'enregistrer.

YouTube est reconnu sous toutes ses formes courantes : watch?v=…, youtu.be/…, Shorts, live, liens d'intégration et liens /v/. Vimeo fonctionne avec les liens classiques comme avec le hash de confidentialité des vidéos non répertoriées (vimeo.com/123456789/abcdef1234) — collez le lien complet, le hash est conservé. Dailymotion accepte ses URL de vidéo standard.

Il n'y a aucune clé API à obtenir ni aucun compte développeur à créer pour aucune des trois.

Une lightbox qui ne fait pas fuir vos visiteurs

Un clic sur une diapositive ouvre la vidéo dans une surcouche sans distraction, sur votre propre site : personne n'est renvoyé vers YouTube en pleine visite. Elle se ferme d'un clic ou avec la touche Échap, et elle est balisée comme une véritable boîte de dialogue pour les technologies d'assistance. À la fermeture, le lecteur est vidé et non simplement masqué : le son s'arrête vraiment au lieu de continuer en arrière-plan.

Les vidéos YouTube sont lues via le lecteur youtube-nocookie.com, respectueux de la vie privée.

Page d'accueil, colonne latérale, ou n'importe où dans votre thème

Le slider s'affiche par défaut en page d'accueil. Pour le placer dans une colonne, rendez-vous dans Apparence → Positions, repérez Product Video Showcase et transplantez-le sur displayLeftColumn ou displayRightColumn. Les développeurs de thème peuvent aussi l'insérer où ils veulent avec {widget name='productvideoslider'}.

Les colonnes latérales affichent automatiquement une seule vidéo à la fois, quel que soit votre réglage de vidéos par ligne — une colonne étroite ne peut pas en accueillir quatre de façon lisible.

Responsive par vraie logique, pas par vœu pieux

Vous choisissez de 1 à 6 vidéos par ligne sur ordinateur. Le module réduit ensuite ce nombre automatiquement en JavaScript, en mesurant la largeur réelle de la fenêtre : au maximum 2 en dessous de 576 px, 3 en dessous de 768 px, 4 en dessous de 992 px, et le nombre que vous avez choisi au-delà. Votre réglage est un maximum, pas un nombre fixe.

Le défilement se fait par balayage tactile natif sur téléphone et tablette. Flèches, puces, défilement automatique, vitesse de défilement et pause au survol sont tous optionnels et paramétrables, et le slider reste contenu dans la largeur de contenu de votre thème au lieu de s'étaler d'un bord à l'autre.

Ordre, visibilité, et une liste qui vous dit la vérité

La liste Your product videos se réordonne avec des flèches haut/bas et vous permet de masquer une vidéo en un clic sans la supprimer. Chaque ligne affiche son produit, sa plateforme et son statut.

Si le produit d'une vidéo est supprimé par la suite, la liste vous le dit clairement avec un avertissement "Product deleted" plutôt que de vous laisser dans le flou — et vous pouvez réaffecter cette ligne à un autre produit ou la supprimer.

Rien de cassé n'arrive jamais jusqu'à votre boutique

Une diapositive ne s'affiche que si la vidéo est active et que son produit est actif dans la boutique en cours. C'est appliqué directement dans la requête, par une jointure sur le statut du produit au niveau boutique : un produit désactivé ou absent de la boutique disparaît tout simplement. La suppression d'un produit supprime automatiquement ses vidéos.

La version 2 a fermé un point d'écriture non authentifié

Cela mérite d'être dit franchement, car c'est la vraie raison de mettre à jour.

La version 1.x livrait un fichier ajax.php autonome dont le contrôle d'authentification passait dès qu'un identifiant de produit était envoyé. N'importe quel visiteur anonyme pouvait envoyer en POST un identifiant de produit et un texte arbitraire, et le faire écrire directement dans la table product du cœur de PrestaShop. Le même fichier concaténait une valeur de la requête directement dans du SQL et exécutait error_reporting(0), masquant toutes les erreurs qu'il provoquait.

Pire, la valeur stockée était affichée telle quelle dans un attribut href : un lien JavaScript malveillant s'exécutait donc au clic.

Ce fichier a disparu. Les liens sont désormais validés et seules les URL YouTube, Vimeo et Dailymotion reconnues sont enregistrées, chaque action d'administration passe par le jeton employé standard, et les sorties sont échappées dans les templates.

Il ne modifie plus la table produit de PrestaShop

La version 1.x exécutait ALTER TABLE ps_product ADD product_video_field_1 à l'installation et ne la supprimait jamais — désinstaller laissait une colonne permanente dans la table produit du cœur.

La version 2 conserve ses données dans sa propre table. La mise à jour migre toutes les vidéos existantes hors de la colonne du cœur, détecte la plateforme de chacune, puis supprime la colonne. La désinstallation la supprime également, si elle a survécu d'une manière ou d'une autre. Tout lien migré qui n'a pas pu être reconnu est masqué plutôt qu'affiché cassé, ce qui vous permet de le corriger et de le réactiver depuis la liste.

Le front office a perdu toutes ses dépendances

La version 1.x chargeait jQuery 1.4.4, Fancybox et le plugin mousewheel sur chaque page de la boutique, entrant en conflit avec le jQuery déjà présent dans votre thème. Tout cela a disparu. Le front office repose sur du JavaScript et du CSS natifs, sans aucune dépendance.

Le module n'enregistre ces deux fichiers que sur les pages où il a effectivement quelque chose à montrer. À savoir : si vous utilisez l'option Combiner, compresser et mettre en cache de PrestaShop, la plateforme fusionne les ressources de tous les modules dans des paquets communs, et le code de ce module voyagera donc dans ce paquet comme celui des autres — c'est le fonctionnement de PrestaShop, pas quelque chose qu'un module peut refuser.

Deux autres erreurs de la version 1.x sont corrigées : l'affichage en colonne gauche et droite qu'elle annonçait n'avait en réalité jamais été enregistré et ne faisait donc strictement rien ; et sa logique de page d'accueil prenait les N premiers produits de la catégorie Accueil puis cherchait des vidéos, si bien qu'une boutique dont les premiers produits n'en avaient pas se retrouvait avec un slider vide.

Compatibilité

PrestaShop 1.7 à 9, en huit langues : allemand, anglais, espagnol, français, italien, néerlandais, polonais et turc.

Aucun override, aucune modification du cœur ni du thème, pas de jQuery. La désinstallation supprime la table du module et ses réglages, et supprime l'ancienne colonne du cœur — votre base de données retrouve l'état qu'elle avait avant l'installation.

Questions fréquentes

Ai-je besoin d'une clé API YouTube, Vimeo ou Dailymotion ?

Non. Vous collez un lien vidéo ordinaire et le module reconnaît la plateforme tout seul. Il n'y a aucune clé à obtenir ni aucun compte développeur à créer pour aucune des trois.

Où le slider peut-il s'afficher ?

En page d'accueil par défaut, dans la colonne gauche ou droite en le transplantant depuis Apparence → Positions, ou n'importe où dans votre thème avec {widget name='productvideoslider'}.

Pourquoi ma colonne latérale n'affiche-t-elle qu'une seule vidéo à la fois ?

C'est voulu. Les colonnes latérales sont étroites, le slider y affiche donc toujours une seule vidéo, quel que soit le réglage de vidéos par ligne.

J'ai réglé six vidéos par ligne mais j'en vois moins.

Le nombre par ligne est un maximum, valable pour l'ordinateur. Le module mesure la largeur réelle de la fenêtre en JavaScript et affiche au maximum 2 vidéos en dessous de 576 px, 3 en dessous de 768 px et 4 en dessous de 992 px.

Ma vidéo Vimeo ne se lance pas dans la lightbox.

Si elle est non répertoriée, il lui faut son hash de confidentialité dans le lien, comme vimeo.com/123456789/abcdef1234 — collez l'URL complète depuis le bouton Partager. Une vidéo dont le propriétaire a désactivé l'intégration ne peut être lue sur aucun site.

Un lien n'est pas accepté.

Collez l'URL complète depuis la barre d'adresse ou le bouton Partager. Le badge sous le champ vous indique immédiatement si le lien est reconnu et vous réaffiche l'identifiant de la vidéo qu'il a extrait, vous n'avez donc jamais à enregistrer en croisant les doigts.

Une de mes vidéos affiche un avertissement "Product deleted".

Le produit vers lequel pointait cette vidéo a été supprimé. Modifiez la ligne pour choisir un autre produit, ou supprimez la ligne.

Le slider ne s'affiche pas du tout.

Il ne s'affiche que si au moins une vidéo est active et que son produit est actif dans la boutique en cours. Vérifiez la colonne Status dans la liste, ainsi que le statut du produit lui-même.

Que devient la colonne ajoutée à ma table produit par la version 1 ?

La mise à jour migre vos vidéos hors de cette colonne, puis la supprime. La désinstallation la supprime également. Votre base de données retrouve l'état qui était le sien avant que le module ne soit installé.