The forums are closed and will be removed when we launch our new site.
Looking for support? You can access the support system via your account.
-
Search Results
-
Hi there, we had Search and Filter Pro working great on our site, but now we are migrating to a new site where we are using Elementor. I found step-by-step instructions for integrating the the elementor Posts widget by searching “Elementor” in your support forums. I can’t find a standalone URL for these instructions, but you should see them here:
https://support.searchandfilter.com/forums/search/Elementor/
I believe I followed the instructions correctly, but my search and filter forms do not update the posts listing. Here’s my page:
https://newdemisto.wpengine.com/partners/
I see the same partner list no matter what I select in the search/filter form. Am I missing something in how to configure the Elementor post widget?
#1 Make a results page. To do this, add a New Page to your site, give it a suitable title (in my case I will call it
Sample Page) and save the page (use the WordPress editorUpdatebutton). In my examples I will use an imaginary site calledhttp://mysite.com/. From this page you will need the full URL (in my case it ishttp://mysite.com/sample-page):
#2 Now create a new search in Search & Filter Pro. Give it a suitable name (in my case I have called it
Elementor Test). You need to make the form to suit your needs. To make testing easier, note the settings I have used on my General Settings tab. Also make a note of the forms shortcode ([searchandfilter id="105"]in my example) as you will need this later (yours will have a different ID number):
#3 Add any fields you need in the form. You can see I have added Categories and Tags, and a Submit button (when you have done testing, you may want to remove this and enable Auto Submit, but that is down to your preference or design needs).
#4 On the Display Results tab make sure you set the form to the Custom display method, set the full Results URL you had from #1 and set the Ajax Container to
.elementor-posts-containeras shown here:
#5 Save the form. Return to the results page and click the blue ‘Edit with Elementor’ button.
#6 I made the row 25%/75% (1 col : 3col) and in the left column placed a Text Editor element with two shortcodes in (using the shortcode from #2, you need to type in the action part yourself or copy it from here):
[searchandfilter id="105"] [searchandfilter id="105" action="filter_next_query"]Again make sure you change the ID numbers!!!
#7 In the right column I placed a Posts Element (notice I have Masonry off at this point):
I will edit this post once I have figured Masonry out. We did ask the Elementor support team how the layout was initialized (using javascript):
https://github.com/pojome/elementor/issues/4800
They don’t think they do, as you can see from their reply. The above screenshot shows a Masonry option, which is a posts grid initializing javascript. That did not impress me much. I now have to figure that part. I will be back!
