Magento Commerce - Move Cart to Header - Magento Design and Development

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

Posted on 29. Aug, 2008 by Fido in Design, Magento

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

Tags: cart, Magento, magento customization, sidebar

15 Comments

admin

29. Aug, 2008

My apologies for the cut off code in this theme. I might need to lower the text size or expand the layout in the near future. (The format of the code isn’t that great…)

Wil

11. Nov, 2008

I’m just starting with Magento and I’ve spent the whole morning trying to wrangle the swine into submission – it’s a horrible learning curve.

It would seem that it’s not altogether easy or even supported (properly) to move blocks around in Magento? This example was really useful to show just how to move or propogate areas with exisiting content, but now that my cart resides in the header rather than the sidebar the names are all wrong and the semantics go out the window.

Is there something I’m missing? Could I not just have an XML file to say, this page has these blocks in it and here are the relative paths to said blocks. Or… do I have to know that certain areas are always referenced in specific XML docs (cart etc. is always in Checkout.)

Appreciate the help, I’ll no doubt be spending some time on your site – so expect your ‘average time on site’ statistic to rocket!

Fido

11. Nov, 2008

Magento carries a very steep learning curve as you pointed out. Part of the learning curve is figuring out how to track down where the code / template is for what you are attempting to modify.

Using the template path hints (which you can turn on in the admin area) is an important “trick”.

Also note: You need to use < ?php echo $this->getChildHtml(’topcart’); ?> in the .phtml file because the cart_sidebar is a child HTML block to “page/html_header”

Brian

15. Nov, 2008

Okay, so I’m trying to figure out why this works to try and get a better grasp on what’s happening in Magento. I’m working with the “modern” theme, so I don’t know if my questions will be specific to this code. Since you mentioned there are many ways to do this in Magento, I don’t know if maybe some of these customizable, downloadable themes already contain hacks or workarounds that might be further confusing me in my research.

1) We copied a code block from checkout.xml that was within a tag. This tag is placing the cart in the right column. We didn’t remove this code, just copied it. Why did the cart cease to appear in the right column if the code still exists to place it there? If we were writing clean code, shouldn’t we have removed it or commented it out? Additionally, why wouldn’t we just modify the ‘name’ attribute to reference the header instead of the right column?

2) Why did we even paste this block into page.xml? There is no existing code in page.xml placing the cart in the right column, so why would we place code in page.xml to add it to the header block? This seems inconsistent, and will create headaches for future updates/modifications.

3) If in Magento we are supposed to be able to create tags to place code within other blocks, why would we still have to go into the phtml file to include a getChildHtml function? Or vice versa, I don’t understand the point of tags if we have getChildHtml functions. They both seem like ways to reference and include code. In the example here, we did both. Do we always need to do both then?

Fido

16. Dec, 2008

Hi Brian – Let me see if I can help you here

1) If you just copied the minicart code and did not remove it or comment it out, the block should still exist. I have no explanation as to why this happened without seeing your code.

2) The reason for adding this block into page.xml is so Magento knows that you want to add that minicart block into the header block that shows up on the page.

Now that I think about it, you might be able to add the block into checkout.xml, but you would need to re-create the parent header block within the checkout.xml and add the cart block as a child (just like is done in page.xml). This method is untested in my part, but I believe it will work. Assuming it does work, you are correct in saying that it will be more consistent and lead to less headaches in the future (depending on a developers level of knowledge, of course). Using template path hints will also save you a headache from this problem

3) The reason for having to use the getChildHtml function in this case (while you do not in other areas) is that the “cart_sidebar” block is a child of the “html_header” block. This is how the system works when using parent-child relationships with blocks in this manner.

I hope this explanation makes sense!

Anonymous

31. Dec, 2008

how to customize top links

scyllar

03. Jan, 2009

Great help here!
I also want to know how to customize the top menu links there. For example in the modern theme it is in the header area. But I think it would look nicer in the normal place – above the breadcrumbs.

µseless

13. Mar, 2009

actually, the right way would be the next one:

1) goto the checkout.xml and find the block name you want to copy: “cart_sidebar”
2) find the block name where you want to put the copy of the block “header”
3) say yo magento to do the cut and paste :
in the checkout.xml do the follow:

cart_sidebar

1
cart_sidebar_header

4) if the destine block have a template then you should include it in something like the following:

getChildHtml(’cart_sidebar_header’); ?>

5) if you want to remove the copy of the cart_sidebar from the “right” block do the following, else it will be displayed 2 cart_sidebar (if the layout is with right column):

cart_sidebar

END————————

didnt test, but should work fine

cleanest way i found

regards
µseless

µseless

13. Mar, 2009

sorry, it seem like i cant post xml language, what a shame !

shahriat

26. Mar, 2009

helpfull