Pages

Wednesday 7 January 2015

Magento1.9 show minicart on mouse hover

Add the following jquery in
app/design/frontend/your_theme/default/template/checkout/cart/minicart.phtml
<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>
minicart.phtml
<?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>

No comments:

Post a Comment