Guide Magento Developpeur (Leçon 3) – Créer un Block

Ce tutoriel est le 3eme d’une longue série, si vous ne l’avez pas déjà fait je vous conseille de lire les tutoriels en commençant par le sommaire de cette série. Nous avons précédemment crée un module, nous allons maintenant apprendre à créer et afficher un Block magento.

Pourquoi créer un block ?

Pour l’instant, votre module est un peu « simple », vous pouvez exécuter des traitements mais son utilité est assez limitée. Nous allons maintenant apprendre à afficher du contenu en utilisant un template, c’est à ca que sert un block

Comment ca marche ? ok on va faire un petit rappel :

Le controller, appelle votre layout pour savoir ce qu’il doit afficher, dans ce layout, vous placez des blocks qui sont en fait une sorte de « mini controller » (qui vont par exemple récupérer une liste de client). Ces blocks font ensuite appel a des templates pour afficher leurs informations.

Maintenant que vous avez compris comment ca marche, la seule façon de comprendre c’est de le faire alors allons y !

Etape 1 : Appeler le layout dans le controller

Pour rappel, votre module se situe dans /app/code/local/Pfay/Test/. Le nom du module est donc Test et il se trouve dans le namespace Pfay

Allez maintenant ouvrir votre controller :

/app/code/local/Pfay/Test/controllers/IndexController.php

Et le modifier comme ceci :

class Pfay_Test_IndexController extends Mage_Core_Controller_Front_Action
{
     public function indexAction()
     {
          $this->loadLayout();
          $this->renderLayout();
     }
      public function mamethodeAction()
      {
          echo ‘test mamethode’;
      }
}

