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.
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?
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!