Autocomplete Menu Customization

Customize the autocomplete drop-down menu which appears underneath the search bar on your Magento site.

There are three folders involved in the drop-down menu customization:

1. your-base-magento-folder/app/design/frontend/base/default/template/algoliasearch
2. your-base-magento-folder/js/algoliasearch
3. your-base-magento-folder/skin/frontend/base/default/algoliasearch

In the first one, you can find all the extension templates. In the others, you’ll find the extension’s JavaScript and stylesheets.

Make sure you aren’t modifying but overriding these files. You can learn how to do that by reading “How to customize the extension” first.

Search box template

To change the search bar appearance, navigate to the templates directory and locate the autocomplete.phtml file. This file is the standard Magento template and is used only when you use the default (.algolia-search-input) search box selector.

Drop-down templates

To edit all templates used in autocomplete menu, navigate to the extension’s template folder and there to the autocomplete folder.

In there you will find the templates used to render the drop-down menu:

• menu.phtml - contains the drop-down menu’s layout
• product.phtml - template of a single product
• category.phtml - template of a single category
• page.phtml - template of a single page
• suggestion.phtml - template of a single popular query
• attribute.phtml - template used for any extra content configured in the administration area

Customize the integration (JavaScript)

You can adjust all the logic of the autocomplete.js by using the events provided by our plugin. The plugin calls your custom logic at the right moment.

You can use the events to modify data sources and options. These hooks are triggered right before the autocomplete feature initializes.

Example of the hooks:

1
2
3
4
5
6
7
8
9
algolia.registerHook('beforeAutocompleteSources', function(sources, algoliaClient, algoliaBundle) {
  // Modify default sources, then return them
  return sources;
});

algolia.registerHook('beforeAutocompleteOptions', function(options) {
  // Modify default options, then return them
  return options;
});

Look & feel

The extension provides default CSS rules which are located in the algoliasearch.css file in the extension’s CSS folder.

You can easily override existing rules or add your own in your custom CSS theme file.