The basic guide to Magento layout development

Structure of layout

Layout definitions are always connected to a given extension. They can be set in the extension’s config.xml file on the customer page as the following:

 <frontend>
<layout>
<updates>
<aionmodul module=”Aion_Modul”>
<file>aion_modul.xml</file>
</aionmodul>
</updates>
</layout>
</frontend>

And also on the admin page:

<adminhtml>
<layout>
<updates>
<aionmodul>
<file>aion_modul.xml</file>
</aionmodul>
</updates>
</layout>
</adminhtml>

The tag within the <updates> tag should be a unique name.

You can see in both cases that the name of the layout file should be defined in the <file> tag. The layout files are to be found in the app/design/frontend/[package name]/[theme name]/layout, and the app/design/adminhtml/[package name]/[theme name]/layout directories.

In the XML file, it should be defined between the following tags which layout handler the command (tag) should consider.

<layout version=”0.1.0″> 

and

</layout>

 

 

Function of layout handle

Block definitions are always located within a well defined handle. A layout handle designates a collection of more blocks with a name. The default layout handle is added to every page in the given scope. The main page is built up according to the following layout handles:

  1. default
  2. cms_page
  3. STORE_default
  4. THEME_frontend_rwd_default
  5. cms_index_index
  6. page_two_columns_right
  7. customer_logged_out
  8. cms_menu

 

Indeed, the default handle has also been given to this page. The cms_page, cms_index_index and cms_menu handle also loads which means that the main page is a CMS page too. The same list looks like this on a login page:

  1. default
  2. STORE_default
  3. THEME_frontend_rwd_default
  4. customer_account_login
  5. customer_logged_out

 

The 4th handle defines that at the moment customer front name, account controller and login action serve the page. In the case of the main page, these are cms front name, index controller and index action.

 

layout magento

 

Function of blocks

In the above examples we have touched on blocks marginally, but now let us see in more detail what blocks mean in Magento. Below you can see a list of the different types of Magento blocks:

  • core/template: This type of block is responsible for rendering templates. The majority of blocks belong to the core/template type.
  • page/html: This block type is derived from a core/template block. It defines the parent block. Every other block is a child block of page/html block.
  • page/html_head: This block type is responsible for the HEAD section of an HTML page. Thanks to it, we can define JavaScript, CSS etc. items.
  • page/html_header: It is in charge of displaying the header of the page. Here we find the logo of the ecommerce store, top links etc.
  • page/template_links: This block type is used for creating link lists. Links are displayed in the header and footer by default with the help of the page/template_links
  • core/text_list: Some page elements (content, left sidebar, right sidebar) are displayed with the core/text_list block. When these block types are rendered, all their child blocks are rendered automatically. An important feature of core/text_list block types is that they do not have templates.
  • page/html_wrapper: This block type can be used for wrapping other elements. It uses <div> tag by default.
  • page/html_breadcrumbs: This block type displays breadcrumbs on the page.
  • page/html_footer: This block type displays the footer where you can find copyright details, footer links etc. by default.
  • core/messages: This block type shows the messages. A message can be an error, success or warning type message.
  • page/switch: This block type displays the drop down language selection options.

 

Of course, these block types are only the default types. There can be others created according to the custom design theme or extension requirements.

Each block must have a type and name. Block template and alias are not necessary.

With a reference tag you can refer to existing blocks. If you already have a larger block and you want to display elements in it from several layout files, then you need to implement a reference tag. Here is an example:

 <reference name=”right”>
<block type=”core/text” name=”right.text”>Bal oldalt megjelenő szöveg</block>
</reference>

 

We gave a new block, named right.text, to the block called “right”.

This is a very useful method when you would like to modify an existing page in your own extension. We can also remove an already added block. Here is an example:

 <reference name=”right”>
<remove name=”right.text” />
</reference>

 

We removed the “right.text” block, created in the above example, with the remove tag.

