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.
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 in cart
$_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>';
$item_array[$i].='</div><br/>';
$i++;
$subtotal+=$_item->getPrice()*$_item->getQty();
}
}
$total_items =count($item_array);
Now requirements was to show only recemt three items so following is the code to add only three items.
if($total_items>0)
{
for($j=$total_items;$j>=$total_items-3;$j--)
{
$miniShoppingCart.=$item_array[$j];
}
}
else
{
$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.