Saturday, January 29, 2011

Magento-Shopping Cart instant preview

One more Magento blog. Recently we got a requirement of instant preview of top 3 shopping cart items in Magento on mouse over of My cart link at top. See the image below.

To do this you have to edit this file /app/code/core/Mage/Checkout/Block/Links.php. There is a function in it public function addCartLink() . This is the function which generates the HTML of My Cart Link. So here you have to get all the cart items and arrange them in proper layout like above. Following is the code for it.

$cart = Mage::helper('checkout/cart')->getCart()->getItems();
//It gives you recent
$_items = Mage::helper('checkout/cart')->getCart()->getItems();
$obj = Mage::getModel('catalog/product');

Following line generates the necessary HTML layout for the cart items.

$miniShoppingCart ='
left:-87px;margin-top:20px;background-color:white;width:150px;-moz-box-shadow:0 0 8px #666666;-webkit-box-shadow: #666 0px 0px 8px;border:white;" onmouseover="show_product();" onmouseout="hide_product();" >';

Generating HTML layout for each item in the shopping cart.

foreach($_items as $_item)
$_product = $obj->load($_item->getProductId());
if($_product->getTypeId() !="simple")
$item_array[$i].='<div >';
$item_array[$i] .='<p style="width:80px;height:50px;text-align:right;margin-bottom:0px;"><a href='.$_product->getProductUrl().' style="text-decoration:none" >'.$_product->getName().'</a>';
$item_array[$i] .='<br/><a style="text-decoration:none" href='.$_product->getProductUrl().' > <span>£</span>'. round($_product->getPrice(),2).'<br />‾ ‾ ‾ ‾ ‾ </a></p>';
$item_array[$i] .='<a style="text-decoration:none" href='.$_product->getProductUrl().'><img height="50" width="50" style="float:right;margin-top:-45px;margin-right:8px; -webkit-box-shadow: #666 0px 0px 8px; -moz-box-shadow:0 0 8px #666666" src='.$_product->getSmallImageUrl().' /></a>';
$total_items =count($item_array);

Now requirements was to show only recemt three items so following is the code to add only three items.

$miniShoppingCart.="Your Shopping Bag is Empty";
$miniShoppingCart .='</div>';

if( $count == 1 ) {
$text = $this->__('Shopping Bag (%s item) £%s', $count,$subtotal);
} elseif( $count > 0 ) {
$text = $this->__('Shopping Bag (%s items) £%s', $count,$subtotal);
} else {
$text = $this->__('Shopping Bag');
$parentBlock->addLink($text.$miniShoppingCart, 'checkout/cart', $text, true, array(), 50, null, 'class="top-link-cart"');

So that was the code for generating HTML layout. Now add following code in Links.phtml file in app/design/frontend/base/default/template/page/template to show and hide the preview.

That's it and you will have instant preview of Shopping cart with recently added three items.


  1. Dave, did some of your code get scrambled or removed? The code for the post above is not complete (although I was able to fill in the blanks).

  2. Thanks for pointing out. I will check and update the post.

  3. Good blog, where did you come up with the knowledge in this piece of content? I’m glad I found it though.

    ecommerce shopping carts

  4. Thank you for this tutorial, but the code for links.phtml seem to be missing ?.. Thanks.

  5. could someone post the complete example please or send the link where this solved