This was really annoying me as I found a nice lib which worked called jquery-outside-events , which I forked onto my own Github (could be tidier/easier imho) but it wouldn’t work! The reason I think was possibly it was conflicting with Prototype JS, which Magento uses.
The $ symbol is reserved for Prototype so I found I had to replace $(‘#etc’); with jQuery(‘#etc’); Since doing that however I’ve discovered you can call $j instead of $ or jQuery.
Anyway! Here’s the code you need:
$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'); } });
Now when you click show basket, the basket appears, but you can now click elsewhere on the page to make it close again!