Magento 2 Tuto 2.2 - Créer un block

mercredi 5 octobre 2016, par Super Pangolin

Le principe de bloc
Dans magento, tout est découpé en bloc.

Le but d’un site de vente en ligne est d’afficher des produits et leurs infos, de les sélectionner et de payer à la fin. On veut donc, basiquement, afficher des données sur un navigateur.

La finalité d’un bloc est donc d’afficher des informations mises en pages.

Un bloc peut être redécoupé en blocs plus petits : l’affichage d’un produit sera découpé en blocs photo, description, prix, ...

La classe contenant le code php du block
Nous allons créer un block basique dans notre module tout neuf. Ce bloc étendra de \Magento\Framework\View\Element\Template, la classe qui permet de générer de l’affichage. Souvent, on étend directement des blocs natifs de magento qui implémentent des méthodes utiles, comme par exemple vendor/magento/module-catalog/Block/Product/ListProduct.php qui permet d’étendre les listes de produits.

<?php
namespace Pangolin\ExtendedProducts\Block;
/**
* Block Message
*/
class Message extends \Magento\Framework\View\Element\Template
{
public function getMessage()
{
return "Message qui sera bientôt configurable!!";
}
protected function _toHtml()
{
$html = parent::_toHtml();
if(empty($html)){
$html = '<div>'.$this->getMessage().'</div>';
}
return $html;
}
}

Ici, la méthode getMessage renvoie un texte en dur et _toHtml redéfinit celle de la classe parente qui normalement ne renvoit rien si on ne définit pas de template (cf plus loin).

Insérer notre block dans une page
On passe par un « layout », un fichier xml qui définit le contenu des pages. Le nommage des layout est fonction du module, contrôleur et de l’action exécutée.

Par exemple, pour l’affichage d’une page produit, on passe par le contrôleur vendor/magento/module-catalog/Controller/Product/View.php.

Le nom du layout sera donc vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml

Pour l’exemple, nous allons insérer notre bloc sur la page d’accueil du site. Son layout est vendor/magento/module-cms/view/frontend/layout/cms_index_index.xml car c’est une page générée par le cms (système de gestion de contenu) interne de magento.

Nous n’allons évidemment pas modifier ce fichier mais en créer un autre dans notre module.

Pour cela, on crée le répertoire view/frontend/layout à la racine de notre module. Dans mon exemple, ce sera app/code/Pangolin/ExtendedProducts/view/frontend/layout. A l’intérieur, on créer le fichier cms_index_index.xml. Maintenant, il faut réussir à insérer notre bloc dans la page. Il faudrait plusieurs tutos complets pour tout comprendre sur les layouts. Ici, nous allons insérer notre bloc au contenu de la page.

<?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="Pangolin\ExtendedProducts\Block\Message" name="pangolin_extended_products_message" />
</referenceContainer>
</body>
</page>

Petite explication : on se place dans le conteneur "content" (qui est compris entre le header et le footer) et on lui dit d’insérer le rendu de notre bloc. Comme nous ne précisons rien de plus, il sera en haut de la page. On reviendra sur les layouts dans un tuto ultérieur.

Bien entendu, nous sommes sous magento, tout changement dans un xml nécessite de vider les caches.

php bin\magento cache:flush

Le rendu n’est pas terrible, mais notre bloc est bien pris en compte :

Dernière étape :

Utiliser un template

Les templates sont de simples fichiers phtml appelés dans le layout. Leur particularité est de connaître l’objet $block qui contient l’instance de notre classe de block.

Un fichier phtml contient du code html plus la balise php.

On stocke les templates du site dans le répertoire view/frontend/templates du module. Leur nommage est laissé à la discrétion du développeur ; ils peuvent être hiérarchisés dans des répertoires.

Nous allons en définir un simple. Appelons le app/code/Pangolin/ExtendedProducts/view/frontend/templates/message.phtml :

<?php
/**
* @var $block \Pangolin\ExtendedProducts\Block\Message
*/
$message = $block->getMessage();
?>
<span class="info"><?php echo $message ?></span>

On modifie ensuite le layout pour qu’il prenne en compte notre template :

<?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="Pangolin\ExtendedProducts\Block\Message" name="pangolin_extended_products_message" template="Pangolin_ExtendedProducts::message.phtml" />
</referenceContainer>
</body>
</page>

Télécharger

Le chemin du template comprend le nom du module (tel que défini dans le fichier module.xml) suivi de « : :» puis du chemin vers le fichier à partir du répertoire « template ».

Ça fonctionne, on peut nettoyer notre bloc et rajouter la méthode pour le rendre dynamique :

<?php
namespace Pangolin\ExtendedProducts\Block;
/**
* Block Message
*/
class Message extends \Magento\Framework\View\Element\Template
{
/**
* @var string
*/
protected $messageText = "Message par défaut";
/**
* @param $message string
*/
public function setMessage($message) {
$this->messageText = $message;
}
/**
* @return string
*/
public function getMessage()
{
return $this->messageText;
}
}

La méthode setMessage pourra être appelée dans un bloc parent ou un contrôleur pour modifier le message. Ici, nous allons l’appeler dans le template, ce qui n’est pas très utile.

<?php
/**
* @var $block \Pangolin\ExtendedProducts\Block\Message
*/
$block->setMessage('Bienvenue sur ma boutique!!');
?>
<span class="info"><?php echo $block->getMessage() ?></span>

Et voila !! Vous avez les bases pour créer vos blocs magento 2.

Magento 2 Tuto 2.2 - Créer un block

Un message, un commentaire ?

Programmation

Dans la même rubrique