Créer un Block

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 et comment ça marche ?

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 afficher du contenu en utilisant un template, via un block ;) 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 films). Ces blocks font ensuite appel à 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/Films/. Le nom du module est donc Films et il se trouve dans le namespace Pfay Allez maintenant ouvrir votre controller : /app/code/local/Pfay/Films/controllers/IndexController.php Et le modifier comme ceci :

class Pfay_Films_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 à l’url http://votresite.com/films/index ).

   $this->loadLayout();    //Va chercher les elements à afficher
   $this->renderLayout();   //Affiche les elements
   
Il n’y a plus rien a faire sur le controller. Nous avons indiqué à notre controller qu’il doit aller chercher les informations dans le layout, allons voir ce qui se passe du coté du layout…

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

Avant de pouvoir utiliser le Layout, (et là si vous avez lu les tutoriaux précédents vous commencer à vous douter de la suite…) on doit le déclarer, dire à 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>
        <pfay_films>
             <file>pfay_films.xml</file>
         </pfay_films>
    </updates>
</layout>

Ce petit bout de code en xml vous permettra de déclarer votre fichier pfay_films.xml comme étant le layout de votre module Films (parce qu’il est dans le config.xml de votre module Films) Maintenant, déclaronsle dossier ou vont se trouver les Blocks : Dans <config> et âpres <frontend> rajoutez maintenant :

<global>
     <blocks>
         <pfay_films>
              <class>Pfay_Films_Block</class>
         </pfay_films>
      </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_Films_IndexController se trouve à l’adresse suivante : /app/code/local/Pfay/Films/indexController.php 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 cours, nous avions vu qu’un module contient une partie code et une partie template qui se trouvent à deux endroits différents dans magento. Le layout fait partie de la partie « template », nous avons déclaré dans le config.xml de notre module qu’il s’apellera pfay_films.xml Allez maintenant dans le repertoire layout de votre théme Magento. Dans notre exemple, le template utilisé dans magento se trouvera dans le repertoire suivant: \app\design\frontend\pfay\theme\ (Attention à bien configurer votre théme dans SYSTEM > CONFIG > DESIGN). Nous allons donc créer un Layout pfay_films.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="pfay_films/monblock"  name="afficher_monbloc" template="pfay_films/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 continuer. Je vais quand même vous rappeler à quoi servent quelques bout de code au cas où ;)

     <routeurfrontend_index_index>
         …
     </routeurfrontend_index_index>
     
Pour indiquer à magento quels blocks rajouter dans quelle page, on a créer le Layout ! Ce layout defini des pages,. A l’intérieur de ces pages, on ajoute des 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/films/index, on définit dans le config.xml, le nom du routeur pour pouvoir pointer vers /films, on sait que le controlleur appelé dans ce cas sera donc 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="pfay_films/monblock"  name="afficher_monbloc"  template="pfay_films/afficher.phtml" />
      
Qui signifiera pour magento « crée un block que tu iras chercher dans le module Films, qui s’apellera « monblock » et qui utilisera le template « afficher.phtml » qui se trouvera dans le dossier « pfay_films » 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/Films/Block) et créer le fichier Monblock.php à l'intérieur. Ce fichier contiendra :

class Pfay_Films_Block_Monblock extends Mage_Core_Block_Template
{
     public function methodblock()
     {
         return ‘informations de mon block !!’ ;
     }
}

Ce fichier n’est 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 "pfay_films" avec à l’intérieur un fichier afficher.phtml. Ce fichier contiendra :

    echo $this->methodblock();
    

Comment ca marche ?

On a defini un block de type “pfay_films/monblock” dans le layout, qui fait appel à notre template afficher.phtml, on peut donc accéder dans afficher.phtml aux méthodes de notre block grâce à la variable $this.
Allez maintenant sur http://votresite.com/films/index et vous verrez s’afficher votre site avec comme contenu un texte : « informations de mon block !!

Vous pouvez insérer de block avec ce template dans n’importe quelle page de votre site. Notre exemple est simple car le but est de comprendre comment fonctionne Magento notre block n’a pas vraiment d’utilité dans le monde réel pour le moment. Un block sert en général à faire des traitements du style lister les 5 derniers produits, afficher un formulaire de contact, potentiellemen des blocks que vous seriez content de pouvoir remettre à plusieurs endroits de votre site juste en insérant une petite ligne dans votre Layout. Maintenant vous avez compris à quoi sert un block et comment en crée un ;)

Voilà c’est la fin de ce tutoriel, j’espère que ce tutoriel vous a plus, n’hésitez pas à laisser des commentaires si vous avez des questions ou des remarques constructives ;)
Documents disponibles pour cet article :
Questions sur cette leçon
Pas de questions pour cette leçon. Soyez le premier !

Vous devez etre connecté pour demander de l'aide sur une leçon.