Customize instantsearch.php with FSE theme?

Hi

I know internally we don’t have a solution yet/overall. We do have this open issue on GitHub though with more information about what’s been tried and everything.

https://github.com/WebDevStudios/wp-search-with-algolia/issues/216

Most specifically starting at https://github.com/WebDevStudios/wp-search-with-algolia/issues/216#issuecomment-1706772452 where I attempted to do some template parts and the like.

Months later, I’m kind of wondering if we’d need to completely break away from the solitary PHP template file and instead have all the javascript aspects be in an enqueued file and then all the markup that it ties into, be somehow output as part of the search FSE files. Perhaps block patterns that match up with Algolia widgets.

At this point I’m still just brainstorming and have nothing concrete in any way.

Michael,
Thanks for the update. Yes, the PHP template file is great for use out of the box, but it necessarily requires customization to work with a theme. One idea I had was to simply copy/paste the HTML from the instantsearch.php file into a Custom HTML block in my search template, but that failed readily, probably because the javascript was not duly enqueued.

Theoretically there could be a “Algolia Search Results” block or something like that, which could be put into a FSE page or pattern. That could be elegant, but it’s hard for me to guess whether or not it would be ideal.

I look forward to seeing what you come up with.

Just did a test with TwentyTwentyTwo theme, which I think is the first FSE theme.

I put this portion from the instantsearch.php file into the search.html file replacing everything between the wp:template-part calls for header and footers.

https://github.com/WebDevStudios/wp-search-with-algolia/blob/2.7.0/templates/instantsearch.php#L16-L72

Next, I took all the code from the rest of the instantsearch.php file, specifically these: https://github.com/WebDevStudios/wp-search-with-algolia/blob/2.7.0/templates/instantsearch.php#L75-L208

and added them to the output via the traditional wp_footer action hook.

Along with that, I added these two lines as well to that output:

wp_enqueue_style( 'algolia-instantsearch' );
wp_enqueue_script( 'algolia-instantsearch' );

So that those libraries will be loaded for you.

It seems to be working for me, at least with some initial testing. Hopefully it provides some leads on how to achieve this to greater degree for you?

• This reply was modified 10 months, 3 weeks ago by Michael Beckwith.

Cross posted notes about this over on the https://github.com/WebDevStudios/wp-search-with-algolia/issues/216 ticket.

Fantastic! Yes, this seems to work. And just to clarify, I’ve set the plugin to “Use Algolia with the native WordPress search template” so that it uses the modified search template in the FSE theme, not the instantsearch.php file.

This solution obviously still involves some custom coding, but at least it lets me use patterns and so forth for the layout and styling from within the Site Editor, so that’s a great improvement. Thanks!

In case anyone is following along, here’s the custom function I added to conditionally load all these scripts only on the search page. The function my_algolia_footer(), not shown, simply echos the javascript code from instantsearch.php as Michael described.

function my_search_conditional_loader() {
    if ( is_search() ) {
		add_action( 'wp_footer', ‘my_algolia_footer' );
		wp_enqueue_style( 'algolia-instantsearch' );
		wp_enqueue_script( 'algolia-instantsearch' );
	}
}
add_action( 'template_redirect', ‘my_search_conditional_loader' );

“Use Algolia with the native WordPress search template” so that it uses the modified search template in the FSE theme, not the instantsearch.php file.

Logically, it should work with the “Do not use Algolia” option as well, since in my example, I manually loaded all of the markup and js that makes instantsearch work. Your use of that setting would also have WP Search with Algolia override search queries with WP_Query and normal searches.

I suspect using the template_include hook instead of template_redirect would work as well, but as long as you’re getting results, that’s what matters.

I’d say the TLDR here is that if someone is willing to take some things in their own hands over our traditional customization methods, it can work in FSE.