This snippet of code is integrated into our header to showcase the cart. Currently, the dropdown appears when hovering over it.
Is there a way to adjust this so that the dropdown shows up when onclick?
<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>
The following code controls the dropdown functionality on the website:
<?php //Drop-down ?>
var ddOpenTimeout;
var dMenuPosTimeout;
var DD_DELAY_IN = 200;
var DD_DELAY_OUT = 0;
var DD_ANIMATION_IN = 0;
var DD_ANIMATION_OUT = 0;
$('.clickable-dropdown > .dropdown-heading').click(function() {
$(this).parent().addClass('open');
$(this).parent().trigger('mouseenter');
});
//$('.dropdown-heading').on('click', function(e) {
$(document).on('click', '.dropdown-heading', function(e) {
e.preventDefault();
});
$(document).on('mouseenter', '.dropdown', function() {
var ddToggle = $(this).children('.dropdown-heading');
var ddMenu = $(this).children('.dropdown-content');
var ddWrapper = ddMenu.parent(); <?php //$(this); ?>
<?php //Clear old position of dd menu ?>
ddMenu.css("left", "");
ddMenu.css("right", "");
<?php //Show dd menu ?>
if ($(this).hasClass('clickable-dropdown'))
{
<?php //If dropdown is opened (parent already has class 'open') ?>
if ($(this).hasClass('open'))
{
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
}
else
{
<?php //Add class 'open' to dd ?>
clearTimeout(ddOpenTimeout);
ddOpenTimeout = setTimeout(function() {
ddWrapper.addClass('open');
}, DD_DELAY_IN);
//$(this).addClass('open');
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
<?php //Set new position of dd menu.
//This code is delayed the same amount of time as drop-down animation. ?>
clearTimeout(dMenuPosTimeout);
dMenuPosTimeout = setTimeout(function() {
if (ddMenu.offset().left < 0)
{
var space = ddWrapper.offset().left; <?php //Space available on the left of dd ?>
ddMenu.css("left", (-1)*space);
ddMenu.css("right", "auto");
}
}, DD_DELAY_IN);
}).on('mouseleave', '.dropdown', function() {
var ddMenu = $(this).children('.dropdown-content');
clearTimeout(ddOpenTimeout); <?php //Clear, to close dd on mouseleave ?>
ddMenu.stop(true, true).delay(DD_DELAY_OUT).fadeOut(DD_ANIMATION_OUT, "easeInCubic");
if (ddMenu.is(":hidden"))
{
ddMenu.hide();
}
$(this).removeClass('open');
});