Home
How To

Utilizing blocks, layouts and templates On Magento Theme

Utilizing blocks, layouts and templates On Magento Theme
Magento platform

As a Magento user, you might be well familiar with its flexibility and the ease of re-using the designs via the layouts defined in XML. If you've been facing issues with effective management of your Magento site's theme then this is a custom-made post for you.

What you'll learn in this post?

This tutorial allows you to dig deep into effective utilization of blocks, layouts and templates for managing the Magento theme in a convenient way. 

Understanding the Magento MVC system

As compared to other MVC systems. Magento's Action Controller doesn't set the properties on view object and also doesn't pass a data object to the view, with just a few exceptions. Instead, Magento's View component references the system models for fetching information that's required for display purpose. Moreover, Magento's View has been separated into specific Blocks and Templates where blocks represent PHP objects and Templates represent “raw” PHP files with a mix of PHP and HTML.

chart

Let's get to know about utilization of Magento layouts

Displayed below is an example of layout XML file called register.xml available for the Mage_Register module. Here, do note that the root element of any layout XML file is<layout>.

<layout version="0.2.0">
  <default>
    <reference name="header_links">
      <action method="addLink" translate="label title" module="register" ifconfig="register/register/enabled"><label>Register Now</label><url>lists</url><title>Register Now</title><prepare>true</prepare></action>
    </reference>
  </default>

  <register_index_index translate="label">
    <label>Register Now Form</label>
    <reference name="root">
      <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
      <action method="setHeaderTitle" translate="title" module="register"><title>Register Now</title></action>
    </reference>
    <reference name="content">
      <block type="core/template" name="registerForm" template="register/form.phtml"/>
    </reference>
  </register_index_index>
</layout>
As per the above code, each Action Controller is responsible for initiating the layout process. For this, all you need to do is simply add two method calls to the Action Method as shown below:
public function indexAction() {
    //echo 'Register Now';
    $this->loadLayout();
    $this->renderLayout();
}

Once you're done with the above steps, simply clear your site's cache and reload the Register Now controller page. 

An overview on using Magento templates and blocks

For instance, if you open the default merchandise Template available at:
  • app/design/frontend/base/default/template/catalog/merchandise/list.phtml

You'll be able to view the below mentioned PHP template code inside it:

<?php $_merchandiseCollection=$this->getLoadedMerchandiseCollection() ?>
<?php if(!$_merchandiseCollection->count()): ?> <div class="note-msg">
    <?php echo $this->__("There are no merchandise items as per your selection.") ?>
</div> <?php else: ?>
...
In the above code, the getLoadedMerchandiseCollection method can be spotted in the Template's Block class i.e. Mage_Catalog_Block_Merchandise_List as shown below:
The file for this is: app/code/core/Mage/Catalog/Block/Merchandise/List.php
And code is:
 ...
public function getLoadedProductCollection(){    return $this->_getProductCollection();}...
Here, the respective block's _getMerchandiseCollection instantiates the models, followed by reading their data and returning a result to template.

Block Instantiation

Within the Layout XML file, every <block> has a specific “type” which is actually the Grouped Class Name URI as shown below:
<block type="page/html" ...<block type="page/template_links" ...
This URI actually references a specific location, for example global config. While the first portion of URL is used for querying global config for finding the page class name, the second portion is being appended to base class name for creating class name that Magento should instantiate. 

Exploring the getChildHtml method in Magento Blocks/Templates

The getChildHtml method allows you to include contents of a secondary block/template within a primary Magento block/template. The approach followed for creating the HTML layout for your page is Blocks calling Blocks calling Blocks and so on.

The file which contains the code for one column layout Template is: app/design/frontend/base/default/template/page/one-column.phtml

And the code is as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3c.org/2000/xhtml" xml:lang="?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>"><head><?php echo $this->getChildHtml('head') ?></head><body class="page-popup <?php echo $this->getBodyClass()?$this->getBodyClass():'' ?>">    <?php echo $this->getChildHtml('content') ?>    <?php echo $this->getChildHtml('before_body_end') ?>    <?php echo $this->getAbsoluteHeader() ?></body>

In the above template, each call to $this->getChildHtml(...) will comprise and also render a different block. These Blocks will then use the getCHildHtml method for rendering other Blocks.

Using references for hooking XML declarations

You can use the <reference name=””/> tag which will hook all the XML declarations available within the existing block along with their specified name. Additionally, the included <block /> nodes will also be assigned as child blocks to the referenced parent/original block. The code for this is displayed below:
<layout version="0.2.0"><default><block type="page/html" name="root" output="toHtml" template="page/2columns-right.phtml"><!-- ... sub blocks ... --></block></default></layout> 
When the references are used in a different layout file, the code will look something like this:
<layout version="0.2.0"><default><reference name="root"><!-- ... another sub block ... --><block type="page/adifferenttype" name="a.different.block.name" template="path/to/a/different/template" /></reference></default></layout> 

As is visible from the above code, even though the root block has been declared in a different layout XML file, the newly created block will be added as a child block. While Magento initially creates the page/html Block that's called root, when it encounters a reference with the same name, it will assign the new block a.different.block.name as the child of the parent/rock block.
That's it for now!

Summing Up

Now that covers the use of layouts, blocks and template during Magento theme management venture. Hope the configurations explained above would have helped you gather a detailed understanding of Magento MVC architecture.
Write For Us Content Writer
Written by Isabella Morris
Isabella Morris is currently employed with a renowned Magento development company and is also engaged in writing informative articles on best tools and tricks for Magento development. Her write-ups have proved beneficial for a wider group of Magento developers across the globe.
Write For Us

Post a Comment

Go Up