Integrations / Platforms / Magento 2 / Front End (UI/UX)
May. 10, 2019

Front End (UI/UX)

Custom Theme

By default, the extension will try to override the topSearch block of the template in use. In case a custom theme is implemented which doesn’t contain the topSearch block, the DOM selector of the search input needs to be changed. This can be achieved by navigating to Stores > Configuration > Algolia Search > Advanced.

With this setting filled, the extension will not try to override the topSearch block, and will only load the scripts necessary. This will require updating of the styles to give the autocomplete menu the desired look and feel.

Autocomplete Menu

To display the as-you-type search, we make use of the Autocomplete.js widget for InstantSearch.js. By default, the menu will suggest products, categories, and pages when a user is searching. To configure which and how many items should be displayed, navigate to Stores > Configuration > Algolia Search > Autocomplete.

Autocomplete feature configuration

If the configuration settings provided are not enough to fully configure the autocomplete search as required, the underlying template will need to be edited. There’s a guide available which explains this process.

Results Page

To display the results page for the as-you-type search, we make use of InstantSearch.js.

By default, the results page is disabled to prevent your template from breaking. It can be enabled by navigating to Stores > Configuration > Algolia Search > Credentials & Setup.

To see all widgets offered by InstantSearch.js, check out our interactive showcase.

By default, the following widgets are enabled:

  • Hits - A list of products matching the users’ query
  • Pagination - Navigation links between the results pages
  • Sorting - A switch to toggle between different product sorts
  • Price Range Slider - A slider to refine the price range of the products
  • Hierarchical Menu - A menu to refine the category of the products

To add any other widgets to the results page, the underlying template needs to be changed. More information on how this process works can be found in our guide on updating the InstantSearch Results Page.

To configure the displayed data and any other refinements that may be useful to Magento shop, navigate to Stores > Configuration > Algolia Search > Instant Search Results Page.

InstantSearch feature configuration

On this page, the attributes used as facets can be configured. These will determine the filters available.

To read more about faceting and how it works, check out the documentation on filtering.

The attributes that are available for sorting can also be configured on this page. Be mindful about this: each sorting attribute will create a new index.

To read more about sorting and how it works, check out the documentation on sorting.

Did you find this page helpful?