Display search results in a grid with preview

Paula

#36002

Hello,

first of all, thank you so much for the great Plugin, as well as the swift support the last time! The plugin has been a big help in our project so far.

However, I have just one more – pretty urgent – problem, relating to displaying the search results. Now, as a preface, I know that in order to customize the search results I need to change the results.php, and I’ve made a copy of it in the theme as instructed. I’m currently using the shortcode method to display my results, but if what I want can be achieved with some other method more easily, I could try changing to it.

So! The thing is, I’m using the Enfold theme and would like to display my results using their portfolio grid, like so: link (hovering over a picture displays the green circle depicted in the upper right corner, which opens a lightbox preview [Ajax portfolio] when clicked) instead of just the default title and image. Basically, it’s the grid and the lightbox preview that I’d like.

However, I’m unsure how to do that. I think I either need to do something in the results.php to put the results in the grid, or somehow have the S&F affect the portfolio entries displayed in the grid itself…? I’ve tried Googling and searching through the support forums, but unfortunately couldn’t find anything. I’m really stumped!

If it helps, I have a piece of shortcode that produces the portfolio grid. I tried to echo that in various parts of the results.php, but all it did was display one entire grid (with all the portfolio entries) for each search result (title and image), resulting in about 120 grids with 120 entries…

Any idea of how I could accomplish what I want? I’d be forever grateful for any help!

Add New Note to this Reply

Ross Moderator

#36035

Hey Paula

I’ve been working on allowing S&F to be more integrated with other plugins/loops/queries so there are some relatively new things you could try (make sure you’re on S&F v2.1.2).

If you are on the latest version you will see a new display method (in display results tab) called “custom”.

You can use this for custom integrations like this.

So there are two ways you can now integrate S&F with third party code.

When using another plugin or theme to generate a list of results there will always be a query that you want to add S&F to.

Currently there are two custom methods:

1) Attach search_filter_id to your query – this will obviously be dependent on the plugin you are using, as to whether its even possible at all – but if they make available the query in some way then it should be possible.

You can do this in two ways, where there is a new custom query – new WP_Query($args); you can pass it in as an argument:

$args['search_filter_id'] = 124;
$my_custom_query = new WP_Query($args);

Or, you can use WordPress’ pre_get_posts and attach it there:

add_action("pre_get_posts", "sf_pre_get_posts");

function sf_pre_get_posts($query)
{
	//some test conditions here - there *must* be something here, otherwise you'll be attaching S&F to every query! eg:
	/*
	if($query->is_main_query())
	{
		return;
	}
	*/
	
	//if we are happy this is the query we want Search & Filter to be applied to then we set it just like any other property:
	$query->set('search_filter_id', 21);
	
	return;
}

Of course replace the the numbers with the ID of your search form.

2) Replace the main loop if the query is main query (I don’t think so in your case) you can do a query posts with S&F described here:

http://www.designsandcode.com/documentation/search-filter-pro/action-filter-reference/#Query_Posts

This will replace the main query and add S&F to it.

Apart from that, it will be some custom work to copy over the html/css in to your results template from the portfolio grid..

I would maybe ask the guys at enfold, how to change change the properties of the shortcode that produces the portfolio grid, or if you can access it with pre_get_posts or something similar – or if there is a hook or filter avaiable – I may be able to point you in the right direction.

Thanks

Add New Note to this Reply

Paula

#36308

Hey Ross,

After some research and a bunch of trial and error (since I’m very new to this all still, and spent way too long trying to fiddle with pre_get_posts…), I managed to make it work by checking whether we’re on the right page, and then modifying the custom query by adding $query[‘search_filter_id’] = *my id number*; So before anything else, thank you so much for the help on that!

Now I just have one more problem! See, when I first enter the page, the portfolio grid looks like this, aka, the way it’s supposed to, with the preview button working and everything.

Then, after adding some filters the grid now looks like this and clicking on a portfolio item doesn’t open the desired lightbox preview.

This doesn’t happen if I have the “Load results using Ajax?” box unchecked, or if I manually refresh the page (keeping the filter terms in the address bar) after displaying the results with Ajax. So yeah, it looks like an Ajax problem?

However, I’d very much like to keep the Ajax loading feature if at all possible, since it’s very convenient for the user. Would you have any idea as to what I should do from here…?

Thanks again!

Add New Note to this Reply

Ross Moderator

#36336

Hey Paula

Yeah the reason for this is, when results are loaded via Ajax, the scripts on your site are not being reloaded too.

So the same scripts that are on your site, linked with displaying the lightbox etc, are not applied to the new results that are loaded on the page.

See the first question in the FAQs:
https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

So you’ll need to use the events supplied to detect when to reload your scripts.

I’ve seen mixed success from users using the above in conjunction with

https://api.jquery.com/jquery.getscript/

Thanks

Add New Note to this Reply

Paula

#36730

Hey Ross

I see! That makes sense. And I do recall seeing the FAQ entry earlier, but somehow forgot all about it in the midst of everything… sorry!

I’m still a bit lost on where or when to use the supplied code, though. Would that be in the theme’s (or child theme’s) functions.php? At what point, and how? And how would the jQuery getscript tie in? I tried looking for example solutions, but they seemed to be marked as private replies. I also tried fiddling around with the code, but didn’t manage to get on the right track, I feel…

Add New Note to this Reply

Paula

#38493

Hey Ross

Any help would be much appreciated, if you could.

Thanks!

Add New Note to this Reply

Ross Moderator

#38663

Hey Paula

Apologies this completely slipped through the net – I’ll get back to you tomorrow.

Thanks

Add New Note to this Reply

Paula

#38981

Hey Ross

Sorry to bother you, but I hope you can get back to me soon

Thanks

Add New Note to this Reply

Ross Moderator

#39033

Hi Paula

Ok, so I don’t know if its 100% possible to achieve this with Ajax enabled, but that depends on if the Enfold theme made it easy to access the JS methods.

This part you will have to figure out yourself.

Anyway in terms of where to add the JS, follow their instructions directly on adding a new JS script to the site:

http://www.kriesi.at/support/topic/custom-js/

Lets say you called it search-filter-custom-js.js

Then its contents would be:

( function( $ ) {
	$( document ).ready( function() {
	
		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
			console.log("ajax complete");
			//so load your lightbox or JS scripts here again
		});
	
	});
} )( jQuery );

The comment //so load your lightbox or JS scripts here again should be where you re-initialise any layout code like the code for your grid.

Thanks

Add New Note to this Reply

Nicholas Cameron

#46231

Paula
I am trying to do the same with enfold and S&F, but instead of a portfolio, I am working with posts. I am wondering if you got everything working and if you can share how it was done.
many thanks!
nick

Add New Note to this Reply

[Author]

Posts