Le fonctionnement des layouts

La portée des fichiers de layout

Contrairement à Magento 1, la portée du layout est définie par le nom du fichier de layout. Par exemple, le fichier de layout catalog_product_view.xml aura effet sur le handle catalog_product_view, soit la page produit.

Le handle default touche toutes les pages.

Un fichier de layout va ressembler à cela :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="mage/gallery/gallery.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <container name="my.container" htmlTag="div" htmlClass="container-class" after="-">
                <block class="Magento\Framework\View\Element\Template" name="my.block" template="Vendor_Module::path/to/template.phtml" />
            </container>
        </referenceContainer>
    </body>
</page>

L'attribut layout de la balise page permet de définir le layout de la page. Les layouts standard de Magento 2 sont :
- 1column
- 2columns-left
- 2columns-right
- 3columns
La balise body permet d'intéragir avec le corps HTML de la page. À la différence de la balise head qui nous permet d'intéragir avec le head au sens HTML - ici supprimer un fichier CSS inclus par le thème de base.
Nous pouvons ensuite faire référence à :
- un container, celui-ci se contentera d'afficher les blocs qui lui sont envoyés dans l'ordre défini par les attributs before et after.
- un block, qui affichera ses blocks enfants à l'endroit voulu par le template
Ou créer directement notre propre container / block

L'instruction update handle

L'instruction <update handle="XXX" /> permet d'étendre le handle correspondant et de n'avoir à écrire que les modifications ou ajouts que l'on veut.

Ajout d'un bloc

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

<referenceContainer name="header.container">
    <!-- Ajouter des blocks dans le header -->
</referenceContainer>

: Ajouter le bloc dans le layout

<block class="Magento\Framework\View\Element\Template" name="header.block" template="Vendor_Module::html/header/block.phtml" />

Structure d'un appel (champs obligatoires) :

classe : quelle classe PHP alimente le template ?
name : nom unique dans le handle
template : chemin vers le fichier du template

: Si nous avons ajouté le block dans un autre block, l'appeler dans son template :

<?php echo $block->getChildHtml('header.block') ?>

Appeler tous les blocs du layout

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

<?php echo $block->getChildHtml() ?>

Ainsi, l'ajout d'un block 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 class="Magento\Framework\View\Element\Template" before="cart.sidebar" name="sidebar.block" template="Vendor_Module::sidebar/block.phtml" />

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

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

TP - Déplacement de block

Uniquement sur la page produit, déplacer le block d'inscription à la newsletter dans le header.

<move element="<name du block à déplacer>" destination="<name du parent de destination>" />

TP - Suppression d'un container

Supprimer le container du footer sur les pages catégories.

<referenceContainer name="XXX" remove="true" />