Créer une vue pour son module Magento 2

Ce tutoriel est le 3eme d’une longue série de tutoriel magento2. Il sera mis à jour au fur et à mesure des évolutions de la plateforme. Vous allez maintenant apprendre a créer une vue (View) et ses actions sous Magento2. Si vous ne connaissez pas magento (v1) ce n’est pas grave, je vais en parler bien sur mais il n’est pas nécessaire de connaitre la plateforme magento (v1) pour maitriser ce tutoriel sur magento2. Dans le tutoriel précédent nous avons vu comment créer un contrôleur pour magento2 pour notre extension ! Nous allons maintenant voir comment associer une vue (un template) à notre action ! Pour cela, on va repartir des fichiers de notre tutoriel précédent.

Ajouter nos dossiers "vue" du module

On va donc créer à la racine du module /Pfay/Contacts, un dossier "view". c'est ce dossier qui contiendra tous les layout (fichiers indiquants la disposition des "bloc" à afficher dans magento2 et les templates (notons au passage que magento2 utilise maintenant le moteur de template Twig, on y reviendra plus tard). Ce dossier View contiendra un dossier "frontend", qui lui même contiendra 2 dossiers "layout" (qui contiendra les layouts) et "templates" (qui contiendra les fichiers des templates). Pour ceux qui connaissent magento (v1) vous savez plus ou moins déjà ce que va contenir ces 2 derniers dossiers.

Ajouter un fichier de template phtml

Créer un fichier "test_index.phtml" dans le repertoire /Pfay/Contacts/view/frontend/templates/ qui aura le contenu suivant :


<div id="contactslist">
    ma liste de contact
</div>

Le but de ce tutoriel va être d'afficher le contenu html de ce fichier quand on ira sur notre action contacts/test/index (voir tutoriel précédent).

Ajouter un fichier de Layout pour notre action

On va maintenant lier l'action de notre contrôleur et notre template. Pour cela créez le fichier "contacts_test_index.xml" (attention a bien mettre l'<id de la route>_<nomducontrolleur>_<nomdelaction> ) dans le répertoire /Pfay/Contacts/view/frontend/layout/ qui contiendra le contenu xml suivant :


<?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">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="contactForm" template="Pfay_Contacts::test_index.phtml"></block>
        </referenceContainer>
    </body>
</page>

Le nom du fichier est important, en effet, notre route est contacts/test/index, il faut que notre fichier de layout s'apelle "contacts_test_index.xml" pour que magento2 puisse retrouver automatiquement mon fichier de disposition (layout) à partir de l'Action. il vous suffit de remplacer les "/" de l'url qui pointe vers votre action par des "_" et vous obtenez le nom de votre fichier de disposition (appelé "layout").Que fait ce fichier ?


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

Cette instruction permet de dire à magento2 qu'on va mettre à jour cette action avec le template 1column de notre template magentO.


<body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="contactForm" template="Pfay_Contacts::test_index.phtml"></block>
        </referenceContainer>
</body>

- referenceBlock permet de récupérer le block avec le nom correspondant à son attribut name (ici "content"). - block permet de rajouter un bloc, ici ce bloc utilisera la logique de la classe "Magento\Framework\View\Element\Template", aura le nom "contactForm" et utilisera le fichier de template "test_index.phtml" se trouvant dans le module Pfay_Contacts. Ce bloc de code xml permet donc de créer un bloc qui sera positionné dans la partie "content" du site et qui aura le template contactlist.phtml crée juste avant. Notez qu'on utilise ici la classe "Magento\Framework\View\Element\Template" qui est la classe de base qui permet d'afficher un template phtml sans y mettre un type de bloc spécial.

Modifier notre Action pour qu'elle aille chercher le layout

En fait, je vous ai un peu menti pour simplifier les choses, afin d'aller chercher le fichier de disposition (layout), magento2 à besoin de le charger avec la fonction loadLayout() et pour l'afficher de la fonction renderLayout(). Les développeurs Magento (v1) sont déjà habitués à utiliser ces fonctions ;) Éditez donc votre fichier /Pfay/Contacts/Controller/Test/Index.php comme ceci :


namespace Pfay\Contacts\Controller\Test;
class Index extends \Magento\Framework\App\Action\Action
{
    public function execute()
    {
       $this->_view->loadLayout();
       $this->_view->renderLayout();
    }
}

Et voilà maintenant vous pouvez accéder à votre template via l'url précédente comme dans le tutoriel 1 : www.magento2.lan/contacts/test/ ou www.magento2.lan/contacts/test/index/. Cela ne fonctionne pas chez vous ? Récupérer les sources de ce module et trouvez plus facilement votre erreur en téléchargeant le code en bas de ce tutoriel. Vous savez maintenant Ajouter une vue lié à l'action de votre contrôleur magento2...Félicitation ! Comme d'habitude, si vous avez aimé ce tutoriel, s’il vous plait remerciez moi en 1 clic en partageant cet article sur twitter, googleplus ou facebook, ca peut paraitre inutile mais pour moi c’est très important. Merci à ceux qui le feront ;) N’hésitez pas également à poser vos questions dans les commentaires (pour ceux qui partagent l’article), j’essaierai de répondre rapidement. Bon courage à tous pour la suite de ces tutoriels sur magento2 !

Documents disponibles pour cet article :

Code

Les livres qui peuvent vous aider :

Article PrécédentCréer un Controller et ses actions sous Magento 2 Article suivantCréer un bloc sous magento 2