Avant de commencer
Vous devez avoir déclaré votre module et créé votre premier controleur. Assurez-vous d’avoir suivi les parties suivantes :
Déclarer un nouveau module sous Magento 2
Création d’un controller frontend sous Magento 2
Modification du controller
Reprenons notre controller :
app/code/Maxime/Helloworld/Controller/Say/Hello.php
Nous allons remplacer notre die par une méthode Magento qui permet de charger un layout.
<?php namespace Maxime\Helloworld\Controller\Say; class Hello extends \Magento\Framework\App\Action\Action { public function execute() { $this->_view->loadLayout(); $this->_view->getLayout()->initMessages(); $this->_view->renderLayout(); } }
Si vous vous rendez à l’adresse :
http://magento2.lan/helloworld/say/hello
Vous verrez bien le template de votre site, mais aucun contenu dans la page :
Creation du Block
Nous allons maintenant créer notre premier block, il ne fera pas grand chose pour le moment, mais il est nécessaire. Vous pouvez aussi utliser un block du core de Magento, mais pour cet exemple, nous allons créer le notre pour pouvoir le modifier à l’avenir.
Créez le fichier app/code/Maxime/Helloworld/Block/Hello.php
Et y ajouter le contenu suivant :
<?php namespace Maxime\Helloworld\Block; class Hello extends \Magento\Framework\View\Element\Template { }
Creation du layout
Le layout permet d’associer des blocks de contenus à certaines routes.
Son nom est très important, et doit se composer de :
<Nom du routeur>_<Nom du controller>_<Nom de l’action>
Souvenez vous de la leçon précédente avec nos URL :
http://magento2.lan/helloworld
http://magento2.lan/helloworld/say
http://magento2.lan/helloworld/say/hello
Le nom des layouts associés à ces routes sont les suivants :
helloworld_index_index
helloworld_say_index
helloworld_say_hello
Vu que dans notre exemple, nous utilisons le Controller « Say » et l’action « Hello », nous allons donc créer le fichier :
app/code/Maxime/Helloworld/view/frontend/layout/helloworld_say_hello.xml
Attention, dans le nom du layout, c’est bien l’ID défini dans le routes.xml que vous devez mettre !
Pour ceux qui ont développé sur Magento 1, c’est ici une grosse différence. En effet les layouts et templates étaient situés dans le dossier
app/design
et étaient « séparés » du developpement du module. Ici tout est reuni dans le module en lui-même
Dans le layout, mettez le contenu suivant :
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="2columns-right"> <body> <referenceContainer name="content"> <block class="Maxime\Helloworld\Block\Hello" name="hello" template="helloworld.phtml"> </block> </referenceContainer> </body> </page>
Nous avons défini un fichier « helloworld.phtml », nous allons maintenant le créer !
Création du template
Dernière étape pour notre petit module, afficher le contenu souhaité dans le template.
Créez donc le fichier app/code/Maxime/Helloworld/view/frontend/templates/helloworld.phtml
Pour faire simple, nous allons mettre comme contenu :
<h2>HelloWorld</h2> <p>Congratulations ! You have created your first Magento Module !</p> <p>The block classname is : <?php echo get_class($block) ?></p>
Vous n’avez juste qu’à actualiser votre page magento2.lan/helloworld/say/hello
Le contenu ne s’affiche pas ?
– Pensez à désactiver / vider les caches Magento
– Vérifiez le nom et la structure de votre layout, des infos peuvent être présentes dans var/log/system.log
comme par exemple main.INFO: Theme layout update file '/var/www/magento2/app/code/Maxime/Helloworld/view/frontend/layout/helloworld_say_hello.xml' is not valid.
si votre layout est mal construit
– Vérifier le nom de vos fichier, votre template est-il nommé comme dans le layout ?
– Supprimez le dossier var/generation
Retrouvez ce module sur Github
Bonjour Maxime,
C’est bizarre, mais il me donne page non trouvé 404 quand j’essaye d’acceder à
http://magento2.lan/helloworld/say/hello
Cdt
J’ai oublié de changer le nom de la classe
Merci Maxime
De rien, je n’ai pas fait grand chose lol
C’est en se trompant qu’on apprend 😉
Bonjour
Pour ma part, j’ai tourné en rond un moment autour du message » main.CRITICAL: Invalid template file: ‘helloworld.phtml’ in module:… »
En fait dans le fichier layout, au lieu de mettre uniquement le nom du template, j’ai du le précéder du nom du module, comme ceci:
Je re-poste car visiblement tout le HTML est enlevé:
Moi_Helloworld::helloworld.phtml
Oui le code dans les commentaires ne fonctionne pas je m’en chargerais un jour lol