Customize Content Blocks in Magento Layouts

The ‘View’ of Magento’s MVC pattern implementation is divided in two parts: Layout and Template. The template represents a HTML block while layout defines the location of the block on a web page. Magento provides ultimate flexibility and re-usability of design by layouts defined in XML.

Layout is the tool with which you can assign content blocks to each structural block you create. Magento’s layout files are in the form of XML text-files and by modifying the layout you are able to move blocks around in a page and assign templates to the content blocks to produce markup for the structural blocks. In fact, with the help of a few layout files alone, you are able to modify the visual layout of every page in your store.

How Layout Works

Layout is comprised of default layout and layout updates that are made up of easy-to-learn XML tags. With these layout commands, you can modify/assign content block-structural block relationships and also control store-front functionalities such as loading and unloading of block-specific Javascripts to a page.

Layout files are separated on a per-module basis, every module bringing with it its own layout file (for instance ‘catalog.xml‘ is a layout file for the catalog module, ‘customer.xml’ is for the customer module…etc).

These layout files are located in app/design/frontend/your_interface/your_theme/layout/ and each file is further separated by handles, each handle (with the exception of <default>) assigning its nested updates to the according specific page in the store.

Some layout files may contain the <default> handle. When parsing the layout files, Magento first grabs the layout updates assigned in the <default> handle of almost all layout files, reading them in the order as assigned in app/etc/modules/Mage_All.xml.

It then parses the page-specific layout update, finalizing the building of a store page. The system is built this way in order to allow seamless addition and removal of modules without effecting other modules in the system.

Layout XML

Layout XML files can be found in app/design/frontend/[package]/[theme]/layout. Each Magento module may define its own layout XML file in the config.xml file.

<frontend>
<layout>
<updates>
<mymodule>
<file>mymodule.xml</file>
</mymodule>
</updates>
</layout>
</frontend>

Each layout XML file represents its own design update. For example, catalog navigation is part of the Mage_Catalog module and Mage_Catalog module defines a layout update file: catalog.xml. So the block for the catalog navigation and its location on the page is defined in catalog.xml.

Before the page is rendered, Magento loads all configured layout update files and its design updates to determine which block is to be rendered at which location.

Layout Handles

First level child elements of the <layout> node are called layout handles. Each layout handle represents an update to the page layout. It may define new blocks to be included in a page at a specific location or remove a specific block from the page. It may also define the modifications in existing blocks already included in the page by other layout XML files.

After Magento loads all layout XML files, it determines which layout handles need to be processed. Normally, the layout handle is selected based on the controller action being executed. In most cases, Magento loads the layout handle with name: [module_front_name]_[controller_name]_[action_name].

For example, when the contact us page is requested, then index action of index controller of Mage_Contacts is executed. Module front name of Mage_Contacts is contacts. So the layout handle to be processed for the contact us page is contacts_index_index.

For any page, Magento always processes the default layout handle. So the updates defined in default handle are processed for every page regardless of which part of the site we are browsing.

Source: CodeWebber