[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fy6eZk1hkTAebDXuXde1wJ5sccd7aTmEdJUgKnsHwgtk":22,"megamenu":60,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":129,"header-db":197,"$fcaRZpKxYDFSkQN5dW8NR4L7dx_d8ee_RsfGrO9rLkSg":210,"footer-db":224},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":33,"psVersions":34,"content":38,"faq":39,"tldr":55,"readingTime":56,"generatedAt":57,"publishDate":57,"relatedArticles":58,"sourceCategory":59},"Charger le CSS d'un module PrestaShop : hooks, chemins et bonnes pratiques","charger-css-module-prestashop-hook-header","Découvrez comment charger correctement les fichiers CSS dans un module PrestaShop via les hooks header. Résolution des problèmes de chemins et d'enregistrement.","developpement",[28,29,30,31,32],"module prestashop","css","hook header","développement module","addCSS","intermediaire",[35,36,37],"1.6","1.7","8.x","\u003Ch2>Pourquoi le CSS de mon module PrestaShop ne se charge pas ?\u003C\u002Fh2>\n\u003Cp>C'est l'un des problèmes les plus fréquents rencontrés par les développeurs de modules PrestaShop : le CSS est bien présent dans le dossier du module, le code semble correct, mais les styles ne s'appliquent tout simplement pas en front-office.\u003C\u002Fp>\n\u003Cp>Dans 90 % des cas, l'origine du problème se situe à l'un de ces trois niveaux :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Le hook `displayHeader` n'est pas enregistré** lors de l'installation du module\u003C\u002Fli>\n\u003Cli>**Le chemin du fichier CSS est incorrect** ou entre en conflit avec une surcharge du thème\u003C\u002Fli>\n\u003Cli>**Un problème de permissions** empêche la lecture du fichier\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Voyons comment diagnostiquer et résoudre chacun de ces cas.\u003C\u002Fp>\n\u003Ch2>Étape 1 : Enregistrer le hook header à l'installation\u003C\u002Fh2>\n\u003Cp>Le hook \u003Ccode>displayHeader\u003C\u002Fcode> (ou \u003Ccode>header\u003C\u002Fcode> en version courte) est le point d'injection qui permet à PrestaShop d'inclure vos fichiers CSS et JavaScript dans le \u003Ccode>\u003Chead>\u003C\u002Fcode> de la page. Si ce hook n'est pas enregistré lors de l'installation du module, vos assets ne seront jamais chargés.\u003C\u002Fp>\n\u003Cp>Voici la méthode \u003Ccode>install()\u003C\u002Fcode> correcte :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\npublic function install()\n{\n    if (Shop::isFeatureActive()) {\n        Shop::setContext(Shop::CONTEXT_ALL);\n    }\n\n    return parent::install()\n        && $this->registerHook('displayHeader')\n        && $this->registerHook('displayHome')\n        && Configuration::updateValue('MON_MODULE_CONFIG', 'valeur_defaut');\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Points importants\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>**`Shop::setContext(Shop::CONTEXT_ALL)`** garantit que le module s'installe sur toutes les boutiques en mode multiboutique. Sans cette ligne, le hook ne sera enregistré que pour la boutique active.\u003C\u002Fli>\n\u003Cli>Utilisez les noms de hooks complets (`displayHeader` plutôt que `header`) pour plus de clarté, bien que PrestaShop accepte les deux.\u003C\u002Fli>\n\u003Cli>L'opérateur `&&` chaîne les conditions : si l'une échoue, l'installation est annulée proprement.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Astuce :\u003C\u002Fstrong> Si votre module est déjà installé sans le hook, vous pouvez l'ajouter sans réinstaller via le back-office : Modules → votre module → Configurer → onglet \"Hooks\" (ou via la page Apparence → Positions).\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>Étape 2 : Déclarer le CSS dans hookDisplayHeader\u003C\u002Fh2>\n\u003Cp>Une fois le hook enregistré, il faut implémenter la méthode correspondante pour injecter vos fichiers CSS :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\npublic function hookDisplayHeader($params)\n{\n    $this->context->controller->addCSS($this->_path . 'views\u002Fcss\u002Fmonmodule.css');\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Charger le CSS uniquement sur certaines pages\u003C\u002Fh3>\n\u003Cp>Il est souvent inutile (et contre-performant) de charger le CSS d'un module sur toutes les pages. Voici comment restreindre le chargement à des pages spécifiques :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\npublic function hookDisplayHeader($params)\n{\n    $controller = Dispatcher::getInstance()->getController();\n\n    \u002F\u002F Charger uniquement sur la page d'accueil\n    if ($controller === 'index') {\n        $this->context->controller->addCSS($this->_path . 'views\u002Fcss\u002Fmonmodule.css');\n        $this->context->controller->addJS($this->_path . 'views\u002Fjs\u002Fmonmodule.js');\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Les noms de contrôleurs courants :\u003C\u002Fp>\n\u003Ctr>\u003Cth>Page\u003C\u002Fth>\u003Cth>Nom du contrôleur\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Accueil\u003C\u002Fth>\u003Cth>`index`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Produit\u003C\u002Fth>\u003Cth>`product`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Catégorie\u003C\u002Fth>\u003Cth>`category`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Panier\u003C\u002Fth>\u003Cth>`cart`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>Commande\u003C\u002Fth>\u003Cth>`order`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ctr>\u003Cth>CMS\u003C\u002Fth>\u003Cth>`cms`\u003C\u002Fth>\u003C\u002Ftr>\n\u003Ch3>Version PrestaShop 8.x\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 8.x, la méthode reste identique mais la structure de dossiers recommandée a évolué. Placez vos assets dans \u003Ccode>views\u002Fcss\u002F\u003C\u002Fcode> et \u003Ccode>views\u002Fjs\u002F\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\npublic function hookDisplayHeader($params)\n{\n    $this->context->controller->registerStylesheet(\n        'monmodule-style',\n        'modules\u002F' . $this->name . '\u002Fviews\u002Fcss\u002Fmonmodule.css',\n        ['media' => 'all', 'priority' => 150]\n    );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>La méthode \u003Ccode>registerStylesheet()\u003C\u002Fcode> offre un contrôle plus fin sur la priorité de chargement et le type de média. Elle est disponible depuis PrestaShop 1.7 et reste la méthode recommandée sur la version 8.x. La méthode \u003Ccode>addCSS()\u003C\u002Fcode> fonctionne toujours mais est considérée comme un raccourci legacy.\u003C\u002Fp>\n\u003Ch2>Étape 3 : Vérifier l'arborescence et les chemins\u003C\u002Fh2>\n\u003Cp>Un piège classique : PrestaShop permet aux thèmes de surcharger les fichiers CSS d'un module. Si un dossier portant le nom de votre module existe dans le thème, PrestaShop chargera le CSS depuis le thème plutôt que depuis le module.\u003C\u002Fp>\n\u003Ch3>Le mécanisme de surcharge CSS\u003C\u002Fh3>\n\u003Cp>PrestaShop cherche les fichiers dans cet ordre :\u003C\u002Fp>\n\u003Col>\n\u003Cli>`themes\u002Fvotre-theme\u002Fmodules\u002Fmonmodule\u002Fviews\u002Fcss\u002Fmonmodule.css`\u003C\u002Fli>\n\u003Cli>`modules\u002Fmonmodule\u002Fviews\u002Fcss\u002Fmonmodule.css`\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Si le fichier existe dans le thème (même vide ou obsolète), c'est celui-là qui sera utilisé.\u003C\u002Fp>\n\u003Ch3>Solution\u003C\u002Fh3>\n\u003Cp>Si votre CSS ne s'affiche pas correctement :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Vérifiez s'il existe un dossier `themes\u002Fvotre-theme\u002Fmodules\u002Fmonmodule\u002F`\u003C\u002Fli>\n\u003Cli>Si oui, **supprimez-le ou renommez-le** pour forcer le chargement depuis le module\u003C\u002Fli>\n\u003Cli>Videz le cache PrestaShop (Paramètres avancés → Performances → Vider le cache)\u003C\u002Fli>\n\u003Cli>Réinstallez le module si nécessaire\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>L'arborescence idéale pour un module autonome :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-\">\nmodules\u002Fmonmodule\u002F\n├── monmodule.php\n├── views\u002F\n│   ├── css\u002F\n│   │   └── monmodule.css\n│   ├── js\u002F\n│   │   └── monmodule.js\n│   └── templates\u002F\n│       └── hook\u002F\n│           └── displayHome.tpl\n└── config.xml\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Étape 4 : Vérifier les permissions fichiers\u003C\u002Fh2>\n\u003Cp>Sur un serveur Linux, des permissions incorrectes peuvent empêcher Apache\u002FNginx de lire vos fichiers CSS :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">\n# Vérifier les permissions actuelles\nls -la modules\u002Fmonmodule\u002Fviews\u002Fcss\u002F\n\n# Corriger les permissions si nécessaire\nchmod 755 modules\u002Fmonmodule\u002Fviews\u002Fcss\u002F\nchmod 644 modules\u002Fmonmodule\u002Fviews\u002Fcss\u002Fmonmodule.css\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Les dossiers doivent être en \u003Ccode>755\u003C\u002Fcode> et les fichiers en \u003Ccode>644\u003C\u002Fcode>. Évitez le \u003Ccode>777\u003C\u002Fcode> qui pose des problèmes de sécurité.\u003C\u002Fp>\n\u003Ch2>Diagnostic rapide : checklist de dépannage\u003C\u002Fh2>\n\u003Cp>Si votre CSS ne se charge toujours pas, parcourez cette liste dans l'ordre :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>[ ] Le hook `displayHeader` est-il enregistré ? (vérifier dans Apparence → Positions)\u003C\u002Fli>\n\u003Cli>[ ] La méthode `hookDisplayHeader()` existe-t-elle dans votre fichier module principal ?\u003C\u002Fli>\n\u003Cli>[ ] Le chemin passé à `addCSS()` est-il correct ? (`$this->_path` pointe vers `\u002Fmodules\u002Fmonmodule\u002F`)\u003C\u002Fli>\n\u003Cli>[ ] Le fichier CSS existe-t-il physiquement à l'emplacement indiqué ?\u003C\u002Fli>\n\u003Cli>[ ] Y a-t-il une surcharge dans le dossier du thème ?\u003C\u002Fli>\n\u003Cli>[ ] Le cache PrestaShop est-il vidé ?\u003C\u002Fli>\n\u003Cli>[ ] La concaténation CSS (CCC) est-elle désactivée pendant le développement ?\u003C\u002Fli>\n\u003Cli>[ ] Les permissions fichiers sont-elles correctes ?\u003C\u002Fli>\n\u003Cli>[ ] Inspectez le code source HTML : le `\u003Clink>` vers votre CSS apparaît-il dans le `\u003Chead>` ?\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Bonnes pratiques pour les assets de modules\u003C\u002Fh2>\n\u003Col>\n\u003Cli>**Préfixez vos classes CSS** avec le nom du module pour éviter les conflits (`.monmodule-slider`, `.monmodule-wrapper`)\u003C\u002Fli>\n\u003Cli>**Ne chargez jamais de CSS globalement** si votre module n'intervient que sur certaines pages\u003C\u002Fli>\n\u003Cli>**Utilisez `registerStylesheet()`** sur PrestaShop 1.7+ pour un meilleur contrôle\u003C\u002Fli>\n\u003Cli>**Minifiez vos fichiers** en production\u003C\u002Fli>\n\u003Cli>**Testez avec le cache désactivé** pendant le développement, puis activé avant la mise en production\u003C\u002Fli>\n\u003C\u002Ful>",[40,43,46,49,52],{"q":41,"a":42},"Pourquoi le CSS de mon module PrestaShop ne s'affiche pas en front-office ?","La cause la plus fréquente est l'absence d'enregistrement du hook displayHeader lors de l'installation du module. Vérifiez que votre méthode install() contient bien $this->registerHook('displayHeader') et que la méthode hookDisplayHeader() est implémentée avec un appel à addCSS() ou registerStylesheet(). Pensez aussi à vider le cache après toute modification.",{"q":44,"a":45},"Quelle est la différence entre addCSS() et registerStylesheet() dans PrestaShop ?","addCSS() est la méthode historique disponible depuis PrestaShop 1.5. registerStylesheet(), introduite avec PrestaShop 1.7, offre plus de contrôle : vous pouvez définir une priorité de chargement, le type de média (all, screen, print) et un identifiant unique pour éviter les doublons. Sur PrestaShop 8.x, registerStylesheet() est la méthode recommandée.",{"q":47,"a":48},"Comment charger le CSS d'un module uniquement sur la page produit PrestaShop ?","Dans votre méthode hookDisplayHeader(), utilisez Dispatcher::getInstance()->getController() pour détecter la page courante. Comparez la valeur retournée avec 'product' et ne chargez votre CSS que dans ce cas. Cela améliore les performances en évitant des requêtes HTTP inutiles sur les autres pages.",{"q":50,"a":51},"Le thème PrestaShop peut-il empêcher le CSS de mon module de fonctionner ?","Oui. PrestaShop applique un système de surcharge : si un dossier portant le nom de votre module existe dans themes\u002Fvotre-theme\u002Fmodules\u002F, les fichiers CSS situés dans ce dossier seront chargés à la place de ceux du module. Si ce fichier est vide ou obsolète, vos styles ne s'appliqueront pas. Supprimez ou renommez ce dossier de surcharge pour résoudre le problème.",{"q":53,"a":54},"Comment ajouter du JavaScript en plus du CSS dans un module PrestaShop ?","Utilisez la même méthode hookDisplayHeader() et ajoutez un appel à addJS() ou registerJavascript(). Les fichiers JS doivent être placés dans le dossier views\u002Fjs\u002F de votre module. Comme pour le CSS, vous pouvez conditionner le chargement à certaines pages pour optimiser les performances.","Le CSS d'un module PrestaShop ne se charge pas quand le hook displayHeader n'est pas enregistré à l'installation, quand le chemin du fichier est incorrect, ou quand une surcharge du thème interfère. Enregistrez le hook, utilisez addCSS() ou registerStylesheet(), et vérifiez qu'aucun dossier de surcharge dans le thème ne bloque le chargement.",5,"2026-03-21T13:15:41.000Z",[],"PrestaShop pour les développeurs",{"items":61},[62,73,81,89,97,106,113,121],{"id":63,"type":64,"label":65,"href":67,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":70,"children":71,"psChildren":72},41,"link",{"fr":66},"Expertise","\u002Fexpertise",null,false,0,[],[],{"id":74,"type":64,"label":75,"href":77,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":78,"children":79,"psChildren":80},42,{"fr":76},"Blog","\u002Fblog",1,[],[],{"id":82,"type":64,"label":83,"href":85,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":86,"children":87,"psChildren":88},43,{"fr":84},"Modules PrestaShop","\u002Fmodules",2,[],[],{"id":90,"type":64,"label":91,"href":93,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":94,"children":95,"psChildren":96},44,{"fr":92},"Outils IA","\u002Foutils-ia",3,[],[],{"id":98,"type":64,"label":99,"href":101,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":102,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":103,"children":104,"psChildren":105},45,{"fr":100},"Offre Starter ✨","\u002Foffre-starter",{"highlight":20},4,[],[],{"id":107,"type":64,"label":108,"href":110,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":56,"children":111,"psChildren":112},46,{"fr":109},"Academy","\u002Facademy",[],[],{"id":114,"type":64,"label":115,"href":117,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":118,"children":119,"psChildren":120},47,{"fr":116},"À propos","\u002Fa-propos",6,[],[],{"id":122,"type":64,"label":123,"href":125,"icon":68,"description":68,"badge":68,"groupTitle":68,"style":68,"gridColumns":68,"cssClass":68,"psCategoryId":68,"showPsChildren":69,"position":126,"children":127,"psChildren":128},48,{"fr":124},"Contact","\u002Fcontact",7,[],[],{"columns":130},[131,143,173,189],{"title":132,"links":133},"Plateforme",[134,136,139,140],{"label":135,"href":101,"external":69},"Offre Starter (2 500 €)",{"label":137,"href":138,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":84,"href":85,"external":69},{"label":141,"href":142,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":144,"links":145},"Le Synedre",[146,149,152,155,158,161,164,167,170],{"label":147,"href":148,"external":69},"L'histoire","\u002Fsynedre",{"label":150,"href":151,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":153,"href":154,"external":69},"L'équipe","\u002Fequipe",{"label":156,"href":157,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":159,"href":160,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":162,"href":163,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":165,"href":166,"external":69},"Les agents IA","\u002Fagents-ia",{"label":168,"href":169,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":171,"href":172,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":174,"links":175},"Ressources",[176,177,178,181,183,186],{"label":76,"href":77,"external":69},{"label":109,"href":110,"external":69},{"label":179,"href":180,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":182,"href":67,"external":69},"Expertise PrestaShop",{"label":184,"href":185,"external":69},"Flywheel","\u002Fflywheel",{"label":187,"href":188,"external":69},"Manifeste","\u002Fmanifeste",{"title":116,"links":190},[191,193,196],{"label":192,"href":117,"external":69},"Alexandre Carette",{"label":194,"href":195,"external":69},"Dossier de presse","\u002Fpresse",{"label":124,"href":125,"external":69},{"header":198},{"logo":199,"topBar":204,"contactEmail":207,"features":208,"navBar":68},{"src":200,"alt":201,"text":192,"href":202,"class":203},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":68,"showLanguages":69,"align":205,"languages":206},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":209},"inline",{"academy":211,"blog":212,"expertise":223},[],[213,217,220],{"title":214,"url":215,"score":78,"type":216},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":218,"url":219,"score":78,"type":216},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":221,"url":222,"score":78,"type":216},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":225},{"theme":226,"description":68,"hours":68,"logo":227,"contact":228,"social":229,"bottomBar":239},"dark",{"src":200,"href":202,"alt":192},{"email":68,"phone":68,"address":68,"cta":68},[230,233,236],{"platform":231,"href":232,"label":231},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":234,"href":235,"label":234},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":237,"href":238,"label":237},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":68}]