[Resolved] jQuery Overlay Stops Working after Ajax Filtering of WooCommerce Products

[Author]

Posts

[rusty]

I've written a small jQuery script to show the product name and price as an overlay on top of the product thumbnails. I then created a content template of this so that I can use the thumbnails with overlay throughout my site.

On the /shop page, I have a filter by category dropdown that uses AJAX to display the results. Whenever I filter by category, the jQuery overlay script breaks. No overlay shows.

If I set the results to be updated with a full page refresh, everything works fine, but with AJAX updating, the overlay stops working.

Here's my jQuery code

// SLIDES UP THE INFO PANEL WHEN HOVERING OVER PRODUCTS - USES hoverIntent //
$( ".product-list-image" ).hoverIntent(
  function() {
    $(this).find(".product-info-overlay").slideToggle(250);
  }, function() {
    $(this).find(".product-info-overlay").slideToggle(250);
  }
);

This uses hoverIntent, which stands in for jQuery hover(). Using hover() in place of hoverIntent() doesn't affect the issue.

Is there some way to make this code re-run after the AJAX updating?

[Juan Supporter Timezone: Europe/Madrid (GMT+02:00)]

Hi Rusty

Yes, we have several options but first let me explain what is happening here, so you can take a more informed decision, and also maybe help you in the future.

Your code basically does the following: after loading the page, it inspects the existing elements which hold a classname of "product-list-image", and then it applies this "hoverIntent" callback to them, which I assume does something to the selector when hovering on it (maybe). This means that items with this classname added after this has run after the page was loaded, are not getting the "hoverIntent" callback, hence nothing happens.

Now, to the options.

We can re-run the "hoverIntent" function on all newly added elements. You will need to hook into the event that we fire when we finish loading content with AJAX. It wil lead you to write more JS code, and it might not cover all the cases at once (there is an event when loading AJAX content for Views pagination, another when loading custom search results, etc etc).

I would recommend you to try a different route, as explained here:
http://stackoverflow.com/a/16464353
The latests version o that third party plugin provides some extra third party argument that you can use, so instead of calling it into elements with a classname "product-list-image", you call it over a selector for a wrapper that does not change with the AJAX request. I would first try something like this:

$( document ).hoverIntent(
  function() {
    $(this).find(".product-info-overlay").slideToggle(250);
  }, function() {
    $(this).find(".product-info-overlay").slideToggle(250);
  },
'.product-list-image'
);

which goes all the way up to the document as a wrapper itself. You might want to adjust this to use the lowest possible wrapper for your changing content.

Hope it helps, and please let me know if this solved your issue and if I can hep you with anything else.

[rusty]

EXCELLENT answer Juan, thank you for the explanation!

This worked perfectly. I called it on ".products", which is the wrapper for the product thumbnails and it works like a charm! It's 2/3rds less code than my previous solution which was to duplicate the script as a function and execute it after the view results are updated, which seemed like a dirty hack to me.

Thanks again Juan!