Autocomplete Menu

Introduction

In order to customize the autocomplete drop-down menu appearing underneath the search bar, there’s one essential folder from which the code should be changed. From the root directory of your Magento project, the necessary files can be found in vendor/algolia/algoliasearch-magento-2/view/frontend. This folder contains all the templates, JavaScript, and stylesheets in use.

Changing Looks

Styling

We provide a default style sheet, algoliasearch.css. This CSS can be overridden by a custom style sheet to change the look and feel of the search according to your needs.

Structuring

Sometimes, to change the look of the search, structural changes have to be introduced to the HTML code by editing some of the templates.

Search Box Template

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

Dropdown Template

To change the appearance of the dropdown appearing under the search bar, multiple files need to be edited. These files can all be found in the autocomplete folder of the extension.

The files that are included when rendering the dropdown are:

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

Changing Behavior

All logic of the autocomplete.js can be adjusted by making use of all events provided by our plug-in. The plug-in will call your custom logic at the right moment.

The events can be used to modify data sources and options. The modified values will be used by our plug-in after your logic has been executed.

Some quick examples:

1
2
3
4
5
// modify default sources
algolia.registerHook('beforeAutocompleteSources', (sources, algoliaClient) => sources);

// modify default options
algolia.registerHook('beforeAutocompleteOptions', options => options);