How to: Jquery animation when hovering on hit result

You can add jQuery Animation to your hit results, here’s how you do it:

My original problem: The hover animation works on a standard Shopify collections page, but I can’t figure out how to get the jQuery to fire inside an Algolia results page:

Solution: You’ll notice that jQuery you added won’t fire, even if you’re using the same CSS classes. You’ll see it is firing everywhere outside of the dynamically returned results, but not inside the hit results. This is because the results are dynamically returned and not static html… so, You need to call it to fire when the search results are rendered.

Step 1: ADD ANIMATION ON LOAD.
Add this to the bottom of algolia_instant_search.js.liquid (the additional .liquid is because i’m using Shopify, yours may have something different) and find where it says // Main:

instant.search.on('render', function () {   
// YOUR jQUERY GOES INSIDE HERE  
});

Add here in my blue highlighted line:

and it will now fire on load!

.
.
.
.
.
.

Step 2: ADD ANIMATION ON SEARCH RESULT REFINEMENT (STATE CHANGE).

Why do we need to do this? If you don’t include a widget, it will work on load, but not after you refined your search results.

Inside of // BIND HELPERS, inside of document loaded… right above // Mobile Facets Display, create a search widget that holds the jQuery animation code again, so that whenever something is FILTERED ie. refinements are made, the animation will be reloaded and ready to go.

    // TRIGGER PRODUCT CARD HOVER AGAIN WHEN SEARCH RESULTS ARE REFINED
instant.search.addWidget({
  render: function (opts) {
     /* ADD YOUR SAME JQUERY IN HERE */

  } 
});

Add it here in my blue line:

.
.
.
.
.
.



ADDITIONAL HELPFUL INFORMATION:

Other files you’ll need to have customized:

  • SCSS style sheet. Make sure your SCSS style sheet has the relevant animation styles.
  • Product template. Also you’ll need to have customized your algolia_instant_search_product.hogan.liquid file to add in CSS classes and DIVs as necessary for whatever animation you are using.

USE CASES:

  • Product card animation - I’m using this for a product card hover reveal.
  • Javascript widgets you may need to fire… wishlists, etc.

SCREENSHOT OF MY HOVER CARD ANIMATION IN ALGOLIA BELOW:

I customized a Product Card animation I found on codepen… don’t know where it is right now, but you can dig something up! This is what my code in Algolia looks like after I pasted it in. Just have your product template customizations and CSS in order as well.

Example of the animation code I used:

     // Main
instant.search.start();

instant.search.on('render', function () {     
    // PRODUCT CARD HOVER
     var zindex = 10;

    $("div.card").hover(function(e){
      var isShowing = false;
      if ($(this).hasClass("d-card-show")) {
        isShowing = true
      }

      if ($("div.product-cards").hasClass("showing")) {
        // a card is already in view
        $("div.card.d-card-show")
          .removeClass("d-card-show");

        if (isShowing) {
          // this card was showing - reset the grid
          $("div.product-cards")
            .removeClass("showing");
          $(".card-flap, .flap1, .flap2")
            .css({
               'transition' : '100'
            });
        } else {
          // this card isn't showing - get in with it
          $(this)
            .css({zIndex: zindex})
            .addClass("d-card-show");

        }
        zindex++;

      } else {
        // no product-cards in view
        $("div.product-cards")
          .addClass("showing");
        $(this)
          .css({zIndex:zindex})
          .addClass("d-card-show");
        zindex++;
      }

      $(".card-actions a").click(function(e){
        if ($("div.product-cards").hasClass("showing")) {
          $("div.card.d-card-show")
            .removeClass("d-card-show");

          if (isShowing) {
            $("div.product-cards")
              .removeClass("showing");
          } 
        }
      });

    });
});   

Hope this writeup helps you all out! I got stuck on this for a while!!

2 Likes

Hi @work,

Thanks for sharing this tutorial, the animation looks very nice on your website!

Well done and happy coding!

1 Like