3

Where do i have to change the jQuery functionality to show the drop downs from the 'mini cart' and the 'top-account' on hover instead of click on the desktop versions?

Thanks!

4

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>
0

To make this work for account links, use this javascript:

<script type="text/javascript">
    $j(document).ready(function(){
        $j(".skip-account").hover(function() {
            $j(this).addClass("skip-active");
            $j("#header-account").addClass("skip-active");
        }, function() {
            $j(this).removeClass("skip-active");
            $j("#header-account").removeClass("skip-active");
        });
        $j(".skip-content").hover(function() {
            $j(this).addClass("skip-active");
            $j(".skip-account").addClass("skip-active");
        }, function() {
            $j(this).removeClass("skip-active");
            $j(".skip-account").removeClass("skip-active");
        });
    });
</script>

Also you should edit app.js and comment out the Skip Links function which is no longer needed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.