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.

 

 

107 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.

  25. Delsie Uk says:

    I like what you guys are up too. Such intelligent work and reporting! Carry on the excellent works guys I?¦ve incorporated you guys to my blogroll. I think it will improve the value of my web site :)

  26. sbo says:

    hello!,I like your writing very much! share we communicate more about your post on AOL? I require a specialist on this area to solve my problem. May be that’s you! Looking forward to see you.

  27. Link here says:

    I would like to thnkx for the efforts you’ve put in writing this website. I’m hoping the same high-grade website post from you in the upcoming also. Actually your creative writing skills has inspired me to get my own blog now. Actually the blogging is spreading its wings quickly. Your write up is a good example of it.

  28. my latest blog post says:

    Hello! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me. Anyways, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

  29. EPMS Malaysia says:

    Wow that was unusual. I just wrote an incredibly long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say great blog!

  30. rent a lamborghini says:

    I think this web site has got some rattling great information for everyone. “Dealing with network executives is like being nibbled to death by ducks.” by Eric Sevareid.

  31. Aterro says:

    Hey very nice website!! Guy .. Excellent .. Amazing .. I’ll bookmark your site and take the feeds alsoKI am glad to find numerous helpful info right here within the submit, we want develop more techniques in this regard, thank you for sharing. . . . . .

  32. Slot Joker123 online says:

    This web site is known as a walk-by way of for all of the information you wanted about this and didn’t know who to ask. Glimpse here, and you’ll undoubtedly discover it.

  33. prediksi sgp says:

    Hello! Would you mind if I share your blog with my zynga group? There’s a lot of people that I think would really enjoy your content. Please let me know. Cheers

  34. website to mobile says:

    Hi, Neat post. There is a problem with your website in internet explorer, would test this… IE still is the market leader and a big portion of people will miss your excellent writing because of this problem.

  35. solar panel in malaysia says:

    Hi! This is my first comment here so I just wanted to give a quick shout out and tell you I really enjoy reading through your articles. Can you recommend any other blogs/websites/forums that cover the same topics? Thank you so much!

  36. SMS says:

    I love looking through a post that can make people think. Also, many thanks for permitting me to comment!

  37. magazine luiza says:

    Im no longer positive where you’re getting your information, however good topic. I must spend a while studying more or working out more. Thank you for wonderful info I used to be looking for this info for my mission.

  38. curso grátis de auxiliar de biblioteca says:

    Excellent goods from you, man. I’ve understand your stuff previous to and you’re just extremely great. I actually like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I can not wait to read much more from you. This is actually a terrific website.

  39. YAMAHA TRABALHE CONOSCO, says:

    Somebody essentially help to make seriously posts I would state. This is the first time I frequented your web page and thus far? I amazed with the research you made to make this particular publish amazing. Excellent job!

  40. impressão 3d em São Paulo says:

    Hi there! This post couldn’t be written any better! Reading through this post reminds me of my previous room mate! He always kept talking about this. I will forward this article to him. Pretty sure he will have a good read. Thank you for sharing!

  41. Fifth third Bank Stock Price today says:

    Good day I am so delighted I found your web site, I really found you by accident, while I was searching on Askjeeve for something else, Nonetheless I am here now and would just like to say cheers for a tremendous post and a all round interesting blog (I also love the theme/design), I don’t have time to read through it all at the moment but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the excellent job.

  42. uranium price chart says:

    Hi, i think that i noticed you visited my blog so i got here to “go back the prefer”.I’m attempting to find things to enhance my website!I guess its good enough to use some of your ideas!!

  43. go to my site says:

    Definitely imagine that that you said. Your favourite justification appeared to be on the internet the easiest thing to take note of. I say to you, I definitely get annoyed whilst other people think about concerns that they just do not realize about. You controlled to hit the nail upon the highest and outlined out the entire thing with no need side effect , other people could take a signal. Will probably be again to get more. Thanks

  44. baixar vs says:

    Unquestionably consider that that you said. Your favourite justification appeared to be on the net the easiest thing to take into account of. I say to you, I certainly get irked whilst other folks think about worries that they just do not understand about. You controlled to hit the nail upon the highest and defined out the entire thing without having side-effects , folks can take a signal. Will probably be again to get more. Thanks

  45. eora beach says:

    I have been absent for a while, but now I remember why I used to love this website. Thanks, I?¦ll try and check back more frequently. How frequently you update your web site?

  46. vinho says:

    I truly appreciate this post. I¦ve been looking everywhere for this! Thank goodness I found it on Bing. You’ve made my day! Thx again

  47. Handy-Schutzfolien kaufen says:

    I discovered your blog site on google and check a few of your early posts. Continue to keep up the very good operate. I just additional up your RSS feed to my MSN News Reader. Seeking forward to reading more from you later on!…

  48. imiwin says:

    Thanks , I’ve just been searching for info about this subject for ages and yours is the best I’ve discovered so far. But, what about the conclusion? Are you sure about the source?

  49. check it out says:

    Thanks for another informative website. Where else could I get that kind of info written in such an ideal way? I have a project that I’m just now working on, and I’ve been on the look out for such info.

  50. Curso de Instagram says:

    This is really interesting, You are a very skilled blogger. I have joined your feed and look forward to seeking more of your magnificent post. Also, I’ve shared your website in my social networks!

  51. Online Shop says:

    I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an nervousness over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly very often inside case you shield this hike.

  52. papelaria says:

    You are my intake, I have few blogs and occasionally run out from post :). “Yet do I fear thy nature It is too full o’ the milk of human kindness.” by William Shakespeare.

  53. armario de aço de escritorio colorido says:

    An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!

  54. super cha says:

    I have recently started a web site, the information you provide on this website has helped me tremendously. Thanks for all of your time & work.

  55. buy gmail accounts says:

    It?¦s really a great and useful piece of information. I am happy that you simply shared this useful info with us. Please stay us informed like this. Thank you for sharing.

Trackbacks & Pingbacks

  1. viagra 100mg 100 tabs $100

    The basic guide to Magento layout development – aionhill.com

  2. buy cialis generic online usa pharmacy

    The basic guide to Magento layout development – aionhill.com

  3. bimatoprost for eyelash growth

    The basic guide to Magento layout development – aionhill.com

  4. men over 50 viagra heart condition

    The basic guide to Magento layout development – aionhill.com

  5. extra strength acetaminophen

    The basic guide to Magento layout development – aionhill.com

  6. naltrexone order

    The basic guide to Magento layout development – aionhill.com

  7. albuterol inhaler

    The basic guide to Magento layout development – aionhill.com

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.