Comme vous le voyez, j’ai rajouté dans mon action index, deux petites lignes. Ces lignes vont chercher ce qu’il faut afficher quand on arrive sur cette action (en allant a l’url http://votresite.com/test/index par exemple).

   $this->loadLayout();    //Va chercher les elements à afficher
   $this->renderLayout();   //Affiche les elements

Pour l’instant, il n’y a plus rien a faire sur le controller. Nous avons indiqué a notre controller qu’il doit aller chercher les informations dans le layout, allons maintenant voir ce qui se passe du coté du layout…

Etape 2 : Déclarer les éléments à afficher grâce au Layout.

Pour commencer avant de pouvoir utiliser le Layout, (et la si vous avez lu les tutoriaux précédents vous commencer a vous douter de la suite…) on doit le déclarer, c’est-à-dire, déclarer a magento qu’il va pouvoir l’utiliser et qu’il existe. Pour cela allons dans notre fichier config.xml. (qui se trouve dans le repertoire /etc de votre module).

Ouvrez le et rajoutez y dans <frontend> et apres <routers> :

<layout>
   <updates>
        <test>
             <file>test.xml</file>
         </test>
    </updates>
</layout>

Ce petit bout de code en xml vous permettra de déclarer votre fichier test.xml comme étant le layout de votre module Test (parce qu’il est dans le config.xml de votre module Test)

Maintenant, déclarons le dossier ou vont se trouver les Blocks :

Dans <config> et âpres <frontend> rajoutez maintenant :

<global>
     <blocks>
         <test>
              <class>Pfay_Test_Block</class>
         </test>
      </blocks>
</global>

Dans <global> vous déclarez vos Blocks, c’est aussi ici que vous déclarerez par la suite vos Model et vos Helpers (on verra plus tard ce que c’est).

Remarque importante :

Sous Magento quand vous déclarez vos classes, le nom de votre classe correspond au chemin vers ce fichier, ainsi notre controller Pfay_Test_IndexController se à l’adresse suivante : /app/code/local/Pfay/Test/indexController.php

Vous en déduisez donc que les noms de vos Blocks seront du type Pfay_Test_IndexController_MonBlock

Maintenant que le fichier config.xml est configuré et que magento est capable de trouver notre layout et nos blocks, allons voir ce qui se passe du coté du Layout !

Le layout :

si vous vous souvenez bien, dans la première leçon de ce tutoriel, nous avions vu qu’un module contient une partie code et une partie template qui se trouvent a deux endroits différents dans les répertoires de magento.

Le layout fait partie de la partie « template », nous avons déclaré dans le config.xml de notre module qu’il s’apellera test.xml

Allez maintenant dans le repertoire layout de votre théme Magento.

Dans notre exemple, le template utilisé actuellement dans magento se trouvera dans le repertoire suivant: \app\design\frontend\pfay\theme\ .

Nous allons donc créer un Layout test.xml dans le répertoire \app\design\frontend\pfay\theme\layout\
Une fois ce fichier crée, éditez le et copiez dedans :

<layout version="0.1.0">
     <default>
          <reference name="content">
          </reference>
      </default>
      <routeurfrontend_index_index>
           <reference name="content">
                <block type="test/monblock"  name="afficher_monbloc"
                          template="test/afficher.phtml" />
           </reference>
      </routeurfrontend_index_index>
</layout>

Je ne vous explique pas comment cela fonctionne, si vous ne comprenez pas ce code je vous conseiller d’aller lire le guide du designer magento et d’etre au point la dessus avant de commencer a essayer de développer un module.
Je vais quand même vous rappeler a quoi servent quelques bout de code au cas où

     <routeurfrontend_index_index>
         …
     </routeurfrontend_index_index>

Pour indiquer a magento quels blocks rajouter dans quelle page, on a créer le Layout !

Ce layout defini des pages, a l’intérieur de ses pages, on ajoute ses blocks. Une page s’écrit de la forme suivante : « nom du routeur »_ « nom du controller »_ « nom de l’action »
Ainsi quand on veut accéder à notre action http://votresite.com/test/index, on a défini dans le config.xml le nom du routeur a routeurfrontend, on sait que le controlleur appelé dans ce cas la est le controller IndexController.php, et que la méthode appelée sera IndexAction().La page sera donc dans le layout représenté par la balise : routeurfrontend_index_index

Et on mettra à l’intérieur l’instruction :

      <block type="test/monblock"  name="afficher_monbloc"  template="test/afficher.phtml" />

Qui signifiera pour magento « crée un block que tu iras chercher dans le module Test, qui s’apellera « monblock » et qui utilisera le template « afficher.phtml » qui se trouvera dans le dossier « test » du dossier « template ».

Etape 3 : Créer le block

Maintenant, il faut créer le block « monblock », allez donc dans le dossier que vous avez défini dans le config.xml pour stocker vos blocks (app/code/local/Pfay/Test/Block) et créer le fichier Monblock.php dedans.

Ce fichier contiendra :

<?php
class Pfay_Test_Block_Monblock extends Mage_Core_Block_Template
{
     public function methodblock()
     {
         return ‘informations de mon block !!’ ;
     }
}

Ce fichier n’est juste qu’une classe de type Block (Mage_Core_Block_Template) avec une méthode methodblock() qui retourne une phrase (de type String)

Etape 4 : Créer le template

Allez maintenant dans le répertoire \app\design\frontend\pfay\theme\template\

Et créer un répertoire « test » avec à l’intérieur un fichier afficher.phtml.

Ce fichier contiendra :

<?php
    echo $this->methodblock();
?>

Comment ca marche ?

On a defini un block de type “test/monblock” dans le layout, qui fait appel a notre template afficher.phtml, on peu donc accéder dans afficher.phtml aux méthodes de notre block grace a la variable $this

Etape 5 : Tester !!

Allez maintenant sur http://votresite.com/test/index et vous voyez maintenant s’afficher votre site avec comme contenu un texte : « informations de mon block !! »

Fin de ce tutoriel ?

Maintenant, vous pouvez insérer de block avec ce template dans n’importe quelle page de votre site J. Notre exemple est simple car le but est de comprendre comment fonctionne Magento donc notre block n’a pas vraiment d’utilité.
Un block sert en général a faire des traitements du style lister les 5 derniers produits ajouté dans votre boutique Magento, afficher un formulaire de contact ou un formulaire pour faire un devis rapidement…tous ces blocks vous seriez content de pouvoir les remettre a plusieurs endroits de votre site juste en insérant une petite ligne dans votre Layout non ? Ok maintenant vous avez compris a quoi sert un block et comment en crée un

Voila c’est la fin de ce tutoriel, j’espère que ce tutoriel vous a plus, n’hésitez pas a laisser des commentaires si vous avez des questions ou des remarques éventuelles

Retrouvez le sommaire de ce tutoriel