Code Amp

Hey @jprichard sorry for the delay, was caught up in a few things last week.

So the outline to get this working would look something like:

1. Assume you are using two different layouts (set to use the same search form)
2. In each layout, make sure to add a custom class in the layout sidebar, we’ll use my-layout-1 and my-layout-2 as an example.
3. Then we need to override the ajax container attribute of the search form (the results area), and tell it to use (first layout) .my-layout-1. We can do that using:

add_filter( 'search_filter_form_attributes', 'update_ajax_container', 20, 2 );
function update_ajax_container ( $attributes, $sfid ) {
	// If the search form ID is not 3784, exit
	if ( $sfid !== 3784 ) {
		return $attributes;
	}
	// The search form id is 3784 so proceed with modification:
	$attributes['data-ajax-target'] = '.my-layout-1';
	return $attributes;
}

I would go ahead and test this, and make sure that after doing the above, only the first layout is updated when using ajax.

—-

Once that is working, then we can head onto linking the second layout – my-layout-2

4. This is the part that’s totally undocumented (it was also only added in a recent release) – we can tell S&F to update any other area of page in the ajax request – so we’re going to set this to to the second layout class with this code:

$attributes['data-ajax-update-sections'] = wp_json_encode( [
	'.my-layout-2',
] );

Adding this to the previous code, in total, it should look like:

add_filter( 'search_filter_form_attributes', 'update_ajax_container', 20, 2 );
function update_ajax_container ( $attributes, $sfid ) {
	// If the search form ID is not 3784, exit
	if ( $sfid !== 3784 ) {
		return $attributes;
	}
	// The search form id is 3784 so proceed with the modifications:
	
	// Connect the first layout and set it as the results area
	$attributes['data-ajax-target'] = '.my-layout-1';
	
	// Add an additional layout to be updated:
	$attributes['data-ajax-update-sections'] = wp_json_encode( [
		'.my-layout-2',
	] );
	
	return $attributes;
}

I *think* that will get you on the right path – let me know if it works out for you? We might need to run the layout javascript again (something I can explain)

And if it does work out, no doubt we’ll need to do a couple of tweaks for pagination too… let me know.

Thanks

• This reply was modified 4 years, 1 month ago by Code Amp.
• This reply was modified 4 years, 1 month ago by Code Amp.

Thanks @markoreklaam !

As I didn’t hear back from you I’m going to ahead and close this ticket.

Feel free to re-open when you have further information.

Thanks

Hey @fariazz

At the moment there is no way to do this – I’ll stick on this on the feature requests and see if it’s something we can add a little further down the road.

Thanks

Hey @herondino apologies for the delay!

I just checked your link and looks like you figured it out with an additional (empty) element, and some clever CSS?

🙂

Heu @fergumungus – apologies I didn’t see this come through.

There will always be a way to override the CSS if I can see what you’re working with.

Regarding the font, I believe that is now set to inherit by default so it works better with the fonts loaded in different themes.

Do you have a link I could look at?

Thanks

Hey @cbitner – you can achieve this kind of functionality via our pro (paid for) search & filter plugin – setup instructions are here:
https://searchandfilter.com/documentation/search-results/custom-layouts/