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.

Magento_eBayInc_horiz_sm_rgb

1) Add or Remove Javascript or Stylesheets in the “Head” Reference

While Magento has the actions addJs and addCss to add files, using addItem and removeItem allows you to add and remove items with the same action, including adding and removing files outside of the skin/* directory, such as javascript files in the root js folder.

For example:

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>

</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

Conditionally adding a class to a page body can be a powerful, simple way to hook in CSS styles or javascript actions. By adding the snippet below to a CMS page or local.xml you can scope combined stylesheets and javascripts to affect only the pages you want.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments