Onglets & Emplacement de la description

Ajoute une section vidéo dédiée dans la partie inférieure de la page produit — soit dans la barre d'onglets du produit, dans le pied de page produit, ou à une position personnalisée dans votre thème — avec un lecteur intégré complet ou une liste de miniatures cliquables.

remarque

Disponible depuis la v3.0.0

Vue d'ensemble

Cet emplacement est conçu pour les vidéos longues et les démonstrations produit détaillées, là où vous souhaitez séparer le contenu vidéo de la galerie et de la zone d'ajout au panier. Au lieu de concurrencer l'attention près des images produit, les vidéos apparaissent plus bas sur la page, là où les clients désireux d'en savoir plus font naturellement défiler.

Vous disposez de trois options d'emplacement : dans la barre d'onglets du produit (aux côtés de Description, Détails et autres onglets natifs), dans la zone de pied de page produit juste en dessous du bloc d'onglets, ou via un hook personnalisé que vous pouvez placer n'importe où dans votre template de thème. Dans chaque emplacement, vous pouvez choisir entre un lecteur intégré complet et une grille de miniatures qui ouvre une lightbox en pop-up.

La section n'est affichée que pour les produits auxquels des vidéos sont effectivement assignées. Les produits sans vidéo ne montrent ni onglet, ni bloc de pied de page, ni sortie de hook — vous ne verrez donc jamais un onglet « Vidéos » vide.

Configuration

Allez dans Modules > Gestionnaire de modules > Product Video > Configurer, puis ouvrez la section Onglets & Description.

Activer

Champ	Valeurs	Par défaut	Description
Activer / désactiver cette fonctionnalité	Oui / Non	Non	Interrupteur principal. Activez cette option pour activer l'emplacement Onglets & Description.
Afficher sur	Tous les appareils / Ordinateurs uniquement / Mobiles et tablettes uniquement	Tous les appareils	Limiter cet emplacement à des types d'appareils spécifiques. Utilisez cette option si un autre emplacement couvre déjà le mobile et que vous souhaitez l'onglet uniquement sur ordinateur, ou inversement.

Emplacement & Style

Champ	Valeurs	Par défaut	Description
Emplacement	Onglets produit / Pied de page produit / Hook DisplayProductVideosContent	Pied de page produit	Où la section vidéo apparaît sur la page produit. Voir « Comment ça fonctionne » ci-dessous pour les détails de chaque option.
Affichage	Lecteur avec vidéos en dessous / Liste de miniatures avec pop-up au clic	Lecteur avec vidéos en dessous	Comment les vidéos sont présentées. Le lecteur est intégré directement sur la page ; la liste de miniatures affiche une grille cliquable qui ouvre chaque vidéo dans une lightbox pop-up.

Dimensions du lecteur

Ces deux champs sont ignorés lorsque Rendre la vidéo responsive est activé.

Champ	Valeurs	Par défaut	Description
Largeur de la vidéo	Nombre (pixels, sans suffixe px)	720	Largeur du lecteur intégré.
Hauteur de la vidéo	Nombre (pixels, sans suffixe px)	520	Hauteur du lecteur intégré.
Rendre la vidéo responsive	Oui / Non	Oui	Redimensionne le lecteur pour remplir la largeur du conteneur tout en maintenant le ratio d'aspect. Recommandé pour les thèmes responsives modernes.

Grille de miniatures

Ce paramètre s'applique uniquement lorsque Affichage est défini sur « Liste de miniatures avec pop-up au clic ».

Champ	Valeurs	Par défaut	Description
Nombre de vidéos par ligne	4 / 5 / 6 / 7 / 8	6	Nombre de colonnes de miniatures dans la grille.

Enregistrez vos modifications après avoir ajusté un paramètre. L'aperçu sur le front-office se met à jour immédiatement après avoir vidé tout cache Smarty utilisé par votre thème.

Comment ça fonctionne

Emplacement Onglets produit

Lorsque vous sélectionnez Onglets produit, le module se connecte aux hooks displayProductTab et displayProductTabContent (PS 1.6) ou displayProductExtraContent (PS 1.7+) pour injecter un onglet « Vidéos » aux côtés des onglets produit intégrés. Sur PrestaShop 1.7 et ultérieur, le titre de l'onglet est défini sur « Vidéos » automatiquement via l'API ProductExtraContent, ce qui signifie qu'il s'intègre proprement avec l'ordre des onglets et le style CSS géré par votre thème.

L'onglet n'apparaît que lorsqu'au moins une vidéo est assignée au produit. Si le produit n'a pas de vidéo, l'onglet n'est pas affiché du tout — vos clients ne verront jamais un onglet Vidéos vide.

