Home Magento Customization, Magento Guide

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

10 September 2009 2 Comments

Hi all – Here is my solution to a question I’ve seen asked many times: 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 The exchange would benefit individuals and families without affordable-health.info as well as small businesses. 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!

By Fido from exploremagento.com

Related posts:

  1. Custom checkout cart – How to send email after successful checkout
  2. Moving / Removing Callouts on the left / right columns
  3. Adding and removing javascript / css when and where you need it
  4. Removing Product Comparison in Magento
  5. Editing the Footer in a stock magento build

2 Comments »

  • Darshana said:

    The 1st point says to copy. What need to do after copping. Where need to pasted the content copied from checkout.xml?