Surcharger le layout de la page d’accueil

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *