Pré-requis

  • Disposer d’un serveur sous Linux Debian 8
  • Avoir une connexion au serveur par SSH ou par un Terminal
  • Avoir télécharger les fichiers Magento 2 nécessaires à l’installation
  • Avoir créer un thème personnalisé

Objectifs

Surcharger le layout de la page d’accueil dans un thème personnalisé

Tutoriel

Création de l’arborescence

Accéder au dossier dossier_magento/app/design/frontend/nom_du_vendor/nom_du_theme et créer les dossiers suivants :

  •   nom_du_theme
    •   Magento_Theme
      •   page_layout
      •   templates

Création des fichiers

Au sein du dossier Magento_Theme, créer le fichier suivant layouts.xml et intégrer le code XML suivant :

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="surcharge_home">
        <label translate="true">Surcharge - Home</label>
    </layout>
</page_layouts>

Ensuite, créer le fichier surcharge_home.xml dans le dossier page_layout et intégrer le contenu suivant :

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>

        <referenceContainer name="main">
            <block class="Magento\Framework\View\Element\Template" name="customtext" template="Magento_Theme::home_content.phtml" after="-" />
        </referenceContainer>
    </referenceContainer>
</layout>

Création du fichier PHTML

Pour terminer, il est nécessaire de créer le fichier PHTML home_content.phtml dans le dossier templates

Le contenu du fichier home_content.phtml sera intégré après le contenu HTML de la page d’accueil.

Pour afficher un bloc CMS, vous devez utiliser la fonction PHP suivante :

<?php
    echo $this  ->getLayout()
                ->createBlock('Magento\Cms\Block\Block')
                ->setBlockId('cms_homepage')
                ->toHtml();
?>

Activation du layout dans le backoffice

Ouvrir, dans le backoffice, la page Home et sélectionner Surcharge – Home dans la partie layout.

Enregistrer et relancer la page d’accueil de la boutique.

Dernière modification: 17 août 2020

Auteur