Integrations / Platforms / Magento 2 / Implement Algolia's Query Suggestions

Implement Algolia's Query Suggestions

Requirements

Query Suggestions are available starting from the Enterprise plan. If you don’t have access to this feature, please consider upgrading to a higher plan.

Purpose

Algolia offers you the possibility to set Query Suggestions, which is a powerful tool. It allows to suggest popular search terms to your users. By default, our extension allows you to index suggestions coming from the Magento search terms and display them inside the autocomplete menu. This guide will show you how to replace the Magento suggestions with Algolia’s query suggestions in the autocomplete menu.

First, you have to enable the Magento query suggestions. After that, you need to create an Algolia suggestion index and replace the Magento suggestions with Algolia’s suggestions.

Enable the suggestions in the Magento configuration

Enabling the suggestions for the Autocomplete menu

You must first enable the suggestions inside the autocomplete menu. To do so, visit Stores > Algolia Search > Autocomplete Menu in your back-office.

Autocomplete Magento admin

There are a few different settings related to suggestions:

  • Number of queries (0 by default): setting a value greater than 0 will automatically activate the feature. It is the maximum number of results shown in the autocomplete menu.
  • Minimum query popularity (1000 by default)
  • Minimum number of results per query (2 by default)

The two last settings are related to Magento’s suggestions, so you don’t need to change these values for Algolia’s Query Suggestions. The settings for Algolia’s Query Suggestions are handled in the Algolia dashboard.

Get the Magento suggestions to work

Once you’ve enabled query suggestions, clear the Magento cache and run a suggestions reindex:

$
php bin/magento indexer:reindex algolia_suggestions

You can now check your search to see if the Magento suggestions are showing up.

Autocomplete Magento frontend

That’s all for the Magento configuration, let’s create our Query Suggestions index inside the Algolia dashboard.

Create the Query Suggestions index in the Algolia dashboard

To create a Query Suggestions index, you need to go to your Algolia dashboard and:

  • Click on “Query suggestions”
  • Click on “New query suggestions”

Query Suggestions form

First, choose an an index name (for this tutorial, we’ll choose query_suggestions_test). Select the different languages you’re using and the source index (for example, your main product index). You can click “Accept and Continue” to create the Query Suggestions index.

After a few seconds, your new index will be available. You can navigate to the “indices” section in the Algolia dashboard to find it between your other indices.

Query Suggestions index

Replace the default suggestions index by the Query Suggestions index

To use Algolia’s Query Suggestions, we have to use the beforeAutocompleteSources frontend hook provided by the extension.

You can find some examples of frontend hooks usage in the custom extension guide.

First of all, create a new Magento module (for example Algolia_CustomAlgolia). In this module, create the view/frontend/layout/algolia_search_handle.xml file and add the following to the <head> section:

1
<script src="Algolia_CustomAlgolia::hooks.js" />

Create the view/frontend/web/hooks.js file and implement the logic for your hook there, or paste the contents of this gist in the file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 * Documentation: https://community.algolia.com/magento/doc/m2/frontend-events/
 **/

/**
 * Autocomplete hook method
 * autocomplete.js documentation: https://github.com/algolia/autocomplete.js
 **/

algolia.registerHook('beforeAutocompleteSources', function(sources, algoliaClient, algoliaBundle) {

  // Parsing the different autocomplete source to find the suggestions one
  for (var i = 0; i < sources.length; i++) {
    if (sources[i].name === 'suggestions') {
      // Setting the new index containing the Algolia Query Suggestions
      var index = algoliaClient.initIndex('query_suggestions_test'),
        suggestionsSource = algoliaBundle.$.fn.autocomplete.sources.hits(index, {
          hitsPerPage: algoliaConfig.autocomplete.nbOfQueriesSuggestions
        });

      // Replacing the data for the suggestions source
      sources[i] = {
        source: suggestionsSource,
        displayKey: 'query',
        name: 'suggestions',
        templates: {
          suggestion: function (hit) {
            hit.url = algoliaConfig.baseUrl + '/catalogsearch/result/?q=' + hit.query;

            return algoliaConfig.autocomplete.templates.suggestions.render(hit);
          }
        }
      };

      break;
    }
  }

  return sources;
});

This hook has three tasks:

  • Map over the different sources of the Autocomplete menu, to find the Magento’s default suggestions source that needs to be replaced.
  • Instantiating a new source containing the Query Suggestions data (inside the query_suggestions_test index created previously).
  • Overriding the source with the created data.

After this, you have to clear the Magento cache one last time and you’ll be able to see the Query Suggestions inside your Autocomplete Menu.

Did you find this page helpful?