Integrations / Platforms / Magento 2 / Autocomplete Menu
Aug. 23, 2019

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).

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:

Changing Behavior

You can adjust all the logic of the autocomplete.js by making use of all events provided by our plug-in. 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.

Some quick examples:

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

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

Did you find this page helpful?