Autocomplete Menu

The Algolia extension for Adobe Commerce and Magento Open Source uses autocomplete.js to create the menu that appears below the search bar. The extension handles:

• Setting up the basic configuration options
• Setting up the sources
• Providing templates to render matching results from the sources

You can find all templates, JavaScript files and stylesheets in the directory: vendor/algolia/algoliasearch-magento-2/view/frontend/web

Basic configuration options

You can change these options for your autocomplete menu:

Use the beforeAutocompleteOptions hook to change the autocomplete options. For example:

1
2
3
4
5
algolia.registerHook('beforeAutocompleteOptions', function(options)  {
  // Add or modify options, then return them
  options.debug = true;
  return options;
});

Sources

The autocomplete menu shows matching results from different sources. Each source has options to define which index to query, and the templates for rendering the matching results.

To change the sources, go to Stores > Configuration > Algolia Search > Autocomplete in the Magento admin dashboard. You can select these sources:

If you want to change an existing source or add a new source to the autocomplete menu, you need to use the beforeAutocompleteSources hook. The callback function for beforeAutocompleteSources must return the modified sources array, including the already configured sources.

For example:

1
2
3
4
algolia.registerHook('beforeAutocompleteSources', function(sources, algoliaClient, algoliaBundle)  {
    // Add or modify sources, then return them
    return sources;
});

Click events

When a user selects a search result, the autocomplete menu sends a click event to Algolia:

• If you enabled Click and conversion analytics
• If you configured Personalization

If you want to track custom events, see Custom front-end events.

Autocomplete menu template

When you update templates, it’s best to keep the changes in your theme directory. Don’t edit the theme files in the extension directory if possible. Follow Adobe Commerce theme development best practices.

To change the appearance of the autocomplete menu, edit these templates:

You can find all files in the autocomplete directory.

Autocomplete menu styles

If you want to change the style of the autocomplete menu, it’s best to enable the debug mode for autocomplete. This keeps the autocomplete menu open and lets you inspect the DOM elements in the autocomplete.

You can enable the debug mode in Stores > Configuration > Algolia Search > Autocomplete > Enable autocomplete menu’s debug mode.

Custom theme

By default, the extension overrides the topSearch block of the template. If you’re using a custom theme without the topSearch block, you need to update the DOM selector for the search input.

Go to Stores > Algolia Search > Advanced in the Magento Admin panel, and change the Search input DOM Selector:

If you defined the DOM selector, the extension won’t override the topSearch block and only loads the necessary scripts. To give the Autocomplete search-as-you-type menu the look and feel you want, you need to update the styles.