CSS & JavaScript personnalisés
Injectez vos propres règles CSS et JavaScript directement dans le module sans modifier les fichiers du thème, et connectez-vous aux événements clés du cycle de vie vidéo grâce à des callbacks dédiés.
Disponible depuis la v3.2.0
Vue d'ensemble
La section CSS / JS personnalisé vous offre un espace dédié dans le Back Office pour étendre et personnaliser le comportement frontal du module. Tout CSS saisi est ajouté après la feuille de style par défaut du module, de sorte que vos règles remportent toujours la course à la spécificité. Le JavaScript saisi est chargé en tant que fichier séparé et a accès à jQuery ainsi qu'à toutes les variables front-office de PrestaShop.
Au-delà du CSS et du JS généraux, la section expose trois callbacks JavaScript structurés qui se déclenchent au bon moment : immédiatement après l'injection des miniatures vidéo dans la page, lorsqu'une miniature est cliquée, et lorsqu'une visite depuis un mobile ou une fenêtre étroite est détectée. Ces callbacks vous permettent d'ajouter des analyses, de réinitialiser des sliders ou d'appliquer un comportement spécifique au tactile sans modifier directement les fichiers du module.
Le CSS personnalisé est stocké dans views/css/pv_custom.css et le JavaScript personnalisé dans views/js/pv_custom.js à l'intérieur du dossier du module. Ces fichiers ne sont chargés que sur les pages où le module est actif, et uniquement lorsqu'ils contiennent du contenu.
Configuration
Allez dans Modules > Gestionnaire de modules > Product Video > Configurer, puis naviguez vers l'onglet CSS / JS personnalisé.
CSS personnalisé
| Champ | Défaut | Description |
|---|---|---|
| Saisir le CSS personnalisé ici | (vide) | Règles CSS chargées après la feuille de style par défaut du module. Rédigez du CSS standard ciblant les classes des éléments du module. Aucune balise <style> n'est nécessaire. |
JavaScript global
| Champ | Défaut | Description |
|---|---|---|
| JavaScript global | (vide) | JavaScript qui s'exécute sur chaque page où le module est actif. Rédigez du code brut — pas de balises <script>. jQuery ($) et tous les globaux front-office de PrestaShop sont disponibles. |
JavaScript spécifique mobile
| Champ | Valeurs | Défaut | Description |
|---|---|---|---|
| JavaScript spécifique mobile | Tout JS | (vide) | JavaScript qui s'exécute uniquement lorsque le visiteur est sur un appareil mobile ou lorsque la largeur de la fenêtre est inférieure ou égale à la valeur du Point de rupture mobile. |
| Point de rupture mobile (px) | Entier | 768 | Seuil de largeur de fenêtre en pixels. Lorsque la fenêtre du navigateur a cette largeur ou moins, le JavaScript spécifique mobile s'active — même sur un navigateur de bureau. Le callback mobile se déclenche également lorsque la page est redimensionnée au-delà de ce seuil. |
Valeurs de point de rupture courantes : 480 (mobile), 768 (tablette), 992 (petit bureau), 1200 (bureau).
Callbacks avancés
Ces callbacks sont des fonctions JavaScript nommées que le module appelle à des moments précis du cycle de vie. Vous rédigez uniquement le corps de la fonction — le module se charge de l'appeler au bon moment.
| Champ callback | Signature de fonction | Moment de déclenchement | Variables disponibles |
|---|---|---|---|
| JS : Après insertion des miniatures | afterVideoInsert() | Immédiatement après l'injection des miniatures vidéo dans le DOM, y compris après les changements de déclinaison et les actualisations AJAX | — |
| JS : Gestionnaire de clic sur miniature | afterVideoClick(is_video, e) | Lorsqu'une miniature de produit est cliquée | is_video (booléen — true pour les miniatures vidéo, false pour les miniatures image), e (l'objet événement de clic jQuery) |
Le callback Après insertion des miniatures peut se déclencher plusieurs fois par chargement de page (par exemple, après un changement de déclinaison de produit). Rédigez du code qui peut s'exécuter plusieurs fois sans problème.
Vous pouvez appeler
e.preventDefault()oue.stopPropagation()dans le Gestionnaire de clic sur miniature si nécessaire, bien que cela puisse empêcher le comportement d'ouverture vidéo par défaut du module.
Fonctionnement
Chargement du CSS
Lorsqu'un visiteur charge une page produit (ou toute page où le module est actif), le module vérifie si views/css/pv_custom.css contient du contenu. Si c'est le cas, il est ajouté à la page en tant que feuille de style séparée, positionnée après le CSS par défaut du module. Cet ordonnancement garantit que vos règles personnalisées remplacent les valeurs par défaut du module sans avoir besoin de !important.
Chargement du JavaScript
Tout le JS personnalisé — code global, code mobile et callbacks — est compilé dans un seul fichier, views/js/pv_custom.js, lorsque vous enregistrez la configuration. Le module charge ce fichier après ses propres scripts, de sorte que votre code peut référencer en toute sécurité toute variable ou fonction que le module a déjà définie.
En interne, le fichier utilise des séparateurs de commentaires (/* ---------- */) pour délimiter chaque section. Le Back Office lit ces délimiteurs pour remplir correctement chaque zone de texte lorsque vous rouvrez la configuration.
Déclenchement du callback mobile
Le callback mobile se déclenche dans deux conditions : le serveur détecte un user-agent mobile (variable is_mobile), ou la largeur de la fenêtre du visiteur est inférieure ou égale à votre valeur de Point de rupture mobile. La vérification s'effectue au chargement de la page et à nouveau à chaque redimensionnement du navigateur, avec un anti-rebond de 250 ms. Le callback ne se déclenche que lors de la transition de l'état non-mobile à mobile — pas à chaque événement de redimensionnement.
Callback Après insertion des miniatures
La fonction afterVideoInsert est appelée à l'intérieur de la routine insertThumbnails du module, directement après que les miniatures ont été ajoutées au DOM. C'est le moment idéal pour réinitialiser un slider, attacher des gestionnaires d'événements personnalisés ou appliquer un style qui dépend de la présence des miniatures.
Gestionnaire de clic sur miniature
La fonction afterVideoClick est appelée à chaque clic sur une miniature, avec is_video défini à true pour les miniatures vidéo et false pour les miniatures image (non-vidéo). L'argument e est l'objet événement jQuery brut du gestionnaire de clic.
Exemples d'utilisation
Exemple : Styliser le badge superposé sur la vidéo
Vous souhaitez que les miniatures vidéo affichent une icône de lecture blanche au lieu de la couleur par défaut :
.pv-badge-icon {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.55);
}
Collez ceci dans Saisir le CSS personnalisé ici et enregistrez.
Exemple : Envoyer un événement Google Analytics 4 lors du clic sur une miniature vidéo
Dans le champ JS : Gestionnaire de clic sur miniature, saisissez :
if (is_video) {
gtag('event', 'video_thumbnail_click', {
event_category: 'Product Video',
event_label: window.location.pathname
});
}
Le callback reçoit is_video comme booléen, vous ne déclenchez donc l'événement que pour les clics vidéo réels.
Exemple : Réinitialiser un slider Slick après l'insertion des miniatures
Si votre thème utilise un slider Slick pour la galerie d'images et que les vidéos sont injectées de manière asynchrone, le slider peut ne pas les prendre en compte. Dans le champ JS : Après insertion des miniatures, saisissez :
if ($.fn.slick && $('.product-images').hasClass('slick-initialized')) {
$('.product-images').slick('reinit');
}
Cela vérifie de manière sécurisée que Slick est présent et déjà initialisé avant d'appeler reinit.
Exemple : Ajuster la largeur de la vidéo uniquement sur les écrans étroits
Dans le champ JavaScript spécifique mobile, avec le Point de rupture mobile défini à 640 :
$('.pv-video-wrapper').css('max-width', '100%');
Cela s'exécute uniquement lorsque la fenêtre du visiteur a une largeur de 640 px ou moins.
Remarques importantes
- Des permissions d'écriture sur les fichiers sont requises. Le module écrit directement dans
views/css/pv_custom.cssetviews/js/pv_custom.jsà l'intérieur de son propre dossier. Si le serveur web ne peut pas écrire dans ces fichiers, une erreur s'affiche dans le Back Office après l'enregistrement. Vérifiez que le dossier du module est accessible en écriture par l'utilisateur du serveur web. - Videz le cache PrestaShop après l'enregistrement si vos modifications n'apparaissent pas immédiatement en front office. Allez dans Paramètres avancés > Performances et cliquez sur Vider le cache.
- Le point de rupture mobile contrôle uniquement le callback mobile, pas la mise en page CSS responsive du module. Modifier cette valeur n'affecte pas le moment où les media queries intégrées du module s'activent.
- Pas de balises
<script>ou<style>. Rédigez uniquement du code brut dans toutes les zones de texte. Le module encapsule et charge votre code correctement. - Les fichiers CSS et JS sont inclus dans la sauvegarde/restauration de configuration. Lorsque vous utilisez la fonctionnalité Sauvegarder la configuration / Charger la configuration du module, votre CSS et JS personnalisés sont sauvegardés et restaurés avec tous les autres paramètres.
- Multi-boutique : Les fichiers CSS et JS personnalisés sont stockés sur le disque à l'intérieur du dossier du module, qui est partagé entre toutes les boutiques. Si vous gérez plusieurs boutiques, toutes chargent le même CSS et JS personnalisés. Il n'existe pas de substitution par boutique pour cette fonctionnalité.
Résolution des problèmes
| Problème | Solution |
|---|---|
| Le CSS personnalisé n'est pas visible en front office | Videz le cache PrestaShop dans Paramètres avancés > Performances > Vider le cache. Vérifiez également l'absence d'erreurs de syntaxe CSS — une règle non fermée peut invalider silencieusement tout ce qui suit. |
| L'enregistrement échoue avec une erreur d'écriture de fichier | L'utilisateur du serveur web n'a pas accès en écriture à views/css/ ou views/js/ dans le dossier du module. Corrigez les permissions du dossier (généralement 755 pour les répertoires, 644 pour les fichiers, appartenant à l'utilisateur du serveur web). |
| Le JS mobile se déclenche sur un écran de bureau | La fenêtre de votre navigateur de bureau est plus étroite que la valeur du Point de rupture mobile. Élargissez la fenêtre du navigateur ou réduisez le point de rupture. N'oubliez pas que la vérification s'effectue également au redimensionnement. |
| Le callback Après insertion des miniatures provoque une erreur JS lors du second déclenchement | Le callback se déclenche chaque fois que des miniatures sont insérées, y compris lors des changements de déclinaison. Protégez votre code contre une double exécution — par exemple, vérifiez if ($('.my-element').length === 0) avant de créer des éléments. |
| Le callback de clic sur miniature ne se déclenche pas | Le callback n'est attaché qu'aux miniatures gérées par ce module, dans l'emplacement d'affichage Galerie d'images. Vérifiez que le Placement de la galerie d'images est actif et que les miniatures vidéo s'affichent bien sur la page produit. |
| Le JS personnalisé a été enregistré mais l'ancienne version s'exécute toujours | Votre navigateur sert peut-être une version mise en cache de pv_custom.js. Effectuez un rechargement forcé (Ctrl+Shift+R / Cmd+Shift+R) et videz également le cache PrestaShop. |
Foire aux questions
Dois-je inclure des balises <script> ou <style> dans les zones de texte ?
Non. Rédigez uniquement du code CSS ou JavaScript brut. Le module encapsule et charge chaque bloc dans le type de fichier correct automatiquement.
Mon CSS personnalisé remplacera-t-il les styles par défaut du module ?
Oui. Le fichier CSS personnalisé est chargé après la feuille de style par défaut du module, de sorte que vos règles ont la priorité sans avoir besoin de !important dans la plupart des cas.
Le callback mobile se déclenche-t-il pour les vrais appareils mobiles, ou uniquement en fonction de la largeur d'écran ?
Les deux. Il se déclenche si le serveur détecte un user-agent mobile, ou si la largeur de la fenêtre du visiteur est inférieure ou égale à votre valeur de Point de rupture mobile — l'un ou l'autre étant vrai. Sur un bureau, redimensionner la fenêtre du navigateur en dessous du point de rupture le déclenche également.
Puis-je utiliser le callback afterVideoClick pour empêcher l'ouverture de la vidéo ?
Oui. Appelez e.preventDefault() ou e.stopPropagation() dans le corps du callback. Sachez que cela empêchera également le comportement d'ouverture vidéo propre au module pour les clics concernés.
Que se passe-t-il avec mon code personnalisé lors d'une mise à jour du module ?
Les fichiers CSS et JS personnalisés (pv_custom.css et pv_custom.js) sont stockés séparément des fichiers principaux du module et ne sont pas écrasés lors d'une mise à jour. Votre code personnalisé est préservé.
Le JS personnalisé est-il disponible pour les thèmes PS 1.6 et PS 1.7+ ?
Oui. Le module charge pv_custom.js via le mécanisme standard addJS() de PrestaShop, qui fonctionne sur toutes les versions prises en charge (PrestaShop 1.6, 1.7, 8 et Thirty Bees).
Puis-je cibler des éléments extérieurs au module dans mon CSS personnalisé ?
Oui. Le fichier CSS est une feuille de style globale sur la page, vous pouvez donc cibler tout élément visible en front office. Cependant, cibler des éléments extérieurs au module peut entrer en conflit avec les styles de votre thème ou d'autres modules.
Fonctionnalités associées
- Compatibilité thème — Sélecteurs CSS et paramètres d'adaptation structurelle pour correspondre à la mise en page de votre thème
- Intégration slider — Utilisez le callback Après insertion des miniatures pour réinitialiser le slider d'images de votre thème après l'injection des vidéos