We help IT Professionals succeed at work.

Magento: move minicart to header

3,209 Views
Last Modified: 2012-02-17
Experts,

I am trying to move the minicart from the right side bar to the header. The steps i have taken so far are:

1). Add this to checkout.xml
        <reference name="header">
            <block type="checkout/cart_header" name="cart_header" template="checkout/cart/header.phtml">
            </block>
        </reference>

Open in new window


2. Add this to header.phtml
<?php echo $this->getChildHtml('cart_header') ?>

Open in new window


3. Duplicated and renamed the file mytemplate/templates/checkout/cart/sidebar.phtml to be called header.phtml.

This doesnt appear to work (however if i use the default cart_sidebar throughout steps 1 and 2 it appears). Im unsure what i need to do to make this work. Should i be defining the block "cart_header" in page.xml?

Regards
Easynow
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
The better way to do this is to have all your layout changes in one xml file - local.xml, instead of editing the theme files directly.

Create a local.xml file within your themes layout folder with the following content.

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
     <reference name="right">
          <action method="unsetChild"><name>cart_sidebar</name></action>
     </reference>

     <reference name="header">
          <action method="insert"><block>cart_sidebar</block></action>
     </reference>
    </default>
</layout>

Open in new window


Now edit your header.phtml template file and add the following:
<?php echo $this->getChildHtml('cart_sidebar'); ?>

Open in new window


That will move the cart_sidebar to the header.


If you insist on doing it your way, a couple of points about your code. The is no block type of checkout/cart_header - it is still checkout/cart_sidebar, so :

<reference name="header">
     <block type="checkout/cart_sidebar" name="cart_header" template="checkout/cart/header.phtml">
     </block>
</reference>

Open in new window


You have done nothing in your code to remove the original sidebar, so you will need to comment out the lines that created the original cart_sidebar block, otherwise you'll end up with it showing in the sidebar and the header.
CERTIFIED EXPERT

Author

Commented:
Hey Chris,

Thanks for the solution, i seem to remember your being the only expert that answers my magento questions :)

The local.xml approach is new to me, but seems very agreeable... it was a major headache gogin through all those files commenting and uncommenting... i spent half the time making notes on what i was changing. Atleast this way all the changes are listed together.

One quick question, in the past to move the category navigation from top.menu to left i used the following code:
<!--
        <reference name="top.menu">
            <block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/>
        </reference>
-->
        <reference name="left">
            <block type="catalog/navigation" name="catalog.topnav" after="currency" template="catalog/navigation/left.phtml"/>
        </reference>

Open in new window


I can see how i would move this block using the method you mentioned above. But how would I redefine the template path? I prefer to have meaningful template names, therefore would want to update this as i go.

Cheers
Easynow
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Author

Commented:
Excellent thanks. Just starting a new magento project so no doubt you will see a few more questions from me.

Easynow
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.