Moving Magento Sidebar-Cart to Header
I’ve seen this request on a lot of forums so it would seem to be a fairly common request. Modern eCommerce users typically look for some type of cart notification in the top-right corner. Rather than fight that training, most would seek to encourage it as it, 1) Makes usability that much better and 2) They don’t want to lose clientele just for ‘thinking outside of the box’ design-wise.
Let me caveat everything I’m about to say with a, “there’s someone out there that is doing this much better than I am” so do all this only if it seems correct to you. Alright, on with it
Magento 1.3.2.4 does not include any kind of config file that allows you to activate a header-cart. Given this, we have to create our own .phtmls and xmls to locate and utilize a header Magento cart. Just like the previous post regarding moving Magento search around, we’re going to let Magento do the easy stuff for us then just redirect to the correct placement. Using developer-tips, one can see that the default right-sidebar cart is found in checkout/cart/sidebar.phtml. Taking this code and moving it to a new .phtml will be all we need regarding the html and calls within the front-end; in my case, I named the new file, ‘cart_header’ but whatever works for you.
We now need to determine where that call to sidebar.phtml is coming from. The usual suspects are the xml files, catalog.xml and page.xml but neither have reference to the template in question. The template reference is actually found in checkout.xml, which does make sense but c’mon Varien, at least create a map of this place. Looking through that xml you’ll find the <reference name=”right”> and the template call for the sidebar-cart. Read through the action-methods and various cart indices and make note of how the relationships are created and the templates they move to once connected.
Make sense? Not to me either really so you can go on and close it. We don’t need this file; that was purely for my enjoyment of knowing you read it for a few minutes. You could go ahead and create a new block from within here, just like we did in the last post, but for me, I like knowing that everything is in one place so that I can edit it without opening various files.
Hopefully you still have page.xml open. Perusing through this, go ahead and peruse, you’ll see a section marked
<block type="page/html/header">
This is where we will put the new call for the cart_header.phtml. We’ll add the following block within the previous “header” block:
<block type="checkout/cart_sidebar" name="cart_header" as="cartHeader" template="checkout/cart/cart_header.phtml"/>
We’re still using the block type for the cart_sidebar but we’re changing out the template and the name. Once these have been set you’ll want to open your header.phtml and insert the following code wherever you would like the cart to appear:
<?php echo $this->getChildHtml('cartHeader') ?>
You’ll notice that we’re using the ‘as=”cartHeader” ‘ to function as the name by which the block is called. The fun part is yet ahead for you. You’ll have a cart in the header, but there’s the whole matter of making it look correct within the structure of the site. Perhaps another article to come that will feature a layout for the cart_header….
