Créer un bloc sous magento 2

Ce tutoriel est le 4eme 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 un bloc pour insérer de la logique à vos templates 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 une vue sur magento2 pour notre extension ! Nous allons maintenant voir comment mettre de la logique dans votre bloc car afficher des templates statiques c'est sympas 2min mais on a envie de passer à la vitesse supérieure ;). Pour cela, on va repartir desfichiers de notre tutoriel précédent.

Créer notre bloc magento2

Le bloc est la partie logique qui sera indiqué dans le layout afin d'afficher le template. On a donc deux parties à un bloc, la partie "visuelle" qui est le phtml et la partie logique que je vais appeler dans la suite de ce tutoriel le "bloc". Quand on parlera de bloc, on parlera donc de la partie "logique" qui se trouvera dans le dossier "Block" de notre module. Et quand je parlerai de "template", je parlerai du phtml qui se trouve dans mon dossier "view".

Commencez donc par créer un dossier "Block" (attention à la majuscule) à la racine de votre module (/Pfay/Contact/Block). Ce dossier contiendra tous les blocs de notre module (toutes les parties logiques de notre module donc, contrairement du dossier view qui contiendra tous les templates phtml).

Créez donc un fichier Contactslist.php à l'intérieur de ce dossier. Ce fichier aura le contenu suivant :


<?php
namespace Pfay\Contacts\Block;
use Magento\Framework\View\Element\Template;

class Contactslist extends \Magento\Framework\View\Element\Template
{
    public function __construct(Template\Context $context, array $data = array())
    {
        parent::__construct($context, $data);
        $this->setData('contacts',array());
    }

    public function addContacts($count)
    {
        $_contacts = $this->getData('contacts');
        $actualNumber = count($_contacts);
        $names = array();
        for($i=$actualNumber;$i<($actualNumber+$count);$i++) {
            $_contacts[] = 'nom '.($i+1);
        }
        $this->setData('contacts',$_contacts);
    }
}

Que contient cette classe ? Cette classe a un attribut $_contacts de type Array, vide lors de son instanciation.
A chaque appel de la méthode addContacts, on ajoutera les $count contacts supplémentaires à ce tableau.
Vous noterez qu'on peut passer une information au bloc et la récupérée automatiquement via les "méthodes magiques" $this->getData('mavariable') et $this->setData('mavariable','mavaleur')
Les développeurs magento (v1) sont habitués à utiliser les "magic methods".

Lier notre bloc magento2 à notre template

Il faut maintenant changer le layout pour que notre template contactslist.phtml aille chercher la classe que nous venons juste de créer ( Pfay\Contacts\Block\Contactslist ) à la place de la classe utilisée jusqu'à maintenant ( Magento\Framework\View\Element\Template ).
Modifiez donc le fichier Pfay/Contacts/view/frontend/layout/contacts_test_index.xml comme ceci :


<?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="Pfay\Contacts\Block\Contactslist" name="contactForm" template="Pfay_Contacts::test_index.phtml"></block>
        </referenceContainer>
    </body>
</page>

Modifier notre template phtml pour utiliser les fonctions de notre bloc

Maintenant qu'on à fait la liaison entre le template et le bloc dans le layout, on peut utiliser les fonctions du bloc dans les templates ! On va donc modifier le fichier /Pfay/Contacts/view/frontend/templates/contactslist.phtml de la façon suivante :


<div id="contactslist">
    <h2>empty</h2>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <?php $contacts = $this->getData('contacts'); ?>
        <?php foreach ($contacts as $contact): ?>
            <tr>
                <td><?php echo $contact ?></td>
            </tr>
        <?php endforeach; ?>
        <tr>
            <td>there is no contact in this list</td>
        </tr>
    </table>


    <h2>10 éléments</h2>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <?php $this->addContacts(10); ?>
        <?php $contacts = $this->getData('contacts'); ?>
        <?php foreach ($contacts as $contact): ?>
            <tr>
                <td><?php echo $contact ?></td>
            </tr>
        <?php endforeach; ?>
    </table>

    <h2>20 éléments</h2>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <?php $this->addContacts(10); ?>
        <?php $contacts = $this->getData('contacts'); ?>
        <?php foreach ($contacts as $contact): ?>
            <tr>
                <td><?php echo $contact ?></td>
            </tr>
        <?php endforeach; ?>
    </table>
</div>

Au début, il n'y a pas de contacts, on appelle la méthode en lui passant 10, il y a donc 10 contacts. On réapelle la méthode en lui passant 10, il y a donc maintenant 20contacts.
Ce code est simple mais il vous permet de voir qu'on peut facilement appeler les méthodes de notre bloc magento2 depuis les templates.

Allez ensuite sur votre page www.magento2.lan/contacts/test/index voyez le résultat :)

Et voilà ! c'est la fin de ce tutoriel. Cela ne fonctionne pas chez vous ? Récupérer les sources de ce module sur github et trouvez plus facilement votre erreur en Téléchargeant le code en bas de ce tutoriel.

Vous savez maintenant Ajouter un bloc et le lier à votre template 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 une vue pour son module Magento 2 Article suivantInstaller et Upgrader son module sous magento 2