Does this post help?
It is fairly simple. You must use a VC grid element of course (there are four I think; Post, Masonry Post, Media and Masonry Media).
AnonymousInactive
Hi,
I’m using the theme Uncode. I have been trying to use the extension for VC so my results display with masonry / isotope. However, I cant find how to insert the data source. I found this thread:
https://support.searchandfilter.com/forums/topic/style-results-to-fit-theme-vc/
But cant see what the solution was since it was marked private. Please advice.
Thanks!
Susana
AnonymousInactive
Trevor,
Thanks for sharing the link to your VC build page, and yes, I see that your posts are displayed properly.
My VC page appears to be using traditional divs. Below is the output for my grid. Does this give you any indication as to my the individual posts are not listed?
<!-- Begin Article -->
<article id="post-10340" class="clearfix post-10340 page type-page status-publish">
<div class="article-content">
<section class="container-wrap main-color " style="padding-top:40px;padding-bottom:40px" >
<div class="section-container container">
<div class="vc_row vc_row-fluid row">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner ">
<div class="wpb_wrapper"><!-- vc_grid start -->
<div class="vc_grid-container-wrapper vc_clearfix" >
<div class="vc_grid-container vc_clearfix wpb_content_element vc_masonry_grid search-filter-results search-filter-results-10254" data-initial-loading-animation="zoomIn" data-vc-grid-settings="{"page_id":10340,"style":"all-masonry","action":"vc_get_vc_grid_data","shortcode_id":"1488737968628-35765a42-af9c-2","tag":"vc_masonry_grid"}" data-vc-request="http://www.portlandcreativelist.dev/wp-admin/admin-ajax.php?sort_order=title asc" data-vc-post-id="10340" data-vc-public-nonce="957fe584e6">
</div>
</div><!-- vc_grid end -->
</div>
</div>
</div>
</div>
</div>
</section><!-- end section -->
</div><!--end article-content-->
</article>
<!-- End Article -->
Hi Eamonn
I’m afraid I had already got that far.
What we need is the JavaScript function, and I’ve gone through their JS files already, but can’t really make heads or tails of it.
What we need is the JS function to initialise the masonry layout on the shop, which I would hope would be something like:
$('selector').masonryFunction();
The best people to find this out would be the devs of Marketify.
I can’t see how to do it, therefor for now I have to say at this time it looks like its not possible to reload items in the shop using Ajax in Marketify (and I suspect this would be the same for any other plugin wanting to do some dynamic reloading of the shop, as they too would need access to this function).
Hope that helps – my hands are tied in this instance.
Best
Hi Christophe
Thanks for the file. Sadly, it was lacking any useful hooks 🙁
I also looked at how they have implemented Masonry and it looks far too complicated to try to emulate. As you will imagine, we have a lot of users who use Enfold with Search & Filter, and it would appear that they use it without Masonry.
Your only hope to be able to replicate the theme’s masonry grid is their technical support can take a look at the code in my post 90371 and tell you what would go in there. For them that should be easy to answer, if it is possible. From that point on we can emulate the structure of the HTML.
It IS possible to have a Masonry Grid, but you would need a plugin called Visual Composer, which does work with Search & Filter Pro and has a Post Masonry Grid.
Hi
I would need to log in and see what is going on. Are you aware that the latest version of Search & Filter has an extension plugin that gives you a VC element for the form and adds Search & Filter to the list of Data Sources for the VC Post Grids (and the Masonry version)?
Not that I think this is the issue here. The VC extension is here:
http://www.designsandcode.com/wp-content/uploads/2016/12/search-filter-pro-vc.zip
In the VC grid the Data Source needs to be set to Search & Filter, and then for you to select the form. In Search & Filter there is also a VC Display Results method added.
Hi Christophe. I suspect what you will need is a small snippet of javascript and to know how to trigger masonry in the theme. For example:
(function ( $ ) {
"use strict";
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log("ajax complete");
// load your masonry function here
});
}(jQuery));
AnonymousInactive
I’ve set-up S&F on my website to filter the blog masonry I use on the post page.
If the checkboxes are not marked I can see all the posts nicely in the blog masonry I use from the theme. Once is mark one or more checkboxes the results disappear. After un-checking all the boxes the results don’t show anymore.
I think there seems to be a problem with the connection between te S&F plugin and the theme.
Maybe this problem has already been discussed on the support forum but I did not find it…
I’m using:
WordPress 4.7.2
Enfold theme 3.8.5 by Kriesi
Kind Regards
AnonymousInactive
Yes, Jupiter comes with a special version of the Visual Composer.
It’s called: „WPBakery Visual Composer (Modified Version)“.
It has both the „Post Grid“ and also the „Post Masonry Grid“ elements.
I would need a mail address from you, because we use 2-step-verification by mail to login.
Then I can send you an admin account.
We upgraded the following:
Wordpress from 4.6.2 to 4.7.1
Jupiter from 5.2 to 5.5
Visual Composer from 4.12.1 to 5.0.2
Search & Filter Pro from 2.1.2 to 2.3.2
Thank you!
Markus
OK, the link you sent appears to use Masonry or similar to arrange the grid. This is not so easy to do. However ….
The7 comes with Visual Composer, I believe, and that has Post Grid and Post Masonry Grid elements.
It might be much easier for you to utilize the S&F Pro support for these VC grid elements.
If you read this post:
https://support.searchandfilter.com/forums/topic/visual-composer/#post-88745
and a little further down that same thread is a screenshot of the VC elements modal window showing these grid elements.
