php - In Magento 1.9 How to display mini-cart in top menu? -

i new magento 1.9. have custom theme. need display functional mini-cart in top menu. right not sure how achieve this?

i found step step guide problem. sharing link here future reference.

http://dltr.org/blog/magento/118/magento-add-sidebar-mini-cart-on-the-header

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" display shopping cart sidebar.

add below code inside on checkout.xml:

path: 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 actions</label>         </block>     </block> </reference> 

create new file cartheader.phtml under checkout/cart below , add below code in it:

path: 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 smooth slideup , 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 $_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 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 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 below , add following code:

path: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 item') ?>" onclick="return confirm('<?php echo $this->__('are sure remove item shopping cart?') ?>');" class="top-btn-remove">             <?php echo $this->__('remove item') ?>         </a>     </div> </li> 

open template page/html/header.phtml, , add following code @ bottom or suitable place

<?php echo $this->getchildhtml('cart_cartheader') ?> 

now need javascript slide mini cart , down (slide toggle). achieve toggle effect add following code on new javascript file named cf.js

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

/**  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 section add below line on page.xml after jquery inclusion.

path: 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 css tabs: need modify need , 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 { 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 { 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; } /*===*/