Magento - add sidebar mini cart on the header

Do you want to move magento's sidebar mini cart to header? If you said "yes' then follow the following post. We are just using exisitng sidebar mini cart and modified to display on the top header. We have removed some of the Magento's code from the cart which we didn't need in our case, if you need it you can re-include from sidebar's phtml file that comes with magento e-commerce's base template.

Add below code inside <default> on checkout.xml:

app\design\frontend\your-package\your-template\layout\checkout.xml

<reference name="header">
	<block type="checkout/cart_sidebar" name="cart_cartheader" template="checkout/cart/cartheader.phtml" before="-">
    	<action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/cartheader/default.phtml</template></action>
        <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/cartheader/default.phtml</template></action>
        <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/cartheader/default.phtml</template></action>

        <block type="core/text_list" name="cart_cartheader.extra_actions" as="extra_actions" translate="label" module="checkout">
        	<label>Shopping Cart Cartheader Extra Actions</label>
    	</block>
	</block>
</reference>

Create new file cartheader.phtml under checkout/cart as below and add the below code in it:

app\design\frontend\your-package\your-template\template\checkout\cart\cartheader.phtml

<div class="mini-cart-layer">
	<?php if ($this->getIsNeedToDisplaySideBar()):?>
		<div class="top-cart">
			<?php $_cartQty = $this->getSummaryCount() ?>
			<?php if ($_cartQty > 0): ?>
				<?php $_myCart = $this->__('Shopping Cart (%s items)', $_cartQty) ?>
			<?php else: ?>
				<?php $_myCart = $this->__('Shopping Cart (0 item)') ?>
			<?php endif ?>
			
			<?php if ($this->getIsLinkMode() || !$this->getIsNeedToDisplaySideBar()):?>
				<div class="block-title no-items">
					<ul class="links cart-link">
						<li ><a href="<?php echo $this->getUrl('checkout/cart'); ?>" rel="nofollow"><?php echo $_myCart ?></a></li>
					</ul>
				</div>
			<?php else:?>
				<div class="block-title<?php if(!$_cartQty) { echo (' no-items'); } ?>">
					<span id="cartHeader"><?php echo $_myCart ?></span>
				</div>
				<div id="topCartContent" class="block-content" style="display:none">
					<div class="inner-wrapper"><?php /*extra div to smooth slideUp and slideDown*/ ?>
						<?php $_items = $this->getRecentItems() ?>
						<?php if(count($_items)): ?>
							<p class="block-subtitle">
								<span onclick="toggleTopCart();" class="close-btn"><?php echo $this->__('Close'); ?></span>
								<?php echo $this->__('Recently added item(s)') ?>
							</p>
							<ol id="mini-cart" class="mini-products-list">
								<?php foreach($_items as $_item): ?>
									<?php echo $this->getItemHtml($_item) ?>
								<?php endforeach; ?>
							</ol>
							<script type="text/javascript">decorateList('mini-cart', 'none-recursive')</script>
						<?php else: ?>
							<p class="block-subtitle">
								<span onclick="toggleTopCart()" class="close-btn"><?php echo $this->__('Close'); ?></span>
									<?php echo $this->__('Recently added item(s)') ?>
							</p>
							<p class="cart-empty">
								<?php echo $this->__('You have no items in your shopping cart.') ?>
							</p>
						<?php endif ?>
						<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
							<div class="actions">
								<a href="<?php echo $this->getUrl('checkout/cart'); ?>" rel="nofollow"><?php echo $this->__('Go to Shopping Cart') ?></a>
								<button class="button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')"><span><span><?php echo $this->__('Checkout') ?></span></span></button>
							</div>
						<?php endif ?>
					</div>
				</div>
			<?php endif;?>
		</div>
	<?php endif;?>
</div>

Now create new file default.phtml under checkout/cart/cartheader as below and add the following code:

app\design\frontend\your-package\your-template\template\checkout\cart\cartheader\default.phtml

<?php
$_item = $this->getItem();
$isVisibleProduct = $_item->getProduct()->isVisibleInSiteVisibility();
//$canApplyMsrp = Mage::helper('catalog')->canApplyMsrp($_item->getProduct(), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type::TYPE_BEFORE_ORDER_CONFIRM);
?>
<li class="item">
	<?php if ($this->hasProductUrl()): ?>
		<a href="<?php echo $this->getProductUrl()?>" title="<?php echo $this->htmlEscape($this->getProductName()) ?>" class="product-image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" width="50" height="50" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /></a>
	<?php else: ?>
		<span class="product-image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" width="50" height="50" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /></span>
	<?php endif; ?>
	<div class="product-details">
		<p class="product-name">
			<?php if ($this->hasProductUrl()): ?>
				<a href="<?php echo $this->getProductUrl() ?>">
			<?php endif; ?>
				<?php echo $this->htmlEscape($this->getProductName()) ?>
			<?php if ($this->hasProductUrl()): ?>
				</a>
			<?php endif; ?>
		</p>
		<a href="<?php echo $this->getDeleteUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>" onclick="return confirm('<?php echo $this->__('Are you sure you would like to remove this item from the shopping cart?') ?>');" class="top-btn-remove">
			<?php echo $this->__('Remove This Item') ?>
		</a>
	</div>
</li>

//on the page/html/header.phtml, add below
<?php echo $this->getChildHtml('cart_cartheader') ?>

Now we need Javascript to slide mini cart up and down (slide toggle). To achieve that toggle effect add the following code on new javascript file named cf.js

skin\frontend\your-package\your-template\js\cf.js

/**
 * Author: damodar.bashyal
 * Date: 5/10/11
 * Time: 12:26 PM
 */
