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 integration by writing a custom method algoliaHookBeforeAutocompleteStart(sources, options, algoliaClient) in your JS file. If this method is defined in your code, it will be called by the extension right before it initializes the autocomplete feature.

In this method you can modify the datasources and options variable which are then used by autocomplete menu.

Example of the method:

1
2
3
4
function algoliaHookBeforeAutocompleteStart(sources, options, algoliaClient) {
  // modify default sources and options as you want
	return [sources, 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.