Forums › Forums › Search & Filter Pro › Masonry and Search & Filter
Tagged: masonry
- This topic has 9 replies, 2 voices, and was last updated 7 years, 10 months ago by Trevor.
-
Anonymous(Private) December 20, 2016 at 12:19 am #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(Private) December 20, 2016 at 12:05 pm #77741The 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(Private) December 20, 2016 at 3:21 pm #77804Okay. 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(Private) December 20, 2016 at 3:50 pm #77814I 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(Private) December 20, 2016 at 4:47 pm #77844Yeah, 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?
Anonymous(Private) December 20, 2016 at 5:44 pm #77876I 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.
-
AuthorPosts