You might have seen the cart summary drop down in many websites as shown in the image below. Making such a drop down is pretty easy using Magento. You just need to know little bit of jquery for it.
Follow the below steps to build one for you
1) If you would have observed our requirement is to display the recently added products in cart drop-down. So we will use the siderbar file for cart which has already been implemented in Magento.
2) Create a copy of file sidebar.phtml and name it say cart_top.phtml.
3) Add these three class in first three div. These classes will be used in Jquery. The classes will look somewhat similar to this
2nd Div : <div class=”block-title top-mini-title”>
3rd Div : <div class=”block-content top-mini-content” style=”display:none;”>
I am not pasting the whole code as it would make the length of the post too long.
4) Add following Jquery code to design the dropdown
jQuery(“.top-mini-title”).hover(function(){
jQuery(“.top-mini-content”).addClass(‘icon-up’).removeClass(‘icon-down’).slideDown(200);
})
jQuery(“.main-div-top”).mouseleave(function(){
jQuery(“.top-mini-content”).addClass(‘icon-down’).removeClass(‘icon-up’).slideUp(100);
})
})
You will understand the code pretty easily. The concept is pretty simple the cart summary is kept as display:none initially when the mouse is hovered the slide down event is fired which makes the drop down to display. Certain CSS tricks and modification will be required to be done to make it work properly.
5) Call the file on website. You can use following code to do so.
Here i have entered php code as the file is to be called in header.phtml. You could also use XML code for it.
Please provide your feedback on this.
Universal Coder 
Please explain me the step 5. Where can i include this code ? I have include it in my topmenu.phtml and i cant nothing seen on my page.
LikeLike
I hope your problem is solved now.You can contact us for any queries at universalcoderteam@gmail.com.
LikeLike
I cannot seem to do step 5 right. Where in the code do I add it exactly?
LikeLike
You can place your code in any template file where you want to call this block
LikeLike
Hi, I followed all the steps and the whole website turned blank. Please explain why this is happening
LikeLike
Could you please let me know the exact problem you faced and screenshot if possible. Also please let me know what you did?
LikeLike
Hi,
First, I added
jquery.js
to the Page.xml
Then, Steps I Took:
(1) Copied Sidebar.phtml and renamed to cart_top.phtml, then pasted in same folder as Sidebar.phtml
(2) Followed Instructions to add:
1st Div :
2nd Div :
3rd Div :
(3) Added to same file:
jQuery(document).ready(function(){
jQuery(“.top-mini-title”).hover(function(){
jQuery(“.top-mini-content”).addClass(‘icon-up’).removeClass(‘icon-down’).slideDown(200);
})
jQuery(“.main-div-top”).mouseleave(function(){
jQuery(“.top-mini-content”).addClass(‘icon-down’).removeClass(‘icon-up’).slideUp(100);
})
})
(4) Added to header.phtml
getLayout()->createBlock(‘checkout/cart_sidebar’)->setTemplate(‘checkout/cart/cart_top.phtml’)->toHtml();
Afterwards, it has become blank screen. The whole website. I removed the last call step and it back to normal. Please let me know why this happened?
LikeLike
For some reason the code for the first thing I did came out as “Jquery.Js only – The full code was ”
jquery.js
“
LikeLike
Okay it changed it again..First thing I did was add the code you supplied in your post on stackoverflow – http://magento.stackexchange.com/questions/54386/how-to-use-jquery-where-does-this-code-go/56314?noredirect=1#comment77020_56314
LikeLike
echo $this->getLayout()->createBlock(‘checkout/cart_sidebar’)->setTemplate(‘checkout/cart/cart_top.phtml’)->toHtml();
LikeLike