Magento Developper’s Guide (Lesson 3) – Create your own Block

This tutorial is the 3rd of many , if you do not already have read them I suggest you starting with the summary of this series. We have previously created a plugin, we will now learn how to create and display a magento Block.

Why create a block

For now, your plugin is a bit « simple », you can perform treatments but its usefulness and quite limited. We will now learn how to display content using a template, that’s what is a magento block

How does it work? ok we’ll do a little reminder:

controller , call your layout to know what to show in this layout, you place blocks which are in fact a kind of « little controllers » (who will retrieve a list of client for exemple). Then these blocks appeals templates to display their informations.

Now that you understand how it works, the only way to understand it si to make one ! So…let’s go!

Step 1: Call the layout in the controller

Remind , your plugin is located in /app/code/local/Easylife/Test/. The plugin name is Test and it is in the namespace Easylife

Now open your controller:

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

And modify it like this:

<?php
class Easylife_Test_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout();
        $this->renderLayout();
    }
    public function mymethodeAction()
    {
        echo 'test my methode';
      }
}

As you can see, I added in my action index , two small lines. These lines will search what to display when you get on this action (by going to the URL yoursite.com/test/index for example).

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

$this->renderLayout();   //Affiche les elements

For now, there’s nothing more to do on the controller. We indicated to our controller that it must get the information in the layout, let’s see what happens on the side of the layout …

Step 2: Declare the items to be displayed using the Layout.

To start before you can use the Layout, (and if you read the previous tutorials you begin to predict the continued …) it must be declare, with a declaration Magento is going to be able to use it. To do this go into our file config.xml (located in the directory /etc of your module).
Open it and add it in <frontend> and after <routers> :

<layout>

   <updates>

        <test>

             <file>test.xml</file>

         </test>

    </updates>

</layout>

This litte xml code will allow you to declare your file test.xml as the layout of your plugin test (because it is in your config.xml of your Test plugin) Now declare the folder or will find the Blocks:
In <config> and bitter <frontend> now add:

<global>

     <blocks>

         <test>

              <class>Easylife_Test_Block</class>

         </test>

      </blocks>

</global>

In you declare your Blocks, it is also where you will declare later your models and Helpers (we will see later what it is).

Important Note:

In Magento when you declare your classes, the name of your class is the path to this file, so our controller Easylife_Test_IndexController is at the following address: /app/code/local/Easylife/Test/IndexController.php So you deduce that the names of your blocks will be the type Easylife_Test_IndexController_MonBlock. Now that the config.xml file is configured and magento is able to find our layout and our blocks, let’s see what happens on the side of the Layout!

layout:

If you recall, in the first lesson of this tutorial , we saw that a plugin contains some code template and that files are has two locations in the directories magento. The layout is part of the « template », we declared it in our config.xml module as named test.xml Now go to the directory layout of your Magento theme. In our example, the template currently used in magento will be in the following directory: \app\design\frontend\Easylife\theme\ . We will therefore create a Layout test.xml in the directory \app\design\frontend\Easylife\theme\layout\
Once this file is created, edit it and copy it:

<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>

I do not tell you how it works, if you do not understand what code I advise you to read the guide magento designer and it must be mastered before starting to try to develop a module.
I’m going to remind you what are some piece of code in case;)

<routeurfrontend_index_index>

    ...

</routeurfrontend_index_index>

To indicate which blocks a magento add to wich page, we have created the layout!
This layout define the pages, in this pages we add blocks. One page is written like this: «  router name »_ »name of the controller »_ »action name »
So if you want to access our action yoursite.com/test/index we have already defined in the config.xml that the name of the router will be routeurfrontend , we know that the controller called in this case is the controller IndexController.php , and that the method wich will be called is indexAction() . The page will be in the layout represented by the tag: routeurfrontend_index_index
And we will add in this file, the line:

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

That mean for magento « creates a block that you will take in the Test module, which is called « monblock » and use the template « afficher.phtml » which will be in the folder « test » of the « template » folder.


Step 3: Create the block

Now, we have to create the block «  monblock « ,so go to the folder you specified in config.xml to store blocks (app/code/local/easylife/Test/Block) and create the Monblock.php file in it. This file will contain:

<?php
class Easylife_Test_Block_Monblock extends Mage_Core_Block_Template
{
    public function mythodblock()
    {
        return 'information about my block !!' ;
    }
}

This file is just a class of type Block (Mage_Core_Block_Template) with a method mythodblock() which returns a sentence (String)


Step 4: Create the template

Now go to the directory \app\design\frontend\easylife\theme\template\
And create a directory « test » with a file inside afficher.phtml.
This file will contain:

<h1><?php echo $this->mythodblock();  ?></h1>



How it works

We have defined a block of type « test/monblock » in the layout, which appeals to our template afficher.phtml. So in afficher.phtml we can access to the monblock functions thanks to the variable $this.

Step 5: Test!

Now go to yoursite.com/test/index and now, you can see appear on your website a text: « information from my block!  »

End of this tutorial

Now you can insert a block with the template in any page of your site. Our example is simple because the goal is to understand how Magento work. Our block is not really usefull in a real website.

A block is generally used to make treatment of the style list the last 5 products added to your Magento store, display a contact form… you would be happy to hand them over several locations your site just by inserting a small line in your layout is not it ? Ok now you understand What does a block and how to create one,

Here is the end of this tutorial, i hope you enjoyed this, feel free to leave comments if you have any questions or comments.

 Find the summery of this tutorial