L'emplacement Onglets produit requiert que votre thème appelle les hooks pertinents dans son template de produit. Le thème Classic par défaut (PS 1.7+) et la plupart des thèmes commerciaux le prennent en charge. Si l'onglet n'apparaît pas après activation, votre thème n'implémente probablement pas ces hooks — passez à l'emplacement Pied de page produit à la place.

Emplacement Pied de page produit

Lorsque vous sélectionnez Pied de page produit, le module utilise displayFooterProduct. La section vidéo s'affiche sous tous les onglets et le contenu de description, avant le pied de page. Cette option fonctionne avec pratiquement tous les thèmes PrestaShop car displayFooterProduct est un hook standard présent depuis PS 1.6.

Sur PS 1.6, l'alias hookProductFooter est également enregistré, de sorte que les deux conventions de nommage sont couvertes automatiquement.

Hook DisplayProductVideosContent (emplacement personnalisé)

Lorsque vous sélectionnez l'option Hook DisplayProductVideosContent, le module répond au hook personnalisé displayProductVideosContent mais ne produit aucune sortie tant que vous n'ajoutez pas vous-même l'appel au hook dans votre template de thème. Cela vous donne un contrôle total sur l'emplacement exact de la section vidéo sur la page produit.

Pour l'activer, ouvrez le fichier product.tpl de votre thème (ou le fichier équivalent) et ajoutez cette ligne à l'endroit souhaité :

{hook h='displayProductVideosContent' product=$product}

C'est la seule option d'emplacement qui nécessite une modification manuelle du template. Les deux autres options fonctionnent sans toucher aux fichiers du thème.

Dimensions responsive vs fixes

Avec Rendre la vidéo responsive activé (par défaut), le lecteur s'étend pour remplir 100 % de la largeur de son conteneur et ajuste sa hauteur proportionnellement. Les valeurs de Largeur de la vidéo et de Hauteur de la vidéo sont entièrement ignorées dans ce mode.

Avec Rendre la vidéo responsive désactivé, le lecteur est affiché aux dimensions en pixels exactes que vous spécifiez. Utilisez cette option lorsque votre mise en page a un conteneur à largeur fixe et que vous avez besoin que le lecteur corresponde à une taille précise — par exemple, pour s'aligner avec une barre latérale ou une colonne de grille spécifique.

Filtrage par appareil

Le paramètre Afficher sur est évalué côté serveur à l'aide de la détection mobile de PrestaShop. En le définissant sur « Ordinateurs uniquement », la section est entièrement masquée sur les téléphones et tablettes ; « Mobiles et tablettes uniquement » la masque sur les navigateurs de bureau. Utilisez cette option pour éviter de dupliquer le contenu vidéo lorsque vous avez déjà activé un autre emplacement (tel que le panneau latéral) pour une catégorie d'appareils.

Exemples d'utilisation

Exemple : Ajout d'un onglet Vidéos aux côtés de Description et Détails

Vous vendez des objectifs d'appareil photo. Chaque objectif dispose d'une vidéo de présentation de 3 minutes. Activez cette fonctionnalité, définissez Emplacement sur « Onglets produit », laissez Affichage sur « Lecteur avec vidéos en dessous » et activez Rendre la vidéo responsive. Les clients voient un onglet « Vidéos » à côté de « Description » et cliquent dessus pour regarder la présentation sans quitter la page.

Exemple : Grille de miniatures en pied de page pour un produit avec de nombreuses vidéos

Vous vendez des formations en ligne et chaque produit dispose de 6 miniatures d'extraits en aperçu. Définissez Emplacement sur « Pied de page produit », Affichage sur « Liste de miniatures avec pop-up au clic » et Nombre de vidéos par ligne sur 6. Les six miniatures apparaissent en une seule ligne sous la description. Les clients cliquent sur n'importe quelle miniature pour ouvrir cet extrait dans une lightbox.

Exemple : Lecteur à taille fixe dans une mise en page à colonnes étroites

Votre thème dispose d'une mise en page à deux colonnes sur la page produit et la colonne de droite fait 480 px de large. Définissez Emplacement sur « Pied de page produit », désactivez Rendre la vidéo responsive et définissez Largeur de la vidéo sur 460 et Hauteur de la vidéo sur 260. Le lecteur s'intègre parfaitement dans la colonne sans débordement.

Remarques importantes

• Sur PrestaShop 1.6, l'option « Onglets produit » utilise displayProductTab / displayProductTabContent. Sur PS 1.7+, elle utilise displayProductExtraContent. Les deux sont gérés automatiquement — vous n'avez rien à modifier lors d'une mise à niveau.
• La note sur l'option responsive dans le Back Office indique « Fonctionne uniquement pour les options TAB et Description produit » — cela signifie qu'elle s'applique uniquement à l'emplacement Onglets & Description et n'affecte pas les emplacements Galerie d'images ou Panneau latéral.
• Cet emplacement est compatible multi-boutiques. Les paramètres sont enregistrés par contexte de boutique, vous pouvez donc l'activer sur une boutique et le désactiver sur une autre.
• Si le filtre d'appareil Afficher sur est actif et que vous testez dans un navigateur de bureau, passez temporairement à « Tous les appareils » pour confirmer que la section s'affiche correctement avant de réappliquer le filtre d'appareil.
• Les clés de configuration PV_VIDEOW et PV_VIDEOH sont également utilisées par la fonctionnalité de carrousel AMP lorsque la prise en charge AMP est activée. Les modifier ici affecte les deux.

