OkK. So, I seem to have gotten the Ajax working by setting the Ajax Container to .so-widget-blog-style-two
There are not enough posts to be able to test pagination or the masonry grid.
Probably, but I ran out of time. I have yet to check if your theme uses Masonry/Isotope. If it does, it will require some help from your theme author. I am working through my tickets right now, so it may be some while before I get to this one.
That might be the template, but it does not have the wp_query in it, which must be in another theme file. Looking at that code, it also shows that the posts grid is made using Masonry/Isotope and that means that you cannot use Ajax page refresh in our plugin, as it would require some extra code from the plugin author to enable the reload of the Masonry code, and I have asked them before and they do not seem able to provide it.
Is our filter working OK with the content otherwise?
AnonymousInactive
Is there a way to display the post results in a grid format rather than a list (as is out of the box) . IE am I missing a configuration setting to display output in a grid (3-wide) or masonry grid format?
About grids. I would need you to find some information out about the Flatsome UX Builder. It is possible a new feature in Search Filter Pro would allow a grid made by it to work directly with our filter, but …
I assume that the grid that it builds has ‘masonry’-like behaviour. Masonry/Isotope and Salvattore are the most popular commercial scripts out there used by WordPress themes. For example, Divi uses Salvattore and Avada uses Masonry. I cannot see that Flatsome uses either.
The issue with grids is when you trigger a ‘posts reload’ with our filter and Ajax, the grid script needs to re-trigger. This requires the theme author to provide that code. Then you load a script on to the page to do that. This is an example of the script required for Divi with Search & Filter pro:
<script>(function ( $ ) {
"use strict";
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log("ajax complete");
var grids = document.getElementsByClassName('et_pb_blog_grid');
salvattore['register_grid'](grids[0]);
});
}(jQuery));</script>
Where these lines are what we worked out were required to re-trigger Salvattore in Divi (Divi could not tell us, but we managed to work it out for ourselves):
var grids = document.getElementsByClassName('et_pb_blog_grid');
salvattore['register_grid'](grids[0]);
Masonry is far harder to figure and really needs the theme author to help.
AnonymousInactive
We’ve got a site we’re working on that uses the Divi theme and are trying to display the search results as a grid. Since the Divi theme only has a masonry grid, we’ve installed Blog Designer – Post and Widget Pro plugin for areas of the site we need to display things as a grid.
We’re using shortcode and are having issues with displaying the results. We got it to display results at one point, but it showed errors and had the results as full posts.
We don’t have much coding knowledge and would appreciate some guidance.
Hi
Are you able to build a test page in the theme, that has the search form on it, and a normal grid (not filtered) with the posts that you want and using Masonry?
However, before you do that, if SO uses Masonry, you will need to get from them how to re-trigger the masonry on an Ajax call. Without that, it cannot work. If SO does not uses Masonry, then that is a different proposition.
The answer to the Masonry question is rather dependent on your theme (Tesseract, yes?). Are you using Beaver Builder to make the grid and does that use Masonry?
To make the filters go horizontal, you would need to use Custom CSS, like this maybe?
.searchandfilter > ul > li {
display: inline-block;
margin-right: 20px;
float: left;
}
.searchandfilter > ul > li:last-child {
margin-right: 0;
}
.search-filter-results {clear: both;}
I need to know how you set the plugin up and how you set up the page in Avada to work with it. See this post:
https://support.searchandfilter.com/forums/topic/how-do-i-make-the-results-display-in-a-grid/#post-101437
HOWEVER, we have not been able to get Masonry working with Ajax. Avada have not yet provided code as to how to re-trigger their Masonry when using Ajax.
Many users have instead used Visual Composer to search and filter a VC posts grid (we have a beta extension for VC):
https://www.dropbox.com/s/t4gnvhr8mj7e52d/search-filter-pro-vc-beta-2.zip?dl=0
AnonymousInactive
Is it possible to have the filters displaying horizontally and have a masonry grid layout for the search results using shortcodes?
Many thanks for your help on this
