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
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.