Monday 2 January 2012

Move mini-cart in the sidebar to the header (or anywhere) in Magento

How to move the cart sidebar into the header area. You can use this technique to move it anywhere. This is not the only way to do this, but it is a useful one.

1) Copy the the block for the cart side bar:

//design/frontend/default/default/layout/checkout.xml
<block type="checkout/cart_sidebar" name="cart_sidebar"
template="checkout/cart/sidebar.phtml"/>

//there is also this full code in my version 1.1.3
<block type="checkout/cart_sidebar" name="cart_sidebar" 
template="checkout/cart/sidebar.phtml" before="-">
<action method="addItemRender"><type>simple</type>
<block>checkout/cart_item_renderer</block><template>
checkout/cart/sidebar/default.phtml</template></action>
<action method="addItemRender"><type>grouped</type>
<block>checkout/cart_item_renderer_grouped</block>
<template>checkout/cart/sidebar/default.phtml</template></action>
<action method="addItemRender"><type>configurable</type>
<block>checkout/cart_item_renderer_configurable</block>
<template>checkout/cart/sidebar/default.phtml</template></action>
</block>

2) Open up app\design\frontend\default\default\layout\page.xml
(assuming you are using the default design or didn’t create a new page.xml file in your own templates)
Find the code :

<block type="page/html_header" name="header" as="header"> //near line 58 
 
Within that block, you will see other sub-blocks.

Paste your new block in there. Add the “as” attribute and set it to
“topcart”final result: 

<block type="page/html_header" name="header" as="header">
<block type="page/template_links" name="top.links" as="topLinks"/>
<block type="page/switch" name="store_language" as="store_language" 
template="page/switch/languages.phtml"/>
<block type="core/text_list" name="top.menu" as="topMenu"/>
<!--new block -->
<block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" 
template="checkout/cart/sidebar.phtml"/>
</block> 
 
 3) Finally, go into app\design\frontend\default\default\template\page\html\
header.phtml 
(again, assuming your using default theme) and add the code:
 
//place this where ever you want the cart to show up.
<?php echo $this->getChildHtml('topcart'); ?> 
  
Quick update:
Removing the cart in a CMS page would also be handy to know:
In the Update Layout XML area, use:

You might have to wrap this in <reference name=”right”>
(name changing dependent on your design)
 
<action method="unsetChild"><name>cart_sidebar</name></action> 
 
 That’s it! 
 
 
 
 

No comments:

Post a Comment