Many of you know that Magento is an open source E-Commerce platform that comes with many great features. One feature in particular I wish they would integrate automatically is the ability to show recently added items to your shopping cart via the header. Rather than reinventing the wheel, we can use a pre-made extension! http://www.magentocommerce.com/magento-connect/sharplogicians-cart-drop-down-3832.html. This handy extension is made by Sharp Logicians and is pretty nice. My only complaint about this is they chose to use a click event instead of a hover event. Click events can be misleading in my opinion. I have compiled a little tutorial and how to successfully covert their click event into a nice hover-over sliding element. The features include:

  • Animation queue buildup prevention
  • Animation queue rapid hover issues
  • 100% compatible with chrome, firefox, opera, safari, IE 7 - 10
  • No extra CSS required, use what the extension gives you already!

The Code

Note: if you just want the code click here.

The basic syntax of the jQuery hover event is as follows:

$('element').hover(
     function() {
          // code when moused over
     },
     function() {
          // code when moused out
     }
);

We know we want the element the slide down when we mouse over the link and we want it to slide up when we take our mouse off of the link. Our natural thought might be to write something like $j("span.trigger").hover(function()... but this will essentially make it impossible to use this extension. We need to be more broad about this. To visualize this important difference, see this fiddle we made http://jsfiddle.net/atomicpages/peBVU/!

That being said, we can take a quick look at the code and we see the parent element is .cartdrop. This is the element that we want to select when hovering because it is the parent element.

$j('.cartdrop').hover(
     function() {
          $j('.toggle_container').slideDown(300);
     },
     function() {
          $j('.toggle_container').slideUp(300);
     }
);

This provides very basic functionality and does the job quite well! We have one issue here though, animation queue build up. If you don't know what this is, checkout the jsfiddle page and then on the first example rapidly move your cursor on and off the element. If you take your mouse away you will notice the animation continues. We can easily prevent this from happening!

$j('.cartdrop').hover(
     function() {
          $j('.toggle_container').stop().slideDown(300);
     },
     function() {
          $j('.toggle_container').stop().slideUp(300);
     }
);

We can just add .stop() to stop the current animation from progressing. More documentation can be found here: http://api.jquery.com/stop/.

We had an issue with just using the stop method and using .stop(true, true) or .stop(true) using Google Chrome. We found a good solution was to actually set the height of the element as soon as we hover over the element.

  • .promise() - "Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished."
  • .done() - "Add handlers to be called when the Deferred object is resolved."

For some reason this fixed all of our issues relating to the animation queue. To see the issue in action see here:

We found that adding the height of the .toggle_container right when the element is hovered over and changing the height to 0, this prevent any issues from happening. The full code is below:

/**
 * Custom jQuery script to handle hovers on cartdrop extension
 * @author Dennis Thompson AtomicPages LLC <http://www.atomicpages.net/>
 * @copyright AtomicPages LLC
 * @license MIT <http://opensource.org/licenses/mit-license.php/>
 */
var height = $j('.toggle_container').height();
$j('.cartdrop').hover(
     function () {
	$j('.toggle_container').addClass('open');
	$j('.toggle_container').css('height', height); // set the height
	$j('.toggle_container').stop().slideDown(300);
     },
     function () {
	$j('.toggle_container').removeClass('open');
	$j('.toggle_container').stop().slideUp(300);
	$j('.toggle_container').promise().done(function () { // let's wait until the animation is complete
		$j('.toggle_container').css('height', 0); // when animation is done set height to 0
	});
     }
);


Download the script!

Be Sociable, Share!