Rather than reiterate the Magento Front End best practices, I wanted to share five useful Layout XML code snippets. These snippets are especially useful when starting a new theme or efficiently making changes to an existing theme.
Add a Root JS File (/js)
<action method="addItem"> <type>js</type><name>plugins/file.js</name> </action>
Below is a list of css and js files we remove from pretty much every site we build:
Commonly Removed Files
<action method="removeItem"> <type>skin_css</type><name>css/widgets.css</name> </action> <action method="removeItem"> <type>skin_css</type><name>css/styles-ie.css</name> </action> <action method="removeItem"> <type>js</type><name>lib/ds-sleight.js</name> </action> <action method="removeItem"> <type>skin_js</type><name>js/slider.js</name> </action>
2) Remove Commonly Unwanted Items
When building a site, there are many items we typically remove, but it’s not always easy to know how to remove them. Below are examples of how to remove some of the most common areas.
Remove Newsletter from Footer
<reference name="footer"> <remove name="footer.newsletter" /> </reference>
Remove Old Version of jQuery Brought in by jqzoom
<catalog_product_view> <reference name="head"> <action method="removeItem"> <type>skin_js</type><name>js/jqzoom/jquery-1.3.1.min.js</name> </action> </reference> </catalog_product_view>
Remove Callouts from the Right Column
<reference name="right"> <remove name="catalog.compare.sidebar" /> <remove name="right.reports.product.viewed" /> <remove name="sale.reorder.sidebar" /> <remove name="right.poll" /> <reference name="right"> <action method="unsetChild"><name>right.permanent.callout</name></action> </reference> </reference>
3) Add a Class to Page Body
Add a Class to the Body
<reference name="root"> <action method="addBodyClass"><className>class</className></action> </reference>
4) Remove the WYSIWYG Wrapper
CMS editor content is typical wrapped in a container with the “std” class. Sometime you have editor content that you don’t want to inherit. Using the code below, you can remove the wrapper and its class, keeping your content from inheriting unwanted styles.
Unwrap CMS Editor Content
<reference name="content"> <action method="unsetChild"> <alias>cms.wrapper</alias> </action> <block type="cms/page" name="cms_page"/> </reference>
5) Provide Specific Layouts for Users Based on Login Status
If your site requires a login, or if you want special styles based on the user’s logged-in status, you can use the handles below to conditionally set or unset templates, styles or scripts. Just be aware that these handles override page specific XML, so if you set something when logged out, then unset it on a specific page, the item will still be set when the customer is logged out.
Layout XML Based on User’s Logged In State
<customer_logged_out> <!--code here--> <customer_logged_out> <customer_logged_in> <!--code here--> <customer_logged_in>
These are just a few of my favorite Magento Layout snippets. Want more? You can find a longer list here.