magentolayout.md

Magento Layout Snippets

Add JavaScript to page

First approach: page.xml - you can add something like

<action method="addJs"><script>path/to/my/file.js</script></action>

Second approach: Find page/html/head.phtml in your theme and add the code directly to page.html.

Third approach: If you look at the stock page.html mentioned above, you'll see this line

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

Normally, the getChildHtml method is used to render a specific child block. However, if called with no paramater, getChildHtml will automatically render all the child blocks. That means you can add something like

<!-- existing line --> <block type="page/html_head" name="head" as="head">
	<!-- new sub-block you're adding --> <block type="core/template" name="mytemplate" as="mytemplate" template="page/mytemplate.phtml"/>
	...

to page.xml, and then add the mytemplate.phtml file. Any block added to the head block will be automatically rendered. (this automatic rendering doesn't apply for all layout blocks, only for blocks where getChildHtml is called without paramaters).

Remove Left and Right blocks in category page

<catalog_category_default>
 <remove name="right"/>
 <remove name="left"/>
 </catalog_category_default>

Remove Left and Right Block from all page

<default>
 <remove name="right"/>
 <remove name="left"/>
 </default>

Add custom CSS and JS file to all pages

<default>
<reference name="head">
 <action method="addCss"><css>css/override.css</css></action>
 <action method="addItem">
 <type>skin_js</type>
 <name>js/jquery-1.7.2.min.js</name>
 </action>
</reference>
</default>

Add custom CSS and JS file to Home Page

<cms_index_index>
<reference name="head">
 <action method="addCss">
 <stylesheet>your path/your css file name</stylesheet>
 </action>
 <action method="addItem">
 <type>skin_js</type>
 <name>js/jquery-1.7.2.min.js</name>
</action>
</reference>
</cms_index_index>

Adding css and js

<reference name="head">
 <action name="addItem"><type>skin_css</type>
    <name>css/my_style.css</name>
</action>
 <action method="addItem"><type>skin_js</type>
    <name>js/jquery-1.7.2.min.js</name>
</action>
 </reference>

Adding a Top Link

<reference name="top.links">
<action method="addLink" translate="label title" module="customer">
 <label>My Link</label>
 <url helper="customer/getAccountUrl"/>
 <title>My Link</title><prepare/>
 <urlParams/><position>11</position></action>
</reference>

Adding a Footer Link

<reference name="footer_links">
<action method="addLink" translate="label title" module="catalog">
 <label>My Link</label><url helper="catalog/map/getCategoryUrl"/>
 <title>My Link</title><position>0</position>
</action>
</reference>

Using setTemplate(Custom Template)

<reference name="top.links">
 <action method="setTemplate">
    <template>page/template/mylinks.phtml</template>
</action>
 </reference>

Remove left newsletter

<remove name="left.newsletter" />

Remove left callout

<remove name="left.permanent.callout" />

Remove comapre sidebar

<remove name="catalog.compare.sidebar" />

Remove right banner

<remove name="right.permanent.callout" />

Remove left newsletter

<remove name="cart_sidebar" />

Remove right paypal logo

<remove name="paypal.partner.right.logo" />

Remove right poll

<remove name="right.poll" />

Add newsletter block to footer

<reference name="footer">
<block type="newsletter/subscribe" name="newsletter" as="newsletter_subscribe"
    template="newsletter/subscribe.phtml" before="-" />
</reference>
</default>

Unset Compare block

<customer_account_index>
<reference name="left">
<action method="unsetChild"><name>catalog.compare.sidebar</name></action>
</reference>
</customer_account_index>

Adding custom block to left /right /content/header and footer

<cms_index_index>
<remove name="right.poll" />
<reference name="left">
<block type="core/template" name="custom_index" template="custom/index.phtml"/>
</reference>
<reference name="content">
<block type="core/template" name="custom_index" template="custom/index.phtml"/>
</reference>
<reference name="header"> <!-- Call with getChildHtml() in header.phtml-->
<block type="core/template" name="custom_block"
  template="custom/customblock.phtml"/>
</reference>
<reference name="footer"> <!-- Call with getChildHtml() in footer.phtml-->
<block type="core/template" name="custom_block"
  template="custom/customblock.phtml"/>
</reference>
</cms_index_index>

Using layout

<helloworld_index_index translate="label">
<update handle="customer_logged_in" />
</helloworld_index_index>

Custom product list

<catalog_category_default translate="label">
<reference name='product_list'>
<action method='setTemplate'>
  <template>catalog/product/mylist.phtml</template>
</action>
</reference>
</catalog_category_default>