function slideUp()
{
	jQuery('#topCartContent:visible').slideUp(1000);
	jQuery('.mini-cart-layer').addClass('mini-cart-layer-up');
	jQuery('.mini-cart-layer').removeClass('mini-cart-layer-down');
}

function slideDown()
{
	jQuery('#topCartContent:hidden').slideDown(1000);
	/*startTimer()*/ /* optional*/
	jQuery('.mini-cart-layer').addClass('mini-cart-layer-down');
	jQuery('.mini-cart-layer').removeClass('mini-cart-layer-up');
}

function toggleTopCart()
{
	if(jQuery('#topCartContent').is(':visible'))
	{
		slideUp();
	} else {
		slideDown();
	}
}

var timer;
function startTimer()
{
	timer = setTimeout(function(){
		slideUp();
	}, 5000);
}

jQuery(document).ready(function(){
	jQuery('.mini-cart-layer .top-cart .block-title #cartHeader').click(function(){
		toggleTopCart();
	});

	jQuery('.mini-cart-layer .top-cart .block-title #cartHeader').mouseover(function(){
		clearTimeout(timer);
	}).mouseout(function(){
		startTimer();
	});

	jQuery("#topCartContent").mouseover(function() {
		clearTimeout(timer);
	}).mouseout(function(){
		startTimer();
	});
});

To include above file on the <head></head> section add the below line on page.xml after jquery inclusion.

app\design\frontend\your-package\your-template\layout\page.xml

<action method="addItem"><type>skin_js</type><name>js/jquery.js</name><params/></action>
<action method="addItem"><type>skin_js</type><name>js/cf.js</name><params/></action>

Now time for CSS for the tabs: You need to modify as your need and replace images.

/*---*/
.clear:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
div.mini-cart-layer {
    background: url("../images/view_shopping_cart.jpg") no-repeat scroll 0 0 transparent;
    height: 26px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 9px;
    width: 165px;
    z-index: 99;
}
.top-cart .top-btn-remove {
    background: url("../images/btn_remove.gif") no-repeat scroll 0 0 transparent;
    display: block;
    font-size: 11px;
    height: 15px;
    line-height: 11px;
    margin: 0 0 3px;
    overflow: hidden;
    padding: 0 0 0 15px;
}
div.mini-cart-layer-up{}
div.mini-cart-layer-down{background-position: 0 bottom;}
.mini-cart-layer span#cartHeader {
    display: block;
    height: 26px;
    overflow: hidden;
    text-align: left;
    text-indent: -99999px;
    width: 165px;
}
.top-cart {
    float: left;
    position: relative;
}
.top-cart .block-title {
    white-space: nowrap;
    cursor: pointer;
}
.top-cart .block-title.expanded {
    background-position: 0 3px !important;
}
.top-cart .block-title.expanded span {
    background-position: 100% -126px !important;
}
.top-cart .block-content {
    background: none repeat scroll 0 0 #FDFDFD;
    font-size: 11px;
    position: absolute;
    right: 0;
    text-align: left;
    top: 20px;
    width: 267px;
}
.top-cart .block-content ol {
    margin: 0;
    padding: 0;
    list-style: none outside none;
}
.top-cart .inner-wrapper {
    border: 4px solid #DB4C6A;
}
.top-cart .block-content .block-subtitle {
    background: #DB4C6A;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    line-height: 12px;
    padding: 3px 10px 4px;
}
.top-cart .block-content .block-subtitle .close-btn {
    float: right;
    width: 13px;
    height: 0;
    padding-top: 12px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    background: url(../images/btn_remove.gif) no-repeat 0 0;
    position: relative;
    z-index: 1;
}
.top-cart .cart-empty .close-btn {
    float: right;
    width: 13px;
    height: 0;
    padding-top: 12px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    background: url(../images/btn_remove.gif) no-repeat 0 0;
    position: relative;
    z-index: 1;
}
.top-cart .cart-empty {
    padding: 10px 10px 10px 20px;
    color: #666;
}
.top-cart .block-content .item {
    padding: 8px 5px 8px 11px;
    border-bottom: 1px solid #DDD;
    margin: 0 5px;
}
.top-cart .block-content .last {
    border-bottom: none;
}
.top-cart .block-content .item .product-name {
    font-size: 11px;
    height: 30px;
    line-height: 14px;
    margin: 0 0 5px;
    overflow: hidden;
}
.top-cart .block-content .item .product-name a {
    font-size: 11px;
    text-decoration: none;
    color: #444;
}
.top-cart .block-content table {
    margin: 5px 0 0 0;
}
.top-cart .block-content table th {
    padding: 1px 8px;
    color: #8f8f8f;
    text-align: right;
}
.top-cart .block-content table td {
    text-align: left;
    padding: 1px 0;
}
.top-cart .block-content .subtotal {
    padding: 2px 5px;
    text-align: center;
    color: #666;
}
.top-cart .actions {
    background-color: #DB4C6A;
    color: #FFFFFF;
    padding: 5px 11px;
    text-align: right;
    z-index: 999;
}
.top-cart .actions a {
    float: left;
    line-height: 23px;
}
.top-cart .actions button {
    float: none;
    color: #FFF;
    padding-top: 3px;
}
div.top-cart {
    float: none;
}
div.top-cart .block-title {
    color: #000000;
    display: block;
    float: none;
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
}
div.top-cart .block-content {
    top: 26px;
}
div.top-cart .block-content ol li {
    display: block;
    float: none;
}
/*===*/

Note: As this header mini-cart depends on sidebar mini cart, make sure it's active at:
magento admin / system / configuration / Sales / Checkout / Shopping Cart Sidebar
Select "YES" for Display Shopping Cart Sidebar.