Skip to main content
Algolia lets you enable Query Suggestions to suggest popular search terms for your users. By default, the extension indexes search terms from Adobe Commerce and Magento Open Source and displays them in the Autocomplete menu. This guide shows you how to replace the Magento suggestions with Algolia’s query suggestions in the autocomplete menu. To use Query Suggestions:
1

Enable suggestions in Adobe Commerce and Magento Open Source

To nable the suggestions in the Autocomplete menu, go to Stores > Algolia Search > Autocomplete Menu in your back-office.Autocomplete Magento adminChange the suggestions with these settings:
  • Number of queries (0 by default): Maximum number of results shown in the autocomplete menu. Setting a value greater than 0 automatically activates the feature.
  • Minimum query popularity (1000 by default)
  • Minimum number of results per query (2 by default)
The last two 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.
2

Get the Magento suggestions to work

Clear the Magento cache and run a suggestions reindex:
php bin/magento algolia:reindex:suggestions
Check your search to see if the Magento suggestions are showing up.Autocomplete Magento frontend
3

Create an Algolia Query Suggestions index

To create a Query Suggestions index:
  1. Go to your Algolia dashboard:
  2. Click Query Suggestions
  3. Click New Query Suggestions Query Suggestions form
  4. Choose an index name (this guide uses query_suggestions_test).
  5. Select the different languages you’re using and the source index (for example, your main product index).
  6. Click Accept and Continue to create the Query Suggestions index.
After a few seconds, your new index will be available. Go the “indices” section in the Algolia dashboard to find it between your other indices.Query Suggestions index
4

Replace the default suggestions index with the Query Suggestions index

To use Algolia’s Query Suggestions, you will need to use the appropriate frontend hooks provided by the extension.You can find some examples of frontend hooks usage in the custom extension guide.For details of how to turn off default suggestions, see Indexing suggestions.To contain the required frontend hooks, create a new Magento module (for example Algolia_CustomAlgolia) or install the freely available starter extension that you can customize further for your app.
The Autocomplete library was upgraded from v0 to v1 as of 3.8.0 of the Algolia Search Integration for Magento extension. Depending on your installed version, a different approach to customization will be required. In general, it’s best to run the latest version of the extension.

​
Customize latest version

Query suggestions are implemented by a plugin. To customize, use the afterAutocompletePlugins frontend hook provided by the extension.
To ensure your customized plugin loads, enable query suggestions in the Magento configuration by setting “Number of queries” to a value greater than 0 in Stores > Configuration > Algolia Search > Autocomplete Menu.
Create the view/frontend/web/js/hooks.js file and register it in requirejs-config.js:
JavaScript
const config = {
  map: {
    "*": {
      algoliaHooks: "Algolia_CustomAlgolia/hooks",
    },
  },
};
Create and customize the following hook to your needs:
JavaScript
algolia.registerHook("afterAutocompletePlugins", (plugins, searchClient) => {
  // Obtain the index of the existing suggestions plugin
  const pluginIndex = plugins.findIndex(
    (plugin) => plugin.name === "aa.querySuggestionsPlugin",
  );
  if (pluginIndex > -1) {
    // Replace the entire plugin
    plugins[pluginIndex] =
      algoliaBundle.createQuerySuggestionsPlugin.createQuerySuggestionsPlugin({
        searchClient,

        // Build your suggestions index
        indexName: "query_suggestions_test",

        // Configuration options for the search performed against the index
        getSearchParams() {
          return {
            hitsPerPage: algoliaConfig.autocomplete.nbOfProductsSuggestions,
          };
        },

        // Be sure to pass your suggestionsHtml dependency via RequireJS in your hooks.js file
        transformSource({ source }) {
          return {
            ...source,

            // For keyboard navigation
            getItemUrl({ item }) {
              return algoliaConfig.resultPageUrl + `?q=${item.query}`;
            },

            // JavaScript templates to render your suggestion hits
            templates: {
              noResults({ html }) {
                return suggestionsHtml.getNoResultHtml({ html });
              },
              header({ html, items }) {
                return suggestionsHtml.getHeaderHtml({ html });
              },
              item({ item, components, html }) {
                return suggestionsHtml.getItemHtml({ item, components, html });
              },
              footer({ html, items }) {
                return suggestionsHtml.getFooterHtml({ html });
              },
            },
          };
        },
      });
  }

  return plugins;
});
This hook has three tasks:
  • Extract the index of the existing query suggestions plugin that needs replacing.
  • Instantiate a new plugin containing the new index for the Query Suggestions data (for example the query_suggestions_test index created previously).
  • Provide all definitions related to presentation and behavior (templates, search parameters, and keyboard navigation).
After this, clear the Magento cache and you should be able to see the Query Suggestions inside your Autocomplete Menu.

​
Customize versions 3.7 and earlier

Use the beforeAutocompleteSources frontend hook provided by the extension. In your custom module, create the view/frontend/layout/algolia_search_handle.xml file and add the following to the <head> section:
HTML
<script src="Algolia_CustomAlgolia::hooks.js" />
Create the view/frontend/web/js/hooks.js file and implement the logic for your hook there, or paste the contents of this gist in the file.
JavaScript
/**
 * Documentation: https://community.algolia.com/magento/doc/m2/frontend-events/
 **/

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

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.