Search Results for 'Elementor'

[Ross]

Hi Lisa

Please take a look, the issue should now be fixed.

Our plugin required a small tweak to get everything playing nice.

I’ve also done a writeup of the required steps, should you wish to get Masonry working etc

https://searchandfilter.com/documentation/3rd-party/elementor/

Thanks

[Ross]

I figured it out. The script needed to relayout masonry is:

(function ( $ ) {
	"use strict";
	
	//detects when the ajax request has finished and the content has been updated
	// - add scripts that apply to your results here
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.init();
		//so load your lightbox or JS scripts here again
	});
	
}(jQuery));

Also, in some circumstances, I noticed there were some pagination issues, these can be fixed by adding this to functions.php (replacing my-posts, with the slug of the page the posts widget is on):

//fix pagination issues in elementor when using posts widget with S&F
add_action('loop_start', 'elementor_post_widget_pagination_fix', 10);
function elementor_post_widget_pagination_fix($query)
{
	if(is_page("my-posts")){
		$sf_paged = 1;
		if(isset($_GET['sf_paged'])){
			$sf_paged = intval($_GET['sf_paged']);
		}
		set_query_var("paged", $sf_paged); //elementor uses get_query_var to get current page, so lets set it before its performeed
	}
	remove_action('loop_start', 'elementor_post_widget_pagination_fix', 10);
}

Thanks

[Anonymous]

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?

[Trevor]

#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 editor Update button). In my examples I will use an imaginary site called http://mysite.com/. From this page you will need the full URL (in my case it is http://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-container as 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!

[Trevor]

By integration, yes, I mean that.

Alternatively, yes, you can alter the HTML and CSS to meet your needs, and sure you do not need to style it in Elementor’s way.

[Anonymous]

Thank you Trevor. I actually did see your previous threads on this topic.

Well, I could certainly help. By integration, do you mean that we can pull up the results through a Post Grid widget on elementor? (Pardon me, if I’m being stupid)

What do you mean styled similar to Elementor’s? Can’t I adjust a results.php to my liking using generic CSS? Must it match Elementor’s code?

[Anonymous]

Hi Trevor,

I recently purchased the pro version and I’ve been playing around with it. I use Elementor to theme and build my pages. I’m building a website for my company, which is a school, and I need to filter the courses from different aspects such as Subject, Duration, etc.

My issue is with theming. I have chosen the shortcode method and the results show up clearly. But I cannot understand how to theme it. I opened up the results.php file and it looks quite blank and I don’t know where to start. I did browse your forums but couldn’t find what I was looking for.

Do you by any chance have a themed file which I can edit to suit my needs?

I would share a preview link but I’m not sure how to mark my messages as private.

Thank you,
Isuru

[Trevor]

I have a copy of Elementor Pro myself and I cannot get our plugin to work with the grids in it. Instead, I have to use the Shortcode Display Results method and I hand code the results.php files, and it is not a simple matter. Until we release v3 of Search and Filter (not soon), that is the only way. With v3 comes the possibility of addons to provide integration with other themes and page builder plugins, assuming that the theme and page builder landscape (which are popular and which are not) does not change.

[Anonymous]

Hi support

I have searched your forum and it seems that it possible to integrate with Elementor, but I was not able to reproduce maybe because part of the thread was private.

Do you have a tutorial of how to integrate with Elementor Pro?

Best,
Johan

[Anonymous]

and replace that with your Elementor results grid.

In the form, change the form from Shortcode Display Results method to Custom method.

I did not understand this part. What should I replace ?