Masonry and Search & Filter

Anonymous

#77682

I stumbled upon a thread about this here: https://support.searchandfilter.com/forums/search/Masonry/

It looks like all that needs to happen to make this work is to force Masonry to reload once the Search and Filter AJAX is done. The article I posted mentions some ways to do that that didn’t work for me. Is there a best practice to make this work? Or even a way to force Masonry to reload once Search and Filter’s AJAX is done.

Any help and guidance is appreciated.

Thanks

Trevor

#77741

The first thing you need to know is the function that will initialize Masonry on your site, and whether it is available on the search results page. If you gave me a URL, I could find that for you in a few seconds. Then you would need to add a script to your site. For example, if the function were hb_masonry() then this might be the script:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    hb_masonry();
  });
}(jQuery));

Anonymous

#77804

Okay. Thanks. Here is the URL of the main search and filter page.

http://tncfirewood.wpengine.com/resource-library/

How do I find out what it is using?

Trevor

#77814

I use the Firefox Web Developer tools and inspect the javascript. (Information -> View Javascript) and then search for masonry(

You had already put this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    // ** here you need to reload your masonry script **
      
      jQuery(window).load(function() {
        
      // MASSONRY Without jquery
      var container = document.querySelector('#masonry-container');
      var msnry = new Masonry( container, {
        itemSelector: '.search-results-card',
        columnWidth: '.search-results-card',                
      });  
      
        });
  });
}(jQuery));

And I think it needs to be this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    var container = document.querySelector('#masonry-container');
    var msnry = new Masonry( container, {
      itemSelector: '.search-results-card',
      columnWidth: '.search-results-card',                
    });  
  });
}(jQuery));

Maybe.

Anonymous

#77844

Yeah, I had already tried that before I tried the one that is in there. I just tried it again for good measure, but no luck. Is there a different masonry function I should be using? Like the hb_masonry(); one you mentioned earlier? I pretty much followed this article to get the Masonry working in the first place.

http://www.wpdevsolutions.com/implement-masonry-in-wordpress/

Should I have implemented it differently?

Trevor

#77849

My guess is that it also needs to do more than what I see there. You may need to ask the theme author, “How do I trigger Masonry after an ajax refresh of the loop container?”

Anonymous

#77876

I am the theme author. I built this theme from scratch using _s. This page is a standard loop page. Nothing has been modified in that regard, other than removing the excerpt. The only other thing I have done is implement this plugin. I am new to Masonry, but am just trying to make it reinitialize after your plugin does its filtering. If there is any further insight you can give, it would be helpful.

Trevor

#77899

This reply has been marked as private.

Anonymous

#82890

This reply has been marked as private.

Trevor

#83039

Where are you based in the world Lou? If you are in America, you will need to try to contact me early in the morning your time. I have you as a contact, and I try to show that I am online as much as I can (like now for example).

[Author]

Posts