Two Layouts on same page

Hey @jprichard

So this might be a bit tricky to implement but not impossible if you’re happy to get stuck in with a bit of coding…

The issue is that both layouts are assigned to the same search form ID, and S&F only looks for the first instance of .search-filter-results-2965 after an ajax reqeuest, and updates both results layouts to use that.

If you’re comfortable implementing some hooks in PHP, I can talk you through a way to achieve what you’re after – but its got a few steps involved and uses an undocumented features in S&F pro (implementation is changing in v3, that’s why its undocumented).

If that sounds like what you’re after (?) then I can start collecting the various hooks we’ll need, and talk you through them.

Thanks

• This reply was modified 2 years, 11 months ago by Code Amp.

Thanks for the response @codeamp What you’re describing makes sense with what I’m seeing.

Coding is not a problem. Full disclosure, I am relatively new to PHP and still working through the basic syntax, but if you are able to provide the steps, I’m sure I can work through the implementation.

I appreciate the help. Let me know what I need to do on my end.

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 2 years, 11 months ago by Code Amp.
• This reply was modified 2 years, 11 months ago by Code Amp.

Thanks @codeamp !!! This worked like a charm – no layout issues. I have not populated the store enough to deal with pagination yet, but I’ll reach out if there are any issues. I appreciate the help.

Awesome, glad you’re setup and that all worked out!