Understanding the Ins and Outs of Magento Layouts

Magento Layouts

Magento layouts are one of the essential components to be addressed while building custom Magento themes. These layout files are great in rendering frontend Magento pages and are built using small set of XML tags that reside under app>design>frontend> base> default> layout. Although they look quite tricky initially, but once you get the grips, they can help you in many ways to achieve flexibility in your design. You need is to learn some key concepts and commands that will help you modify your store efficiently.

In this article, I will give you a brief introduction about Magento layouts, how do they work, and what role they play while custom Magento theme development.

 

Introducing the Basis of Magento Layout Files

Typically, Magento layouts are used to determine the positioning of different elements on a page and also defining which PHTML element should be loaded and placed on a webpage. Magento layouts are virtual component within the Magento application. These components can easily be modified to help you upgrade your e-commerce store in the best possible manner.

Magento layouts are made of default layout and layout updates. The commands provided by these layouts, one can effortlessly modify the content block-structural block relationships and also establish an optimum level of control on the store-front functionalities which include loading and unloading of block-specific JavaScript files.

Layouts can be segregated on the basis of modules. Each Magento module has its own layout file just like the customer module has costumer.xml file layout file. Layout files are located in your theme inside the layout folder. Catalog.xml, checkout.xml etc. are some of the Magento layout files.

Further, Magento makes use of 3 files to render its pages. These are:

• Block classes

• PHTML Files

• Layout XML

Magento implements the MVC ( Modular Controller Architecture) pattern. PHTML file consists of all the HTML (view) related codes, while Block Classes is associated with the view logic. Layout XML are those files which bring together both PHTML classes and Block Classes. It is also used in determining the location of phtml file within a page.

Let’s Explore a Little Bit About Magento Layouts

As mentioned before, layout contains a small set of XML tags that define the nature and behavior of a page along with its related elements. In order to understand Magento layout better, you need to look at it through a variety of angles and elements that are responsible for its creation. Some of these elements include:

1. Handle

Handles are the kind of entity which help Magento in determining the block to be loaded first when a particular module is being called. Each handle also has its own content-nested block specific to the page. If your layout file has the <default> handle, then you may ask for module-specific handles and default handles. This way it can be said that module-specific handles are only responsible for rendering the blocks inside it, whereas the default handle has the ability to load most of the pages.

<block>

Magento makes use of <block> tag to to determine the way a building block should behaved and visually presented. There are basically two types of block which Magento utilizes. They are:

• Structural Blocks

• Content blocks

The only way to make out a difference between them is by observing the tags attribute they are assigned with. Below mentioned are some of the attributes exhibited by Block.

• Type- responsible for defining the block classes wherein several other functionalities can also be defined.

• Before/after- Attributes used to define the positioning of our block within the structural block.

• Template- This attribute is responsible for determining the template that will represent the actual functionality of a block and the attribute it’s being assigned with.

• Action- using <action> once can easily trigger any action such as loading or unloading JavaScript scripts.

• As- Used for structural blocks

<reference>

Using the <reference> tag you can gain the ability to extend the already existing blocks. In order to make reference to another block, you need just target the reference to a block by using the ‘name’ attribute. This attribute will directly the <block> tag’s name attribute. This way, you are making a reference by <reference name= “right”>, you are actually targeting the block which is <block name = “right”>

<remove>

You can make use of <remove> tag to remove a specific block. Consider the example of your user registration page, wherein you want to remove both right and left columns that the block can be removed using the syntax called: <remove name= “name of your block”>

Adding JavaScript and CSS

In you want to add JavaScript or CSS to any specific page layout file. Say, if you want to create a custom login account. This is how you can go about it.

<customer_account_login>

<reference name='head'>

<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

<action method="addJs"><script>varien/js.js</script></action>

</reference>

</customer_account_login>

Conclusion

Hopefully, you have gained a pretty good understanding of Magento layouts and how they can be used to determine and modify the behavior of your web pages.

Author Bio

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.