Magento Responsive Design: Handy Templates and XML Snippets

In Magento it is not always easy to know how to change, add or remove a content area correctly. Below are code snippets for how to make layout changes in XML and PHP. XML changes should be made in the local.xml file in the /skins/frontend/package/theme/layouts/ directory or, in the case of CMS pages, may be entered in the Design tab. Changes to templates should be made by copying system files to the /skins/frontend/package/theme/templates/ directory.

Address a Change to All Pages

			
				<layout>
					<default>
						<reference name="target">
							Code
						</reference>
					</default>
				</layout>
			
		

Add a New Reference Region

In XML

			
				<layout>
					<reference name="root">
			            <block type="core/text_list" name="code_name" translate="label">
			                <label>Friendly Name</label>
			            </block>
					</reference>
				</layout>
			
		

In PHP

			
				<?php echo $this->getChildHtml('code_name') ?>
			
		

Add or Remove Javascript or Stylesheets in the "Head" Reference

Remove a Skin CSS File

			
				<action method="removeItem">
					<type>skin_css</type><name>css/file.css</name>
				</action>
			
		

Remove a Skin JS File

			
				<action method="removeItem">
					<type>skin_js</type><name>js/file.js</name>
				</action>
			
		

Add a Skin CSS File

			
				<action method="addItem">
					<type>skin_css</type><name>css/file.css</name>
				</action>
			
		

Add a Skin JS File

			
				<action method="addItem">
					<type>skin_js</type><name>css/file.js</name>
				</action>
			
		

Add a Root JS File (/js)

			
				<action method="addItem">
					<type>js</type><name>plugins/file.js</name>
				</action>
			
		

Commonly Removed Files

			
				<type>skin_css</type><name>css/widgets.css</name>
				<type>skin_css</type><name>css/styles-ie.css</name>
				<type>js</type><name>lib/ds-sleight.js</name>
				<type>skin_js</type><name>js/slider.js</name>
			
		

Set a Page Layout

			
				<reference name="root">
					<action method="setTemplate"><template>page/template.phtml</template></action>
				</reference>
			
		

Remove Newsletter from Footer

			
				<reference name="footer">
					<remove name="footer.newsletter" />
		 		</reference>
		 	
		

Remove product Tags from Product Detail Page

			
				<catalog_product_view>
					<reference name="product.info.additional">
						<remove name="product_tag_list"/>
					</reference>
				</catalog_product_view>
		 	
		

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>
			
		

Add a Class to the Page Body

			
				<reference name="root">
					<action method="addBodyClass"><className>class</className></action>
				</reference>
			
		

Add a Static Block to a Template

With XML

			
				<block type="cms/block" name="my_block">
					<action method="setBlockId">
						<block_id>block_identifier</block_id>
					</action>
				</block>
			
		

Alternately with PHP, done in a .phtml file

			
				<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('block_identifier')->toHtml(); ?>
			
		

Remove the WYSIWYG Wrapper (the “std” class added around content)

			
				<reference name="content">
					<action method="unsetChild">
						<alias>cms.wrapper</alias>
					</action>
					<block type="cms/page" name="cms_page"/>
				</reference>
		 	
		

Provide Specific Layouts for Users Based on Login Status

			
				<customer_logged_out>
					<code here>
				<customer_logged_out>

				<customer_logged_in>
					<code here>
				<customer_logged_in>
		 	
		

Feed a Template Settings from CMS Content Area

In the CMS

			
				{{block title="text" img="path/file.ext" template="path/file.phtml" type="core/template"}}
		 	
		

And In file.phtml

			
				<?php
				$title = $this->getData('title');
				$img = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) .
				$this->getData('img');
				?>

				<h1><?php echo $title; ?></h1>
				<img src="<?php echo $img; ?>" alt="">
		 	
		

Set a Categories Grid to One Item Per Line

			
				<catalog_category_view>
					<reference name="product_grid">
			        	<action method="setColumnCount"><columns>1</columns></action>
					</reference>
				</catalog_category_view>
		 	
		

Add a Link to an XML Link List (like top.links)

			
				<action method="addLink" translate="label title">
					<label>Label</label>
					<url>url</url>
					<title>Title</title>
					<prepare/>
					<urlParams/>
					<position>10</position>
					<liParams>id="YourID"</liParams>
				</action>
		 	
		

You Can Use This Approach to Create Customized Account Links

			
				<customer_logged_in>
					<reference name="top.links">
						<action method="addLink" translate="label title" module="customer">
							<label>Log Out</label> <url helper="customer/getLogoutUrl"/> <title>Log Out</title> <prepare/> <urlParams/> <position>10</position> <liParams>id="logoutLink"</liParams>
						</action>
					</reference>
				</customer_logged_in>
			
		

			
				<customer_logged_out>
					<reference name="top.links">
						<action method="addLink" translate="label title" module="customer">
							<label>Register</label> <url helper="customer/getRegisterUrl"/> <title>Register</title> <prepare/> <urlParams/> <position>10</position> <liParams>id="RegisterLink"</liParams>
						</action>
						<action method="addLink" translate="label title" module="customer">
							<label>Login</label> <url helper="customer/getLoginUrl"/> <title>Login</title> <prepare/> <urlParams/> <position>20</position> <liParams>id="LoginLink"</liParams>
						</action>
						<action method="removeLinkByUrl">
							<url helper="customer/getAccountUrl" />
						</action>
					</reference>
				</customer_logged_out>
		 	
		

More information on working with Magento layouts is available on the Magento Ecommerce site at http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/0_-_theming_in_magento/designing-for-magento.