Change Algolia Autocomplete sources by location in WordPress

Over the past year and a half, I’ve gotten to work with Algolia Search a lot. Whether it’s been through client work wanting to integrate their content through Algolia, or myself helping handle support on the WP Search with Algolia Github and Support Forums, I’ve been able to dig in a lot more with how it all works.

About five months ago at the time of this post, someone posted a thread named “Use of Algolia in two different parts” and what they were looking for is summed up as such:

I have 2 separated search boxes.
one search box for products.
one search box for blog posts.

Admittedly, I didn’t have an answer for him at the time, but I didn’t rule out whether or not it was possible. I’m also not posting here today saying that I’ve finally sat down and worked out how to do what this person was asking about. I am posting a similar solution that sort of fits what they were going for.

What I’m going to do here is show how to conditionally change the sources that Algolia AutoComplete will consider, depending on WordPress conditionals.

Setting up our conditionals

For our tutorial here, I only have Autocomplete configured for the post post type and the page post type. You’ll need to configure things further in the event you have more than just those two, to make sure the rest are still considered.

Say that I only want to have Autocomplete suggest blog posts when viewing the blog posts page, a single post, or the category and tag archive. To achieve this, we’re going to add some inline script that stores a javascript constant of Autocomplete indexes to search.

function algolia_support_conditional_sources() {
    $desired_sources = [];

    if ( is_home() || is_single() || is_category || is_tag() ) {
        $desired_sources[] = 'posts_post';
    }

    wp_add_inline_script( 'algolia-autocomplete', 'const wanted_autocomplete_sources = \'' . json_encode( $desired_sources ) . '\'; ');
}
add_action( 'wp_enqueue_scripts', 'algolia_support_conditional_sources' );

Here we are constructing a PHP array that stores the index ID for the posts autocomplete index. You can find the index IDs listed as “index name” when you visit /wp-admin/admin.php?page=algolia in your own website, and check the “Index” column.

Now, say I want to do the same for pages, where when on a page, only make suggestions for other pages. We do very similar to what we did above. Below is an amended version of our callback.

function algolia_support_conditional_sources() {
    $desired_sources = [];

    if ( is_home() || is_single() || is_category || is_tag() ) {
        $desired_sources[] = 'posts_post';
    }

    if ( is_page() ) {
        $desired_sources[] = 'posts_page';
    }

    wp_add_inline_script( 'algolia-autocomplete', 'const wanted_autocomplete_sources = \'' . json_encode( $desired_sources ) . '\'; ');
}
add_action( 'wp_enqueue_scripts', 'algolia_support_conditional_sources' );

Customizing the autocomplete.php template

Now we’re ready to make use of this information. You will need to customize the autocomplete.php template file that we ship with the plugin. You can read more about how to do that at Customize the Autocomplete dropdown wiki page

By the time you read this blog post, version 2.3.x of WP Search with Algolia will very likely already be released, and for the tutorial I’ll be using the autocomplete.php copy from that release.

We want to find the lines that look like this:

/* Setup autocomplete.js sources */
var sources = [];

and add the following right below it.

/* Setup autocomplete.js sources */
var sources = [];
var desired_sources = [];
if (typeof wanted_autocomplete_sources !== 'undefined') {
    desired_sources = JSON.parse(wanted_autocomplete_sources);
}

Here we are setting up an empty array, which will be important, and then also checking for our inlined constant declared earlier. If we have the constant, we are parsing its value out from its JSON. This should give us a populated desired_sources array now.

Only one more line down, you should see these:

algolia.autocomplete.sources.forEach( function( config, i ) {
    var suggestion_template = wp.template( config[ 'tmpl_suggestion' ] );
    sources.push( {
        ...
    } );

I have truncated a little bit for brevity. Here we will see a foreach loop running on all of the autocomplete sources that we’ve configured for the install. In this case, it’d be only post and page. What we need to do here is wrap the sources.push( { ... } ) calls in an if statement to start conditionally pushing our sources to look in.

if ( desired_sources.length === 0 || desired_sources.includes(config.index_id) ) {
    sources.push( {
        ...
    } );
}

Here we are checking if we have any desired sources configured at all. If no, then we push them all. This helps prevent NO sources being available in case of none conditionally set earlier. Finally we check if the currently iterated config index_id property is one of the ones in our desired sources. If yes, push that source.

If all went well, then I should now only be able to see blog posts suggested when on the blog page, single posts, or category/tag archives, and only see pages when on blog pages. Goal achieved!

Let me know of any questions you have in the comments.