Move checkout cart sidebar to header

Sometimes, you want to view cart information quickly in all pages, and moving cart sidebar to header is the best solution. By this way, you can allow customers to see their cart information directly in order. They can see what products and number of products they have in shopping cart.

In this article, I will talk about steps which you can take to move cart sidebar to header.

Step 1: Find layout file checkout.xml(app/design/frontend/your_package/your_theme/layout/checkout.xml). Then, use the following code:

<block type="checkout/cart_sidebar" template="checkout/cart/sidebar.phtml"/>

Step 2: Next step, in layout file page.xml(app/design/frontend/your_package/your_theme/layout/page.xml)

Find the code given below:

<block type="page/html_header" as="header">

and paste the cart sidebar block shown below:

<block name="header" as="header">

<block name="top.links" as="topLinks"/>

<block name="store_language" as="store_language" template="page/switch/languages.phtml"/>

<block name="" as="topMenu"/>

<!--Add cart sidebar block -->

<block name="cart_sidebar" as="headerCart" template="checkout/cart/sidebar.phtml"/>


You should pay attention to the element "as" which you will use in step 3.

Step 3: And now, in template file header.phtml(app/design/frontend/your_package/your_theme/template/page/html/header.phtml), call cart sidebar block as a child in header

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

You can improve display this by integarting it with some javascript library. But I think this is a good tutorial for you to start.