[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fFexqsC8Ih7DO8TdbLwAMOrOND1gZJwFFL34siC4jRrw":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":61,"megamenu":142,"footer-db":198,"$fivhpByvkipzQxmpO73vJfuWf6PIVk6_cl1Qz7heC7Fs":216,"header-db":230},{"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":34,"psVersions":35,"content":39,"faq":40,"tldr":56,"readingTime":57,"generatedAt":58,"publishDate":58,"relatedArticles":59,"sourceCategory":60},"Variable $page_name et ID du body dans PrestaShop : diagnostic complet","variable-page-name-id-body-prestashop-diagnostic","Résolvez les problèmes de variable $page_name absente du body dans PrestaShop. Diagnostic Smarty, debug console et bonnes pratiques CSS par page.","developpement",[28,29,30,31,32,33],"smarty","template","header.tpl","page_name","debug","CSS conditionnel","intermediaire",[36,37,38],"1.6","1.7","8.x","\u003Ch2>Pourquoi l'ID du body est essentiel dans PrestaShop\u003C\u002Fh2>\n\u003Cp>Dans l'architecture front-end de PrestaShop, la balise \u003Ccode>\u003Cbody>\u003C\u002Fcode> reçoit dynamiquement un attribut \u003Ccode>id\u003C\u002Fcode> correspondant au type de page affichée : \u003Ccode>index\u003C\u002Fcode> pour l'accueil, \u003Ccode>category\u003C\u002Fcode> pour une catégorie, \u003Ccode>product\u003C\u002Fcode> pour une fiche produit, etc. Ce mécanisme repose sur la variable Smarty \u003Ccode>$page_name\u003C\u002Fcode>, injectée par le contrôleur PHP actif.\u003C\u002Fp>\n\u003Cp>Cet identifiant est loin d'être cosmétique. Il constitue le pivot du CSS conditionnel dans la plupart des thèmes PrestaShop. Sans lui, impossible de cibler des styles spécifiques à un type de page — et de nombreux thèmes voient leur mise en page se dégrader silencieusement.\u003C\u002Fp>\n\u003Ch2>Comment fonctionne `$page_name` sous le capot\u003C\u002Fh2>\n\u003Ch3>PrestaShop 1.6 (Smarty)\u003C\u002Fh3>\n\u003Cp>Dans PrestaShop 1.6, la variable est assignée par la classe \u003Ccode>FrontController\u003C\u002Fcode> dans la méthode \u003Ccode>init()\u003C\u002Fcode>. Le nom de page est déduit du contrôleur appelé :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F classes\u002Fcontroller\u002FFrontController.php\n$this->page_name = Dispatcher::getInstance()->getController();\n$this->context->smarty->assign('page_name', $this->page_name);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Côté template, le \u003Ccode>header.tpl\u003C\u002Fcode> exploite cette variable dans l'ouverture du \u003Ccode>\u003Cbody>\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<body\n  {if isset($page_name)} id=\"{$page_name|escape:'html':'UTF-8'}\"{\u002Fif}\n  class=\"{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{\u002Fif}\n  {if isset($body_classes) && $body_classes|@count}\n    {implode value=$body_classes separator=' '}\n  {\u002Fif}\n  {if $hide_left_column} hide-left-column\n  {else} show-left-column{\u002Fif}\n  {if $hide_right_column} hide-right-column\n  {else} show-right-column{\u002Fif}\n  {if isset($content_only) && $content_only} content_only\n  {\u002Fif} lang_{$lang_iso}\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>La condition \u003Ccode>{if isset($page_name)}\u003C\u002Fcode> signifie que si la variable n'est pas définie, l'attribut \u003Ccode>id\u003C\u002Fcode> disparaît purement et simplement du HTML généré — sans aucune erreur visible.\u003C\u002Fp>\n\u003Ch3>PrestaShop 1.7+ et 8.x (Twig)\u003C\u002Fh3>\n\u003Cp>À partir de la version 1.7, le système de templates migre vers Twig. La variable \u003Ccode>page.page_name\u003C\u002Fcode> est désormais accessible via l'objet \u003Ccode>page\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-twig\">\n{# templates\u002F_partials\u002Fhead.tpl ou layout.tpl selon le thème #}\n<body id=\"{{ page.page_name }}\" class=\"{{ page.body_classes|classnames }}\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le principe reste identique, mais la structure est plus robuste : l'objet \u003Ccode>page\u003C\u002Fcode> est systématiquement peuplé par le \u003Ccode>FrontController\u003C\u002Fcode>, ce qui réduit les cas de variable manquante.\u003C\u002Fp>\n\u003Ch2>Diagnostic : pourquoi `$page_name` peut être vide\u003C\u002Fh2>\n\u003Cp>Plusieurs situations provoquent l'absence de cette variable :\u003C\u002Fp>\n\u003Ch3>1. Thème personnalisé avec header.tpl modifié\u003C\u002Fh3>\n\u003Cp>C'est la cause la plus fréquente. Lors de la personnalisation d'un thème, la ligne contenant l'attribut \u003Ccode>id\u003C\u002Fcode> sur le \u003Ccode>\u003Cbody>\u003C\u002Fcode> a été supprimée ou altérée par erreur. Vérifiez que votre \u003Ccode>header.tpl\u003C\u002Fcode> contient bien le bloc complet d'ouverture de la balise \u003Ccode>\u003Cbody>\u003C\u002Fcode> tel que décrit ci-dessus.\u003C\u002Fp>\n\u003Ch3>2. Balise `\u003Cbody>` dupliquée\u003C\u002Fh3>\n\u003Cp>Certains développeurs ajoutent par inadvertance une seconde balise \u003Ccode>\u003Cbody>\u003C\u002Fcode> dans un template enfant ou un module. Le navigateur ignore alors les attributs de la première occurrence. Assurez-vous que l'ouverture du \u003Ccode>\u003Cbody>\u003C\u002Fcode> est présente \u003Cstrong>uniquement\u003C\u002Fstrong> dans \u003Ccode>header.tpl\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>3. Contrôleur personnalisé sans assignation\u003C\u002Fh3>\n\u003Cp>Si vous avez développé un contrôleur front custom qui étend \u003Ccode>ModuleFrontController\u003C\u002Fcode> sans appeler \u003Ccode>parent::init()\u003C\u002Fcode>, la variable ne sera jamais assignée :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\nclass MonModuleCustomModuleFrontController extends ModuleFrontController\n{\n    public function init()\n    {\n        \u002F\u002F ERREUR : oubli du parent\n        \u002F\u002F parent::init(); \u002F\u002F ← cette ligne est indispensable\n        \n        \u002F\u002F votre code...\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>4. Cache Smarty obsolète\u003C\u002Fh3>\n\u003Cp>Dans de rares cas, le cache Smarty compilé contient une version périmée du template. Videz le cache via \u003Cstrong>Paramètres avancés > Performances > Vider le cache\u003C\u002Fstrong> ou supprimez manuellement le contenu de \u003Ccode>var\u002Fcache\u002Fsmarty\u002Fcompile\u002F\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Méthode de debug pas à pas\u003C\u002Fh2>\n\u003Ch3>Étape 1 : Afficher la variable directement\u003C\u002Fh3>\n\u003Cp>Insérez temporairement dans votre \u003Ccode>header.tpl\u003C\u002Fcode> (juste avant le \u003Ccode>\u003Cbody>\u003C\u002Fcode>) :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n<!-- DEBUG page_name: {$page_name|escape:'html':'UTF-8'} -->\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Puis inspectez le code source HTML de la page. Si la variable est vide, le problème vient du contrôleur. Si elle affiche la bonne valeur (par exemple \u003Ccode>category\u003C\u002Fcode>), le problème vient du template \u003Ccode>\u003Cbody>\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch3>Étape 2 : Activer la console de debug Smarty\u003C\u002Fh3>\n\u003Cp>Ajoutez ce bloc dans votre \u003Ccode>footer.tpl\u003C\u002Fcode>, juste avant \u003Ccode>\u003C\u002Fbody>\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{if isset($smarty.get.DEBUG)}\n  {debug}\n{\u002Fif}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Puis accédez à votre page avec le paramètre \u003Ccode>?DEBUG=1\u003C\u002Fcode>. Une fenêtre popup listera toutes les variables Smarty disponibles. Recherchez \u003Ccode>page_name\u003C\u002Fcode> dans la liste — sa présence et sa valeur vous indiqueront l'état du contrôleur.\u003C\u002Fp>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Important :\u003C\u002Fstrong> Pour que la console debug fonctionne correctement, désactivez le déplacement des scripts en fin de page dans \u003Cstrong>Back-office > Paramètres avancés > Performances\u003C\u002Fstrong>.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch3>Étape 3 (PrestaShop 8.x) : Utiliser le Symfony Profiler\u003C\u002Fh3>\n\u003Cp>Sur PrestaShop 8.x en mode debug (\u003Ccode>_PS_MODE_DEV_ = true\u003C\u002Fcode>), la barre de debug Symfony est disponible. Cliquez sur l'onglet \u003Cstrong>Twig\u003C\u002Fstrong> pour inspecter les variables transmises au template, dont \u003Ccode>page.page_name\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n\u002F\u002F config\u002Fdefines.inc.php\ndefine('_PS_MODE_DEV_', true);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Cas connexe : produits qui apparaissent sur la page d'accueil\u003C\u002Fh2>\n\u003Cp>Un problème souvent rencontré en parallèle concerne des produits qui s'affichent sur la page d'accueil alors qu'ils ne devraient apparaître que dans leur catégorie.\u003C\u002Fp>\n\u003Cp>L'explication est simple : dans PrestaShop, un produit peut être associé à \u003Cstrong>plusieurs catégories simultanément\u003C\u002Fstrong>. Le module \"Produits phares\" (\u003Ccode>homefeatured\u003C\u002Fcode> en 1.6, \u003Ccode>ps_featuredproducts\u003C\u002Fcode> en 1.7+) récupère par défaut tous les produits associés à la catégorie \u003Cstrong>Accueil\u003C\u002Fstrong> (ID 2 par défaut).\u003C\u002Fp>\n\u003Cp>Deux solutions :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Retirer l'association** : dans la fiche produit, onglet **Catégories associées**, décochez la catégorie Accueil\u003C\u002Fli>\n\u003Cli>**Modifier la source du module** : dans la configuration du module Produits phares, changez la catégorie source pour pointer vers une catégorie dédiée\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Ce comportement n'est pas un bug ni un conflit — c'est le fonctionnement normal du système de catégories multiples de PrestaShop.\u003C\u002Fp>\n\u003Ch2>Bonnes pratiques pour exploiter `page_name` en CSS\u003C\u002Fh2>\n\u003Cp>Une fois la variable correctement restituée, vous pouvez écrire du CSS ultra-ciblé :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Masquer le fil d'Ariane uniquement sur l'accueil *\u002F\nbody#index .breadcrumb {\n  display: none;\n}\n\n\u002F* Largeur pleine page pour les landing pages *\u002F\nbody#module-landingpage-display #columns {\n  max-width: 100%;\n  padding: 0;\n}\n\n\u002F* Sidebar masquée sur mobile uniquement en catégorie *\u002F\n@media (max-width: 768px) {\n  body#category #left_column {\n    display: none;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Cette approche est bien plus maintenable que d'ajouter des classes CSS manuellement dans chaque template.\u003C\u002Fp>",[41,44,47,50,53],{"q":42,"a":43},"Pourquoi l'attribut id est absent de ma balise body dans PrestaShop ?","L'attribut id du body dépend de la variable Smarty $page_name, injectée par le contrôleur front. Si elle est absente, les causes les plus courantes sont : un header.tpl modifié qui a perdu le bloc d'ouverture du body, une balise body dupliquée dans un autre template, un contrôleur custom qui n'appelle pas parent::init(), ou un cache Smarty obsolète. Affichez {$page_name} directement dans le template pour isoler la source du problème.",{"q":45,"a":46},"Comment activer la console de debug Smarty dans PrestaShop 1.6 ?","Ajoutez le bloc {if isset($smarty.get.DEBUG)}{debug}{\u002Fif} dans footer.tpl avant \u003C\u002Fbody>. Accédez ensuite à votre page avec ?DEBUG=1 dans l'URL. Pensez à désactiver le déplacement des scripts en fin de page dans le back-office (Paramètres avancés > Performances) pour que la popup s'affiche correctement.",{"q":48,"a":49},"Comment empêcher des produits d'apparaître sur la page d'accueil PrestaShop ?","Les produits apparaissent sur l'accueil car ils sont associés à la catégorie Accueil (ID 2). Le module Produits phares récupère automatiquement les produits de cette catégorie. Pour résoudre le problème, soit vous retirez l'association à la catégorie Accueil dans la fiche produit, soit vous modifiez la catégorie source dans la configuration du module ps_featuredproducts.",{"q":51,"a":52},"Quelle est la différence entre $page_name en PrestaShop 1.6 et 8.x ?","En PrestaShop 1.6, $page_name est une variable Smarty assignée par FrontController::init() et utilisée directement dans header.tpl. À partir de la version 1.7, le moteur de template Twig remplace Smarty et la variable devient page.page_name, accessible via l'objet page. Le mécanisme est plus robuste car l'objet page est systématiquement peuplé par le contrôleur, réduisant les cas de variable manquante.",{"q":54,"a":55},"Comment cibler une page spécifique en CSS grâce à l'ID du body PrestaShop ?","Utilisez le sélecteur body#nom_page suivi de votre ciblage CSS. Par exemple, body#category .breadcrumb pour cibler le fil d'Ariane uniquement sur les pages catégorie, ou body#index .slider pour cibler le slider de l'accueil. Les noms courants sont : index (accueil), category, product, cms, stores, my-account, order, search.","L'absence de l'attribut id sur la balise body dans PrestaShop provient généralement d'un header.tpl modifié ou d'un contrôleur qui n'assigne pas la variable $page_name. Le diagnostic passe par l'affichage direct de la variable et la console debug Smarty.",5,"2026-03-21T13:38:59.000Z",[],"PrestaShop pour les développeurs",{"columns":62},[63,79,109,130],{"title":64,"links":65},"Plateforme",[66,70,73,76],{"label":67,"href":68,"external":69},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":71,"href":72,"external":69},"Devenir Ambassadeur","\u002Fambassadeur",{"label":74,"href":75,"external":69},"Modules PrestaShop","\u002Fmodules",{"label":77,"href":78,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":80,"links":81},"Le Synedre",[82,85,88,91,94,97,100,103,106],{"label":83,"href":84,"external":69},"L'histoire","\u002Fsynedre",{"label":86,"href":87,"external":69},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":89,"href":90,"external":69},"L'équipe","\u002Fequipe",{"label":92,"href":93,"external":69},"Le réacteur en direct","\u002Freacteur",{"label":95,"href":96,"external":69},"Le Drill (entraînement)","\u002Fdrill",{"label":98,"href":99,"external":69},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":101,"href":102,"external":69},"Les agents IA","\u002Fagents-ia",{"label":104,"href":105,"external":69},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":107,"href":108,"external":69},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":110,"links":111},"Ressources",[112,115,118,121,124,127],{"label":113,"href":114,"external":69},"Blog","\u002Fblog",{"label":116,"href":117,"external":69},"Academy","\u002Facademy",{"label":119,"href":120,"external":69},"Dictionnaire","\u002Fdictionnaire",{"label":122,"href":123,"external":69},"Expertise PrestaShop","\u002Fexpertise",{"label":125,"href":126,"external":69},"Flywheel","\u002Fflywheel",{"label":128,"href":129,"external":69},"Manifeste","\u002Fmanifeste",{"title":131,"links":132},"À propos",[133,136,139],{"label":134,"href":135,"external":69},"Alexandre Carette","\u002Fa-propos",{"label":137,"href":138,"external":69},"Dossier de presse","\u002Fpresse",{"label":140,"href":141,"external":69},"Contact","\u002Fcontact",{"items":143},[144,153,159,165,173,181,186,192],{"id":145,"type":146,"label":147,"href":123,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":150,"children":151,"psChildren":152},41,"link",{"fr":148},"Expertise",null,0,[],[],{"id":154,"type":146,"label":155,"href":114,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":156,"children":157,"psChildren":158},42,{"fr":113},1,[],[],{"id":160,"type":146,"label":161,"href":75,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":162,"children":163,"psChildren":164},43,{"fr":74},2,[],[],{"id":166,"type":146,"label":167,"href":169,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":170,"children":171,"psChildren":172},44,{"fr":168},"Outils IA","\u002Foutils-ia",3,[],[],{"id":174,"type":146,"label":175,"href":68,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":177,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":178,"children":179,"psChildren":180},45,{"fr":176},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":182,"type":146,"label":183,"href":117,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":57,"children":184,"psChildren":185},46,{"fr":116},[],[],{"id":187,"type":146,"label":188,"href":135,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":189,"children":190,"psChildren":191},47,{"fr":131},6,[],[],{"id":193,"type":146,"label":194,"href":141,"icon":149,"description":149,"badge":149,"groupTitle":149,"style":149,"gridColumns":149,"cssClass":149,"psCategoryId":149,"showPsChildren":69,"position":195,"children":196,"psChildren":197},48,{"fr":140},7,[],[],{"footer":199},{"theme":200,"description":149,"hours":149,"logo":201,"contact":204,"social":205,"bottomBar":215},"dark",{"src":202,"href":203,"alt":134},"\u002Flogo-ac.svg","\u002F",{"email":149,"phone":149,"address":149,"cta":149},[206,209,212],{"platform":207,"href":208,"label":207},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":210,"href":211,"label":210},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":213,"href":214,"label":213},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":149},{"academy":217,"blog":218,"expertise":229},[],[219,223,226],{"title":220,"url":221,"score":156,"type":222},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":224,"url":225,"score":156,"type":222},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":227,"url":228,"score":156,"type":222},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"header":231},{"logo":232,"topBar":235,"contactEmail":238,"features":239,"navBar":149},{"src":202,"alt":233,"text":134,"href":203,"class":234},"Alexandre Carette — Architecte E-commerce Souverain","h-10 w-10",{"message":149,"showLanguages":69,"align":236,"languages":237},"left",[],"contact@alexandrecarette.fr",{"showSearch":69,"showWishlist":69,"showLogin":20,"showContact":69,"showCart":69,"stickyHeader":20,"headerLayout":240},"inline"]