Home » Magento Themes » LAYOUTS, BLOCKS and TEMPLATES in MAGENTO (part 1)

LAYOUTS, BLOCKS and TEMPLATES in MAGENTO (part 1)

For developers who’re new to Magento. there’s always confusion between layout and view system of Magento. In this tutorial, we will clarify what exactly LAYOUTS, BLOCKS and TEMPLATES in MAGENTO and what are their roles in MVC model.

In Magento, View class includes Block and Template. Block are php objects while Template are files that contains a mix of HTML and PHP (phtml extension). In template files, we use $this  to refer block’s objects

1. Block

There are 2 types of block in Magento: Structural block and content block.

- Structural block: blocks created to define posistion of other blocks in one page. For example: By default, Magento homepage use 3-column layout:

  • Head
  • Left
  • Content
  • Right
  • Footer
  • structure

LAYOUTS, BLOCKS and TEMPLATES in MAGENTO 2

- Content block: Content blocks are blocks that contain content, they’re showed inside structural blocks. Every content block show a block of content via template files and integrate into parent block – structural block. Now, let’s see which content blocks are included in right column:

  • Minicart
  • Recently viewed product
  • Newsletter subsription block
  • Poll

When there’s a request from user to load a page:

- Magento will load several structural sections.

- Every structural section contains content block. Magento will take all of these blocks and assign corresponding structural blocks as per layout to handle output.

- Finally, the system will return to browsers the content that was formated position.

2. Template

Template are phtml files that are located in Design folder. They are a mix of PHP and HTML code, so the extension is phtml. These templates retrieve data from block files and show to users.

Example of a template file :

3. Layout

After going through Block and Template sections, we already have basic knowledge on what Block and Template are, however, you may still wonder:

- How to tell Magento which Blocks I want to use on a page?
- How to tell Magento which Block I should start rendering with?
- How do I specify a particular Block in getChildHtml(…)? Those argument strings don’t look like Block names to me.

This is what the Layout Object will do for you. The Layout Object is an XML object that will define which Blocks are included on a page, and which Block(s) should kick off the rendering process.

Now we will go through this simple example to better understand this by creating a Hello World module that prints “Hello World” text to browser.

Step 1: create a layout file named Local.xml in:

Step 2: create template file  simple_page.phtml  in

app/design/frontend/base/default/template/magentotutorial/helloworld/simple_page.phtml Step 3: Finally, each Action Controller is responsible for kicking off the layout process. We’ll need to add two method calls to the Action Method  loadLayout()  and   renderLayout(): After you’re done, just clear cache and refresh the actions to see the result, now you should now see a website with a bright red background and an HTML source that matches what’s in simple_page.phtml.

In the example above, layout filed has mapped block page/html with template simple_page.phtml to show on all pages of Magento (default tag of layout file). Show we’ve just answered the 1st question How to tell Magento which Blocks I want to use on a page?

In the next article, we will find the answers for question 2 and 3.

Have any questions or feedbacks? Feel free to drop a line here :)

Happy coding

 

About Brian Wilson

avatar
Brian is a freelance Magento developer with 5 years of experience with customizing Magento extensions, magento themes. He's interested in sharing Magento Tutorials to the community

2 comments

  1. avatar

    Thanks for this awesome tutorial. Please provide more tutorials if you can send me in email.

    Thanks in advance

  2. avatar

    Hi , nice tutorial , please provide some other tutes too !!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top