Did you follow our guide for Elementor:
https://searchandfilter.com/documentation/3rd-party/elementor/
Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:
(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.init();
});
}(jQuery));
Use this code:
(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
});
}(jQuery));
Note, if you are placing the code inline on the page (in a widget), it needs the <script>.....</script> tags around it.
AnonymousInactive
Hello! I am using elementor and I can not make the search result work, but I am guided step by step. I appreciate it!
regards
AnonymousInactive
Hello,
I have the last versions of WORDPRESS and all the PLUGINS.
I have a Elementor Pro Page Builder with the Elementor Widget “Woocommerce Products”
I have follow your documentation of Woocommerce and the other one with Elementor but when I use Search and Filter Pro the pagination doesn’t work.
And when I change my filter the result doesn’t change anytime.
How can I make it work properly ?
Thank You.
I think that I have teh same problem that :
But the solution is in the forum.
RUI JIE LEE
August 23, 2018 at 6:54 pm
#186335
Hi guys,
Currently i am still facing an issue when i try integrating it with elementor page builder.
I went to search up the documentation and chance upon this site.
https://searchandfilter.com/documentation/3rd-party/elementor/
I ‘tried’ to follow the steps. But had abit of difficulty trying to understand this point
(Before the Posts Widget, tell S&F that it needs to filter the grid by adding a text area and adding our filter_next_query shortcode:
[searchandfilter id=”123456″ action=”filter_next_query”] )
What i did :
1) created a section with 2 columns.
2)add a ‘shortcode’ to the right [searchandfilter id=”934″]
3)add a ‘shortcode’ widget to the left.
4)in the shortcode widget i pasted this short code as instructed. [searchandfilter id=”934″ action=”filter_next_query”] << also changed the searchandfilter id to match my search form
https://photos.app.goo.gl/hLSZJaG4VPtDd8eb9 an elaboration of how i execute the steps(it’s just a min short video no worries)
Results: nothing came out of the shortcode widget. However i went back to edit the shortcode widget to
[searchandfilter id=”934″] and remove away action=”filter_next_query” apparently some ‘things’ came out. But i know that i might have did something wrong.
Please kindly advise me what steps did i missed out or i should have done.
AnonymousInactive
I now see that it’s not even filtering when new computers open it for the first time.
You have to use it first without ajax before you can use it with ajax.
Elementor is providing the grid.
I used the manual you have in your documentation.
Now the code is in an html block below on the page.
Where should I put it?
The custom css is only because I haven’t updated the excerpt on the pages.
I will do that and see if it changes anything.
Is there anything else you see that could be messing this up?
I’m a programmer so you can use more advanced language.
AnonymousInactive
So I was playing with some of my other plugins. The WooCommerce filter works perfect with the search and filter, when I do not have elementors Header and Footer active on the site. Though it is something I found out as to what the culprit of the problem for the load was. I still need a header and footer to be the way I want it on the page. So if this helps in trying to find a solution there we go, If not I will need to contact elementor I will do so.
AnonymousInactive
Hi,
Thank you for providing the guide for Elementor. I follow the guide and I can now display the filter result on the current page.
However, I found some minor problems need to been fixed as follow:
1. My search results were showing very slowly.
2. The post border is stretched, which causes extra white space to appear.
How can I fix the above minor problems?
Thank a lot.
Did you follow our guide for Elementor:
https://searchandfilter.com/documentation/3rd-party/elementor/
Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:
(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.init();
});
}(jQuery));
Use this code:
(function ( $ ) {
"use strict";
// detects when the ajax request has finished and the content has been updated
// re-init the layout scripts from Elementor
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
});
}(jQuery));
Note, if you are placing the code inline on the page (in a widget), it needs the <script>.....</script> tags around it.
AnonymousInactive
Thank you for your reply.
The link I provided is the ‘page’ in WordPress using Elementor. The products are made from “Post” which are not using the WooCommerce.
Would you have a solution to resolve my issue?
Thank a lot.
