Magento 1.9 – How to Hide Mini-Cart and Header-Account Dropdown When Clicking Outside

jquerymagento-1.9rwd-theme

I am building a custom theme based on Magento 1.9 RWD.

How do I manage to hide/close the mini cart and header-account drop down by clicking anywhere outside of those sections ?

EDIT – 1

zhartaunik's answer helped me to resolve the issue. But I am now facing below issue.

If I click the language-switcher its stays open. Now when I click the mini cart and header-account, those drop-downs opens, but also the language-switcher still stays open! I want this one to close directly when another button is clicked? How do I get this done?

Best Answer

Hope It has no issues...

Add this script to

/app/design/frontend/rwd/default/template/checkout/cart/minicart/items.phtml

<script>
    $j('body').click(function (event)
    {
        element = $j(event.target);
        if(element.parents('.skip-link.skip-cart').length == 1 || element.hasClass('skip-cart'))
        {
            return;
        }
        var parent = $j('.minicart-wrapper').parents('.skip-content');
        var link = parent.siblings('.skip-link');

        if (element.parents('.minicart-wrapper').length == 0) {
            parent.removeClass('skip-active');
            link.removeClass('skip-active');
        }
    });
</script>

upd.1

My cart is closing successfully with that extension:

enter image description here

Maybe you have some javascript errors in console? As you can see - my javascript is simple. If you click outside of block - it gets closed.

Related Solutions

Magento – On hover instead of ‘click’ for mini cart and top account buttons in Magento RWD theme

No one has answered this question and you probably don't need it but others might

go to app/design/frontend/yourtheme/default/template/checkout/cart/minicart.phtml

Add the following:

<div class="container"> 
</div>

And now the jQuery to the bottom of the file :

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.container').hover(function() {
    jQuery(this).children('#header-cart,.skip-cart').addClass("skip-active");
}, function() {
    jQuery(this).children('#header-cart,.skip-cart').removeClass("skip-active");
});        
});
</script>

Your file minicart.phtml should look like this :

<?php
$_cartQty = $this->getSummaryCount();
if(empty($_cartQty)) {
    $_cartQty = 0;
}
?>
<div class="container">
<a href="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
<span class="icon"></span>
<span class="label"><?php echo $this->__('Cart'); ?></span>
<span class="count"><?php echo $_cartQty; ?></span>
</a>

<div id="header-cart" class="block block-cart skip-content">
<?php echo $this->getChildHtml('minicart_content');?>
</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.container').hover(function() {
    jQuery(this).children('#header-cart,.skip-cart').addClass("skip-active");
}, function() {
    jQuery(this).children('#header-cart,.skip-cart').removeClass("skip-active");
});        
});
</script>

Magento 1.9 Mini Cart – How to Refresh and Update

Magento 1 is not using browser local storage as Magento 2 does. Therefor, to update the minicart without refreshing the page you need to create an ajax request that would retrieve the HTML of the minicart and insert it into the block.

To do so you need to create a new controller or override the default controller to accept an ajax request and return only the minicart content as response.

There's already a script that refreshes the minicart after a product has been removed or updated.

If you look into the RWD theme, more specifically in this file: skin/frontend/rwd/default/js/minicart.js you will find the methods to do it.

Hope this helps

EDIT – 1

Best Answer

Related Solutions

Magento – On hover instead of ‘click’ for mini cart and top account buttons in Magento RWD theme

Magento 1.9 Mini Cart – How to Refresh and Update

Related Topic