If we don’t know the name of the given block or which template manages displaying, then it is very useful to switch on “template path hint”. You can do this by setting the System -> Configuration -> Developer -> Template Path Hints option to YES. Please note that this setting cannot be set “globally”, it can only be set in website view. If you want to see the classes of the blocks, then in the same menu set the Add Block Names to Hints option to YES. If your website is live, be careful because your visitors may be taken aback seeing your page like this:

 

magento layout Template Path Hints

 

 

You can see the template path on the left and the block’s name on the right.

It is also possible to have the template path hints shown only to you. In this case you insert your computer’s IP address in the Allowed IPs field in the System -> Configuration -> Developer menu.

 

Management of CSS and JavaScript files from layout

Many times it is needed to implement external resources (CSS and JavaScript) on your page. This can be easily done from layout XML with the following tag:

 <block type=”page/html_head” name=”head” as=”head”>
<action method=”addJs”><script>prototype/prototype.js</script></action>
</block>

<block type=”page/html_head” name=”head” as=”head”>
<action method=”addCss”><stylesheet>css/widgets.css</stylesheet></action>
</block>

 

In the first example we insert prototype.js from the js directory, in the second example we insert the widgets.css file from the skin directory.

 

 

Using layout update

You can add a new handle to an existing one with the update XML tag. Let’s suppose we’d like to add a hello layout handle to the content block of the cms_index_index layout handle. This can be done the following way:

 

<cms_index_index>
<update handle=”hello” />
</cms_index_index>

 

Here, all modifications of <hello> handle can be valid for the main page (<cms_index_index> handle). This comes in handy if you want to display a contact form on several pages, since you don’t have to insert the block definition of every contact form on each of the pages. It is enough to insert it in a new handle and load that handle on the specific pages with the update command (tag).

 

Typically, in case of new design themes, developers do not refer to existing layout files in the local.xml, but copy and paste them, as they are, to their design theme directory. This “improper” method is not recommended at all, because if an update is issued which would affect the layout files as well, this update will fail, as the files will not be overwritten in the new design template.

I admit that the solution I recommend is a little more complex and may not be applicable to every case in this field, but it still is more advanced, especially in the long term.

 

SUMMARYAs we could see from the examples, layout XML is an essential part of Magento. That is why it is important to know it thoroughly. I hope this short guide will be useful for many Magento developers. Should you have any questions, we will be happy to give you an answer.

 

 

