Display Products in shopping cart in a drop down format in Magento

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

1st Div : <div class=”block block-cart main-div-top icon-down”>
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(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);
})
})

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.

getLayout()-&gt;createBlock(‘checkout/cart_sidebar’)-&gt;setTemplate(‘checkout/cart/cart_top.phtml’)-&gt;toHtml();

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.

Advertisements

10 thoughts on “Display Products in shopping cart in a drop down format in Magento

      • 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?

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s