Mini Cart – The Trouble Maker (with Mini Tutorial)

Working closely on eCommerce has taught me that every little detail counts. The search box is of the most clicked areas on a website, adding a “Quick view” increases conversion, enabling related products on the shopping cart checkout page can add last minute sales, having an error free page increases buyer’s trust, and so on… There’s a ton of ways to improve your site and make it more trustworthy. How you might ask? Well, read below!

Watch the Header

Following the Z-Pattern reading theory one will have to agree that the Header is of most importance to a website. When I say Header I’m talking about all the info that’s located above your menu.

Take a look at the following eCommerce Examples.

As you can see they all have similar information. It should contain (at least):

• Your Logo
• Links to Sign In / Register
• Contact Us / About Us
• Search Box
• Mini Cart

I guess that all of the above terms are easy to understand. The least common term might be Mini Cart. And trust me it’s not the same as Shopping Cart or Shopping Bag.

MiniCart vs. Shopping Cart

If you know the difference between Shopping Cart and Mini Cart you may want to skip the following section.

If you’re still reading this, I’ll assume that you don’t know what a Mini Cart is. Imagine you’re buying online, on a website built with Magento (queue funny advertisement music). Every time you add an item to your cart, the product goes to the Shopping Cart. Easy. Every item you add will be there until you checkout (the end of your buying process). The Shopping Cart has it’s own web address (usually http://www.site.com/checkout/cart).

The Mini Cart will you show some of the items you’ve added to your cart (at least three). The Mini Cart will be shown on the header of your site.

So remember:

Shopping Cart

» Contains all Items.
» Has it’s on URL.
» Last step before checkout.

Mini Cart

» Displays some items.
» It’s usually located at the header.

Mini Cart -- The Trouble Maker

The Mini Cart is really helpful to the buyer. You know how many items you’ve added to your cart. You can see in advance if your cart is going beyond your budget or not. Finally, it let’s you carry on to the Checkout Process (regardless of what page you’re on).

If you have worked with Magento before, you’ll know that it uses Prototype Libraries to give life to the Mini Cart. It’s ok, I don’t like it either. However, the thing that I find more annoying as an user is the on-hover activation of the Mini Cart. Every time your mouse goes to the top of the “Mini Cart” link, it will display it. Even though you don’t want it to show.

Maybe we should throw in a promotion: Free Shipping & No Taxes if you’re able to dodge the mini-cart activation on our site while browsing on it for 5min.

You’ll end up clicking on close and getting distracted or learning to dodge the link with your mouse.

Ok enough said. Mini Cart could be a trouble maker. So how do we fix that?

Mini Tutorial -- Change Magento’s default Mini Cart action on hover

Don’t panic, the calvary is here. This is what we will do. We’ll change the behaviour of the Mini Cart hover to be activated with jQuery. We’ll also add a half a second delay activation on the hover action. That way, if your mouse is just passing by the link but not stopping intentionally, it won’t show the Mini Cart. So let’s begin.

Step 1

Open the cartheader.phtml file (Assuming you’re working with the Magento Enterprise Edition open /app/design/frontend/enterprise/your-theme-name/checkout/cart/cartheader.phtml).

Step 2

You want to declare a function to hide the cart. You’re going to use that function in the following step. This will hide the Mini Cart when you click on the close button or when you leave the Mini Cart. Go to the Javascript call on the cartheader.phtml file (at the end) and add the following.

function hideCart() {
        jQuery('#topCartContent').stop(true, true).slideUp('slow');
    }

Step 3

Then we will remove the action call to the prototype close cart. Find the call to Enterprise.TopCart.hideCart() and delete it. I should be twice on the file. Replace this line (around 56 and 67).

<span onclick="Enterprise.TopCart.hideCart()" class="close-btn"><?php echo $this->__('Close'); ?></span>

with this

<span  onclick="hideCart()" class="close-btn"><?php echo $this->__('Close'); ?></span>

Step 4

We’ll now include the calls on jQuery. The first thing you want to do is create a hover event on the mini cart link. Don’t forget to add the wait for half a second, that’s why we’re doing this anyway. To do so, we’ll use the SetTimeout function. We want to have a behaviour like this: on hover wait for 500ms and then show the cart. When you step out of the mini-cart link though, you want the cart to close (callback function). I added a 1 second hold on that call (just to make it look nice).

So this is what we need:

     var timeoutId;
    var overMiniCart = false;

    jQuery('.cart-link').hover(function() {
        if (!timeoutId) {
            timeoutId = window.setTimeout(function() {
                 timeoutId = null;
                overMiniCart = true;
                jQuery('#topCartContent').stop(true, true).slideDown('slow');
            }, 500);
        }
    },
    function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
            timeoutId = null;
        } else {
            overMiniCart = false;
            setTimeout(function() {
                if (!overMiniCart) {
                    hideCart();
                }
            }, 1000);
        }
    });

Step 5

Finally we want to avoid any event when you click on the Mini Cart Link

jQuery('.cart-link').click(function(e){
        e.preventDefault();
    });

    jQuery('#topCartContent').hover(function() {
        overMiniCart = true;
    },
    function() {
        overMiniCart = false;
        hideCart();
    });

Your javascript call on the cartheader.phtml file should look like this

<script type="text/javascript">
    Enterprise.TopCart.initialize('topCartContent');
    // Below can be used to show minicart after item added
    // Enterprise.TopCart.showCart(7);

    var timeoutId;
    var overMiniCart = false;

    jQuery('.cart-link').hover(function() {
        if (!timeoutId) {
            timeoutId = window.setTimeout(function() {
                 timeoutId = null;
                overMiniCart = true;
                jQuery('#topCartContent').stop(true, true).slideDown('slow');
            }, 500);
        }
    },
    function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
            timeoutId = null;
        } else {
            overMiniCart = false;
            setTimeout(function() {
                if (!overMiniCart) {
                    hideCart();
                }
            }, 1000);
        }
    });

    jQuery('.cart-link').click(function(e){
        e.preventDefault();
    });

    jQuery('#topCartContent').hover(function() {
        overMiniCart = true;
    },
    function() {
        overMiniCart = false;
        hideCart();
    });

    function hideCart() {
        jQuery('#topCartContent').stop(true, true).slideUp('slow');
    };

</script>