48 replies
  1. Keneth Ennis says:

    Very good blog! Do you have any tips and hints for aspiring writers? I’m hoping to start my own blog soon but I’m a little lost on everything. Would you propose starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m totally overwhelmed .. Any suggestions? Cheers!

  2. Drug Rehab Hospital says:

    Substance Abuse Treatment And Family Therapy http://aaa-rehab.com Alcohol Rehab Near Me http://aaa-rehab.com Substance Abuse Professional
    http://aaa-rehab.com

  3. Overreaction says:

    Hi, Neat post. There is an issue together with your web site in web explorer, might test this… IE nonetheless is the market leader and a huge element of other people will omit your great writing due to this problem.

  4. technical analysis of stock trends says:

    Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a bit, but other than that, this is excellent blog. A great read. I will definitely be back.

  5. next stock market crash prediction says:

    I do agree with all the ideas you have introduced to your post. They’re really convincing and can definitely work. Nonetheless, the posts are too brief for newbies. Could you please prolong them a bit from next time? Thanks for the post.

  6. erjilo pterin says:

    hello!,I really like your writing so a lot! percentage we keep in touch more about your article on AOL? I need a specialist in this space to solve my problem. Maybe that is you! Having a look forward to look you.

  7. dominoqq online says:

    Thank you for every other fantastic post. Where else may just anyone get that type of information in such an ideal method of writing? I’ve a presentation next week, and I’m at the look for such info.

  8. madeireira madecasa says:

    You can definitely see your enthusiasm within the work you write. The world hopes for even more passionate writers such as you who aren’t afraid to say how they believe. At all times follow your heart.

  9. Free Social Media Audit Tool says:

    Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across. It extremely helps make reading your blog significantly easier.

  10. Free TikTok says:

    I truly wanted to compose a quick word to be able to appreciate you for those marvelous ways you are writing on this site. My extensive internet investigation has at the end been rewarded with brilliant facts to exchange with my company. I would believe that we website visitors are extremely lucky to exist in a really good website with so many awesome professionals with beneficial principles. I feel really blessed to have come across your entire website page and look forward to plenty of more enjoyable times reading here. Thanks a lot again for everything.

  11. sanchore map says:

    Can I just say what a relief to find someone who actually knows what theyre talking about on the internet. You definitely know how to bring an issue to light and make it important. More people need to read this and understand this side of the story. I cant believe youre not more popular because you definitely have the gift.

  12. homepage says:

    Hey very cool site!! Man .. Beautiful .. Amazing .. I will bookmark your site and take the feeds also…I am happy to find numerous useful info here in the post, we need work out more strategies in this regard, thanks for sharing. . . . . .

  13. imobiliaria says:

    Howdy very nice site!! Guy .. Beautiful .. Amazing .. I’ll bookmark your website and take the feeds additionallyKI am satisfied to search out a lot of helpful information right here in the publish, we need work out more strategies on this regard, thank you for sharing. . . . . .

  14. comprar seguidores instagram says:

    Excellent beat ! I would like to apprentice at the same time as you amend your web site, how could i subscribe for a weblog web site? The account helped me a applicable deal. I were a little bit familiar of this your broadcast provided shiny transparent concept

  15. Wadham College of Science says:

    The next time I read a blog, I hope that it doesnt disappoint me as much as this one. I mean, I know it was my choice to read, but I actually thought youd have something interesting to say. All I hear is a bunch of whining about something that you could fix if you werent too busy looking for attention.

  16. thai restaurant take out near me says:

    Excellent post. I was checking continuously this blog and I am impressed! Extremely helpful info particularly the last part :) I care for such information a lot. I was seeking this particular information for a very long time. Thank you and good luck.

  17. Joker123 Online says:

    I was just seeking this info for some time. After six hours of continuous Googleing, finally I got it in your web site. I wonder what is the lack of Google strategy that do not rank this type of informative web sites in top of the list. Normally the top websites are full of garbage.

  18. Joker123 says:

    It’s truly a nice and helpful piece of info. I’m happy that you simply shared this helpful info with us. Please keep us informed like this. Thanks for sharing.

  19. this link says:

    Fantastic website. Plenty of helpful information here. I¦m sending it to some buddies ans additionally sharing in delicious. And obviously, thank you for your sweat!

  20. Carlos Neider says:

    I just want to mention I am just new to weblog and honestly savored your web-site. Almost certainly I’m want to bookmark your blog . You absolutely come with outstanding articles and reviews. Bless you for sharing with us your website.

  21. job advertising site says:

    I’ve recently started a blog, the info you offer on this site has helped me greatly. Thanks for all of your time & work. “Patriotism is often an arbitrary veneration of real estate above principles.” by George Jean Nathan.

  22. papel de parede vinilico says:

    I’ve been exploring for a little bit for any high-quality articles or blog posts on this kind of area . Exploring in Yahoo I at last stumbled upon this website. Reading this info So i’m happy to convey that I have an incredibly good uncanny feeling I discovered just what I needed. I most certainly will make sure to do not forget this website and give it a glance regularly.

  23. Games podcasts says:

    Do you have a spam problem on this site; I also am a blogger, and I was curious about your situation; we have created some nice procedures and we are looking to trade techniques with others, why not shoot me an e-mail if interested.

  24. Industry Watch News says:

    With havin so much content and articles do you ever run into any problems of plagorism or copyright infringement? My blog has a lot of exclusive content I’ve either created myself or outsourced but it seems a lot of it is popping it up all over the internet without my permission. Do you know any ways to help prevent content from being stolen? I’d really appreciate it.

Trackbacks & Pingbacks

  1. extra strength acetaminophen

    The basic guide to Magento layout development – aionhills.com

  2. naltrexone order

    The basic guide to Magento layout development – aionhills.com

  3. albuterol inhaler

    The basic guide to Magento layout development – aionhills.com

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.