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.

Comment activer la console de debug Smarty dans PrestaShop 1.6 ?

Ajoutez le bloc {if isset($smarty.get.DEBUG)}{debug}{/if} dans footer.tpl avant . 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.

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.

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.

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.

Variable $page_name et ID du body dans PrestaShop : diagnostic complet

Pourquoi l'ID du body est essentiel dans PrestaShop

Dans l'architecture front-end de PrestaShop, la balise reçoit dynamiquement un attribut id correspondant au type de page affichée : index pour l'accueil, category pour une catégorie, product pour une fiche produit, etc. Ce mécanisme repose sur la variable Smarty $page_name, injectée par le contrôleur PHP actif.

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.

Comment fonctionne `$page_name` sous le capot

PrestaShop 1.6 (Smarty)

Dans PrestaShop 1.6, la variable est assignée par la classe FrontController dans la méthode init(). Le nom de page est déduit du contrôleur appelé :


// classes/controller/FrontController.php
$this->page_name = Dispatcher::getInstance()->getController();
$this->context->smarty->assign('page_name', $this->page_name);

Côté template, le header.tpl exploite cette variable dans l'ouverture du :


<body
  {if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if}
  class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}
  {if isset($body_classes) && $body_classes|@count}
    {implode value=$body_classes separator=' '}
  {/if}
  {if $hide_left_column} hide-left-column
  {else} show-left-column{/if}
  {if $hide_right_column} hide-right-column
  {else} show-right-column{/if}
  {if isset($content_only) && $content_only} content_only
  {/if} lang_{$lang_iso}">

La condition {if isset($page_name)} signifie que si la variable n'est pas définie, l'attribut id disparaît purement et simplement du HTML généré — sans aucune erreur visible.

PrestaShop 1.7+ et 8.x (Twig)

À partir de la version 1.7, le système de templates migre vers Twig. La variable page.page_name est désormais accessible via l'objet page :


{# templates/_partials/head.tpl ou layout.tpl selon le thème #}
<body id="{{ page.page_name }}" class="{{ page.body_classes|classnames }}">

Le principe reste identique, mais la structure est plus robuste : l'objet page est systématiquement peuplé par le FrontController, ce qui réduit les cas de variable manquante.

Diagnostic : pourquoi `$page_name` peut être vide

Plusieurs situations provoquent l'absence de cette variable :

1. Thème personnalisé avec header.tpl modifié

C'est la cause la plus fréquente. Lors de la personnalisation d'un thème, la ligne contenant l'attribut id sur le a été supprimée ou altérée par erreur. Vérifiez que votre header.tpl contient bien le bloc complet d'ouverture de la balise tel que décrit ci-dessus.

2. Balise `` dupliquée

Certains développeurs ajoutent par inadvertance une seconde balise dans un template enfant ou un module. Le navigateur ignore alors les attributs de la première occurrence. Assurez-vous que l'ouverture du est présente uniquement dans header.tpl.

3. Contrôleur personnalisé sans assignation

Si vous avez développé un contrôleur front custom qui étend ModuleFrontController sans appeler parent::init(), la variable ne sera jamais assignée :


class MonModuleCustomModuleFrontController extends ModuleFrontController
{
    public function init()
    {
        // ERREUR : oubli du parent
        // parent::init(); // ← cette ligne est indispensable
        
        // votre code...
    }
}

4. Cache Smarty obsolète

Dans de rares cas, le cache Smarty compilé contient une version périmée du template. Videz le cache via Paramètres avancés > Performances > Vider le cache ou supprimez manuellement le contenu de var/cache/smarty/compile/.

Méthode de debug pas à pas

Étape 1 : Afficher la variable directement

Insérez temporairement dans votre header.tpl (juste avant le ) :


<!-- DEBUG page_name: {$page_name|escape:'html':'UTF-8'} -->

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 category), le problème vient du template .

Étape 2 : Activer la console de debug Smarty

Ajoutez ce bloc dans votre footer.tpl, juste avant :


{if isset($smarty.get.DEBUG)}
  {debug}
{/if}

Puis accédez à votre page avec le paramètre ?DEBUG=1. Une fenêtre popup listera toutes les variables Smarty disponibles. Recherchez page_name dans la liste — sa présence et sa valeur vous indiqueront l'état du contrôleur.

Important : Pour que la console debug fonctionne correctement, désactivez le déplacement des scripts en fin de page dans Back-office > Paramètres avancés > Performances.

Étape 3 (PrestaShop 8.x) : Utiliser le Symfony Profiler

Sur PrestaShop 8.x en mode debug (_PS_MODE_DEV_ = true), la barre de debug Symfony est disponible. Cliquez sur l'onglet Twig pour inspecter les variables transmises au template, dont page.page_name.


// config/defines.inc.php
define('_PS_MODE_DEV_', true);

Cas connexe : produits qui apparaissent sur la page d'accueil

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.

L'explication est simple : dans PrestaShop, un produit peut être associé à plusieurs catégories simultanément. Le module "Produits phares" (homefeatured en 1.6, ps_featuredproducts en 1.7+) récupère par défaut tous les produits associés à la catégorie Accueil (ID 2 par défaut).

Deux solutions :

**Retirer l'association** : dans la fiche produit, onglet **Catégories associées**, décochez la catégorie Accueil
**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

Ce comportement n'est pas un bug ni un conflit — c'est le fonctionnement normal du système de catégories multiples de PrestaShop.

Bonnes pratiques pour exploiter `page_name` en CSS

Une fois la variable correctement restituée, vous pouvez écrire du CSS ultra-ciblé :


/* Masquer le fil d'Ariane uniquement sur l'accueil */
body#index .breadcrumb {
  display: none;
}

/* Largeur pleine page pour les landing pages */
body#module-landingpage-display #columns {
  max-width: 100%;
  padding: 0;
}

/* Sidebar masquée sur mobile uniquement en catégorie */
@media (max-width: 768px) {
  body#category #left_column {
    display: none;
  }
}

Cette approche est bien plus maintenable que d'ajouter des classes CSS manuellement dans chaque template.