Résolution des problèmes

Problème	Solution
L'onglet Vidéos n'apparaît jamais	Vérifiez que votre thème appelle {hook h='displayProductTab'} et {hook h='displayProductTabContent'} dans son template de produit. Si ce n'est pas le cas, changez Emplacement pour « Pied de page produit ».
L'onglet apparaît sur PS 1.7 mais est vide	Vérifiez qu'au moins une vidéo est assignée au produit dans la page d'édition du produit. Le hook retourne une sortie vide pour les produits sans vidéo, mais le cadre de l'onglet peut tout de même s'afficher selon votre thème.
Le lecteur est trop large et déborde	Activez Rendre la vidéo responsive pour que le lecteur s'adapte au conteneur, ou réduisez la Largeur de la vidéo pour correspondre à votre mise en page.
Les dimensions du lecteur semblent n'avoir aucun effet	Rendre la vidéo responsive est probablement activé. Désactivez-le pour utiliser les valeurs de largeur et hauteur fixes.
L'option hook personnalisé n'affiche rien	Vous devez ajouter manuellement {hook h='displayProductVideosContent' product=$product} au fichier product.tpl de votre thème. Le hook ne produit du contenu qu'après l'ajout de cette ligne.
Les vidéos apparaissent sur mobile alors que le paramètre est défini sur Ordinateurs uniquement	Videz le cache de template Smarty de votre thème. La détection d'appareil est côté serveur, mais les templates mis en cache peuvent servir une sortie obsolète.

Foire aux questions

Un onglet Vidéos apparaîtra-t-il pour les produits qui n'ont pas de vidéo ?

Non. L'onglet et le bloc de pied de page ne sont affichés que lorsque le produit dispose d'au moins une vidéo assignée. Les produits sans vidéo ne produisent aucune sortie depuis cet emplacement.

Quelle est la différence entre « Lecteur avec vidéos en dessous » et « Liste de miniatures avec pop-up au clic » ?

L'option lecteur intègre un lecteur vidéo complet directement sur la page pour que les clients puissent regarder sans clic supplémentaire. La liste de miniatures affiche une grille de miniatures vidéo ; les clients cliquent sur une miniature pour ouvrir la vidéo dans une lightbox pop-up. Utilisez le lecteur lorsque vous avez une vidéo principale par produit, et la liste de miniatures lorsque les produits ont plusieurs vidéos que vous souhaitez parcourir.

Mon thème utilise un page builder et le hook d'onglet produit n'est pas disponible. Que faire ?

Sélectionnez l'option Hook DisplayProductVideosContent et ajoutez {hook h='displayProductVideosContent' product=$product} à la mise en page de la page produit dans l'éditeur de template de votre page builder. Si votre page builder ne prend pas en charge l'injection de hook, utilisez Pied de page produit à la place — il fonctionne avec presque tous les thèmes et builders.

L'activation de cet emplacement ralentit-elle les pages produit ?

Le module ne charge les données vidéo et ne génère une sortie que sur les pages produit où cet emplacement est actif. Pour les produits sans vidéo, le hook retourne immédiatement une chaîne vide, il n'y a donc aucune surcharge de requête pour les produits sans vidéo.

Puis-je afficher l'onglet sur ordinateur et le pied de page sur mobile en même temps ?

Pas avec une seule instance de cet emplacement. Pour obtenir des emplacements spécifiques à l'appareil, définissez cet emplacement pour un emplacement et utilisez le Panneau latéral ou un autre emplacement pour l'autre catégorie d'appareils, en contrôlant chacun avec le filtre d'appareil Afficher sur.

Le paramètre « Nombre de vidéos par ligne » ne fait rien. Pourquoi ?

Ce paramètre s'applique uniquement lorsque Affichage est défini sur « Liste de miniatures avec pop-up au clic ». Si vous utilisez l'option « Lecteur avec vidéos en dessous », le nombre de colonnes n'a aucun effet.

Fonctionnalités associées

• Emplacement Galerie d'images — Intégrer les vidéos directement dans les miniatures photo du produit
• Panneau latéral — Afficher les vidéos à côté du prix et du bouton d'ajout au panier
• Listes de produits — Afficher des icônes ou lecteurs vidéo sur les pages de catégorie et de résultats de recherche