Panneau latéral
Affiche un lecteur vidéo ou une grille de miniatures à côté de la description produit — près du prix, du bouton d'ajout au panier et des autres éléments d'achat — sans toucher à la galerie d'images.
Disponible depuis la v3.0.0
Vue d'ensemble
Le panneau latéral vous offre une deuxième zone d'affichage vidéo sur la page produit, positionnée dans la colonne d'informations produit plutôt que dans la bande photo. Cela place le contenu vidéo là où se prennent les décisions d'achat : près du titre, de la description courte, du prix ou du bloc d'ajout au panier.
Vous pouvez choisir entre deux styles d'affichage. Le premier affiche la vidéo intégrée et prête à lire immédiatement, sans aucun clic requis. Le second affiche une grille de miniatures compacte où les clients cliquent sur une miniature pour ouvrir le lecteur en plein écran dans une superposition lightbox. Les deux styles sont entièrement compatibles avec YouTube, Vimeo, HTML5 et les fournisseurs vidéo personnalisés.
Le panneau latéral est indépendant des fonctionnalités Galerie d'images et Onglets. Vous pouvez utiliser les trois simultanément, ou n'utiliser que le panneau latéral seul. L'emplacement est hautement configurable : un hook PrestaShop standard (le plus compatible), plusieurs positions prédéfinies sur la page produit, ou tout sélecteur CSS de votre choix.
Configuration
- Allez dans Modules > Gestionnaire de modules, trouvez Product Video et cliquez sur Configurer.
- Ouvrez l'onglet Panneau latéral.
- Ajustez les paramètres ci-dessous, puis cliquez sur Enregistrer.
Activer
| Champ | Valeurs | Défaut | Description |
|---|---|---|---|
| Activer / désactiver cette fonctionnalité | Oui / Non | Oui | Interrupteur principal. Désactivez cette option pour masquer le panneau latéral sans perdre votre configuration. |
| Afficher sur | Tous les appareils / Bureau uniquement / Mobile et tablette uniquement | Tous les appareils | Restreint le panneau latéral à des types d'appareils spécifiques. Utile lorsque le panneau s'affiche bien sur ordinateur mais prend trop de place sur mobile. |
Emplacement (PrestaShop 1.6)
| Champ | Valeurs | Défaut | Description |
|---|---|---|---|
| Emplacement | Colonne gauche / Colonne droite | Colonne droite | Injecte le panneau dans la zone de widgets de la colonne gauche ou droite de votre thème. S'applique uniquement sur PrestaShop 1.5–1.6. |
Emplacement (PrestaShop 1.7+)
| Champ | Valeurs | Défaut | Description |
|---|---|---|---|
| Emplacement | Emplacement des boutons supplémentaires / Après les miniatures produit / Le titre / La description courte / Le prix / Le bloc quantité–ajout au panier / Emplacement personnalisé | Emplacement des boutons supplémentaires | Position sur la page produit où le panneau latéral est injecté. Voir les notes ci-dessous pour chaque option. |
| Sélecteur d'emplacement personnalisé | Tout sélecteur CSS/jQuery | — | Visible uniquement lorsque Emplacement personnalisé est sélectionné. Entrez le sélecteur de l'élément cible sur votre thème (ex. .product-variants ou #main .product-add-to-cart). |
| Mode d'insertion | Avant / Au début / À la fin / Après | Après | Contrôle comment le panneau est inséré par rapport à l'élément choisi. Avant et Après le placent à l'extérieur de l'élément ; Au début et À la fin le placent à l'intérieur. |
Emplacement des boutons supplémentaires utilise le hook
displayProductAdditionalInfode PrestaShop — l'option la plus sûre car elle ne nécessite aucune manipulation du DOM. Si votre thème ne rend pas ce hook, choisissez une position prédéfinie ou utilisez l'emplacement personnalisé.
Après les miniatures produit utilise le hook
displayAfterProductThumbs. Le template produit de votre thème doit inclure{hook h="displayAfterProductThumbs" product=$product}pour que cela fonctionne.
Les positions prédéfinies (titre, description courte, prix, ajout au panier) utilisent l'injection JavaScript dans le DOM et ne sont pas compatibles avec les constructeurs de pages tels qu'Elementor ou Divi.
Style d'affichage
| Champ | Valeurs | Défaut | Description |
|---|---|---|---|
| Affichage des vidéos | Afficher la première vidéo intégrée / Afficher une liste de miniatures | Afficher une liste de miniatures | Choisissez d'afficher un lecteur intégré immédiatement ou une grille de miniatures cliquables. |
| Nombre de vidéos par ligne | 2 / 3 / 4 / 5 / 6 | 3 | S'applique lorsque Afficher une liste de miniatures est sélectionné. Définit le nombre de colonnes de miniatures dans la grille. |
Titre
| Champ | Valeurs | Défaut | Description |
|---|---|---|---|
| Affichage du titre | Oui / Non | Non | Lorsqu'il est activé, un en-tête apparaît au-dessus du panneau. |
| Formatage du titre | h2 / h3 / h4 / h5 / p / span | h3 | L'élément HTML utilisé pour l'en-tête. Choisissez un niveau adapté à la hiérarchie des titres de votre thème. |
| Classe du conteneur de titre | Texte | — | Classe CSS optionnelle ajoutée à l'élément de titre. Utilisez-la pour appliquer des styles personnalisés sans modifier les fichiers de votre thème. |
Modal vue rapide
| Champ | Valeurs | Défaut | Description |
|---|---|---|---|
| Afficher dans la vue modale | Oui / Non | Non | PrestaShop 1.7+ uniquement. Lorsqu'il est activé, le panneau latéral s'affiche également dans la popup de vue rapide du produit. |
Fonctionnement
Mode lecteur intégré
Lorsque Afficher la première vidéo intégrée est sélectionné, le module affiche une iframe pour la première vidéo du produit directement sur la page. Le lecteur est visible et prêt à lire dès le chargement de la page — aucune interaction n'est requise. Ce mode est idéal lorsque vous avez une vidéo principale que vous souhaitez que les clients voient immédiatement.
Mode liste de miniatures
Lorsque Afficher une liste de miniatures est sélectionné, les clients voient une grille d'images miniatures de vidéos. La grille occupe la largeur disponible selon le nombre de colonnes spécifié. Cliquer sur une miniature ouvre cette vidéo dans une superposition lightbox FancyBox. Les clients peuvent parcourir toutes les miniatures avant de choisir quelle vidéo regarder.
Emplacement et injection
Pour les emplacements basés sur les hooks (emplacement des boutons supplémentaires, après les miniatures produit), le module rend le panneau côté serveur via le système de hooks de PrestaShop. Aucune injection JavaScript n'est nécessaire, ce qui en fait les options les plus fiables.
Pour les positions prédéfinies et l'emplacement personnalisé, le module utilise JavaScript pour trouver l'élément cible et appeler .before(), .prepend(), .append() ou .after() de jQuery selon le Mode d'insertion sélectionné.
Modal vue rapide
Lorsque Afficher dans la vue modale est activé, le module détecte l'ouverture de la modale de vue rapide et affiche le panneau latéral à l'intérieur. Cela permet aux clients de regarder des vidéos sans naviguer vers la page produit complète.
Exemples d'utilisation
Exemple : Vidéo à côté du bouton d'ajout au panier pour un produit avec une vidéo principale
Vous vendez un mixeur et disposez d'une vidéo de démonstration. Définissez Affichage des vidéos sur Afficher la première vidéo intégrée, Emplacement sur Le bloc quantité / ajout au panier, et Mode d'insertion sur Avant. Le lecteur vidéo apparaît directement au-dessus du bouton d'ajout au panier, visible dès le chargement de la page. Aucun défilement ni clic n'est nécessaire.
Exemple : Grille de miniatures sous la description courte pour un produit avec plusieurs angles
Vous vendez des meubles avec cinq vidéos sous différents angles. Définissez Affichage des vidéos sur Afficher une liste de miniatures, Nombre de vidéos par ligne sur 3, et Emplacement sur La description courte avec Mode d'insertion sur Après. Les clients voient une bande de miniatures en 3 colonnes immédiatement après la description courte. Cliquer sur une miniature ouvre un lightbox en plein écran.
Exemple : Emplacement personnalisé sur un thème avec une mise en page non standard
Votre thème place le bloc d'ajout au panier dans un conteneur personnalisé <div class="my-theme-purchase">. Définissez Emplacement sur Emplacement personnalisé, entrez .my-theme-purchase comme sélecteur, et définissez Mode d'insertion sur Avant. Le panneau latéral apparaît juste au-dessus de ce conteneur, quelle que soit la structure du thème.
Remarques importantes
- Le panneau latéral et la galerie d'images sont totalement indépendants. Activer l'un n'affecte pas l'autre.
- Sur PrestaShop 1.6, seules les options Colonne gauche et Colonne droite s'appliquent. Le sélecteur de position PS 1.7 est ignoré.
- Les positions prédéfinies et l'emplacement personnalisé utilisent l'injection JavaScript dans le DOM au chargement de la page. Si l'élément cible n'existe pas dans le DOM lorsque le script s'exécute, le panneau n'apparaîtra pas. Vérifiez le sélecteur avec l'inspecteur de votre navigateur.
- L'emplacement personnalisé n'est pas compatible avec les constructeurs de pages (Elementor, Divi, WPBakery) qui rendent le contenu de manière asynchrone.
- Nombre de vidéos par ligne n'affecte que le mode d'affichage en liste de miniatures. Il n'a aucun effet lorsque le mode lecteur intégré est sélectionné.
- L'option Modal vue rapide est masquée sur PrestaShop 1.6 — elle ne concerne que les thèmes 1.7+ qui incluent une fonctionnalité de vue rapide.
- Dans une configuration multi-boutique, les paramètres du panneau latéral sont propres à chaque boutique. Vous pouvez activer le panneau latéral sur une boutique et le désactiver sur une autre, ou utiliser des emplacements différents par boutique.
Résolution des problèmes
| Problème | Solution |
|---|---|
| Le panneau latéral n'apparaît nulle part sur la page | Vérifiez que Activer / désactiver cette fonctionnalité est sur Oui et que Afficher sur correspond à l'appareil que vous testez. Si vous utilisez un emplacement basé sur les hooks, vérifiez que le hook est présent dans votre thème. |
| Le panneau apparaît au mauvais endroit | Passez à Emplacement personnalisé, ouvrez l'inspecteur de votre navigateur, trouvez l'élément conteneur exact, copiez son sélecteur CSS et collez-le dans Sélecteur d'emplacement personnalisé. Ajustez le Mode d'insertion pour le placer avant ou après. |
| Le panneau chevauche le bouton d'ajout au panier ou le prix | Changez le Mode d'insertion de À la fin (à l'intérieur) à Après (à l'extérieur). Cela place le panneau après le conteneur plutôt qu'à l'intérieur. |
| Le panneau apparaît sur ordinateur mais pas sur mobile | Afficher sur est défini sur Bureau uniquement. Changez-le sur Tous les appareils ou Mobile et tablette uniquement selon vos besoins. |
| La modale de vue rapide n'affiche pas le panneau latéral | Confirmez que Afficher dans la vue modale est sur Oui et que vous êtes sur PrestaShop 1.7+. Certains plugins de vue rapide tiers utilisent une structure de modale différente que le module ne peut pas détecter automatiquement. |
| L'en-tête de titre perturbe la mise en page | Définissez Affichage du titre sur Non si l'en-tête n'est pas nécessaire. Sinon, ajustez Formatage du titre pour correspondre au niveau de titre attendu par votre thème, ou utilisez Classe du conteneur de titre pour appliquer une surcharge CSS. |
Foire aux questions
Puis-je afficher des vidéos différentes dans le panneau latéral et dans la galerie d'images ?
Non — les deux affichent les mêmes entrées vidéo associées au produit. Ce qui diffère, c'est le style d'affichage, l'emplacement et la présentation du lecteur. Vous contrôlez quelles vidéos apparaissent en gérant la liste des vidéos du produit.
Le panneau latéral ralentit-il le chargement de la page ?
Les emplacements basés sur les hooks (emplacement des boutons supplémentaires, après les miniatures produit) sont rendus côté serveur avec la page, donc il n'y a pas de temps de chargement supplémentaire. Les positions prédéfinies et l'emplacement personnalisé injectent le contenu via JavaScript après le chargement du DOM, ce qui ajoute un bref délai avant l'apparition du panneau, mais il ne s'agit pas d'une requête réseau supplémentaire.
Que se passe-t-il si je configure la galerie d'images et le panneau latéral pour afficher tous les deux un lecteur intégré ?
Les deux s'afficheront indépendamment. La galerie d'images intègre la vidéo dans la zone du carrousel photo ; le panneau latéral l'intègre dans la colonne d'informations produit. C'est tout à fait valide et certains marchands l'utilisent intentionnellement pour rendre la vidéo impossible à manquer.
Puis-je limiter le panneau latéral aux clients enregistrés uniquement ?
Pas directement depuis les paramètres du panneau latéral. Utilisez la fonctionnalité Restrictions d'accès (disponible dans la configuration du module) pour restreindre les groupes de clients pouvant voir les vidéos sur tous les emplacements d'affichage, y compris le panneau latéral.
L'option « Après les miniatures produit » est sélectionnée mais rien n'apparaît. Pourquoi ?
Cette option repose sur la présence du hook displayAfterProductThumbs dans le template produit de votre thème. De nombreux thèmes ne l'incluent pas. Ouvrez le fichier product.tpl du thème (ou product.html.twig sur PS 1.7) et vérifiez la présence de ce hook. S'il est absent, passez à un autre emplacement ou utilisez l'emplacement personnalisé.
Puis-je afficher le panneau latéral uniquement sur certains produits ?
Le panneau latéral s'affiche uniquement sur les produits auxquels au moins une vidéo est associée. Si un produit n'a pas de vidéo, le panneau latéral ne s'affiche pas pour lui, quels que soient vos paramètres.
Fonctionnalités associées
- Emplacement dans la galerie d'images — Intégrer des vidéos dans la bande photo du produit
- Onglets et description — Afficher un lecteur plein écran dans un onglet produit dédié ou sous la description
- Listes de produits — Afficher des indicateurs vidéo ou des miniatures sur les pages de catégorie et de résultats de recherche
- Restrictions d'accès — Restreindre les groupes de clients pouvant voir les vidéos