Le fonctionnement des layouts

La portée des layouts - les handles

Les noeuds d'un fichier de layout

  • Le noeud principal détermine la portée de l'action (quelle(s) page(s) ciblons-nous)

    • <default> pour toutes les pages du site
    • <catalog_product_view> pour la page produit par exemple
    • plus généralement, <module_controller_action>
  • À l'intérieur, le noeud <reference> détermine à quel endroit de la page nous voulons faire des modifications)

  • Enfin, nous indiquons les actions que nous voulons faire (ajout / suppression de blocs par exemple)

Comment savoir quel handle utiliser ?

Nous venons de voir que, généralement, la handle est de la forme module_controller_action. Néanmoins, il n'est pas toujours simple de déterminer ces 3 valeurs (sur une page produit par exemple).

Il est donc possible d'afficher (ou de logguer) tous les handles d'une page en utilisant le code suivant :

<?php Zend_Debug::dump($this->getLayout()->getUpdate()->getHandles()); ?>

Quels fichiers utiliser ?

  • Il est interdit de modifier les layouts de base/default
  • Il n'est pas conseillé d'utiliser les layouts de default/default
  • Il n'est pas conseillé de déplacer les layouts de base/default dans notre_interface/default

Nous allons donc créer un fichier de layout local.xml dans le dossier notre_interface/default/layout. Ce fichier pilotera l'ensemble du thème et contiendra toutes nos instructions de layout.

Le fichier local.xml est chargé en dernier par Magento, et est donc prioritaire.

Optimisations des surcharges de layout

Le fallback n'est pas un héritage.

Ainsi si nous avons plusieurs thèmes qui dérivent de notre_interface/default, en cas de structure différente, nous devons forcément utiliser le fichier local.xml, qui va donc remplacer celui de notre thème par défaut. Il faut donc le dupliquer dans notre thème et le mettre à jour à chaque modification d'agencement, ce qui implique de maintenir X versions du fichier.

La solution est d'utiliser un fichier default.xml ajouté par notre propre module (voir chapitre 7), le local.xml ne s'utilise que pour les différences entre le thème par défaut et les autres thèmes.

Ajout d'un bloc

Les blocs standards à retenir :

  • root
    • head
    • header
    • content
    • left
    • right
    • footer

Comme vu précédemment, l'instruction d'ajout d'un bloc se trouve dans une référence, qui se trouve dans un handle :

<default>
    <reference name="header">
        <!-- Ajouter des blocks dans le header -->
    </reference>
</default>

Etape 1 : Ajouter le bloc dans le layout

<block type="core/template" name="header_block" template="page/html/header/block.phtml" />

Structure d'un appel (champs obligatoires) :

  • type : quelle classe PHP alimente le template ?
  • name : utilisé pour placer, déplacer ou supprimer un bloc
  • template : chemin depuis notre_interface/theme/template

Etape 2 : Appeler le bloc dans le template :

<?php echo $this->getChildHtml('header_block') ?>

Nous ne ferons une déclaration de <block> dans un autre <block> sans <reference> que si sa déclaration est dans le même fichier.

Appeler tous les blocs du layout

La sidebar de droite par exemple ne possède que :

<?php echo $this->getChildHtml('') ?>

Ainsi, l'ajout d'un bloc dans le layout l'ajoute automatiquement dans la sidebar.

L'utilisation des attributs before et after est donc indispensable pour définir l'emplacement des blocs :

<block type="core/template" before="cart.sidebar" name="sidebar_block" template="sidebar/block.phtml" />

Ajouter un bloc dans le header qui ajoute dynamiquement ses enfants.

TP : Ajouter un bloc panier dans la sidebar

Ajouter dans la sidebar un bloc panier indiquant les produits actuellement au panier et le montant de celui-ci.

TP - Déplacement de bloc

Uniquement sur la page produit, déplacer le bloc des derniers produits consultés dans le header.

<!-- Désactiver un block (≠ remove qui supprime un bloc) -->
<action method="unsetChild">
    <name>alias</name>
</action>

<!-- Rajouter un block désactivé -->
<action method="insert">
    <name>name_in_layout</name>
    <siblingName>nom_du_block_frere</siblingName>
    <after>1</after> <!-- On insère le block après le block nom_du_block_frere --> 
</action>