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, the extension uses the autocomplete 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.
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 > Instant Search Results Page.
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.
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.
Back-end facets
We removed this feature in version 3.x for Magento 2.4 compatibility.
To use our back-end rendering features, please install a legacy version and see our Magento 2.4 compatibility documentation for more information.
In case you don’t want to use the default front-end rendering using InstantSearch, the extension lets you replace the native Magento facets with a UI that looks like the InstantSearch one. It also replaces the native sortings by the ones configured in the Algolia extension (they will automatically target the corresponding product’s index replicas).
To activate this feature, which is disabled by default, you must go in the InstantSearch configuration and ensure that: Enable Backend facet rendering is on. This is only available when InstantSearch is not enabled. Otherwise, the facets are already replaced by the InstantSearch ones.
As soon as you enable this feature, you need to configure the facets in the Algolia’s extension’s configuration.
When enabling this feature, make sure that every attribute you choose in the facets list is configured as Use in Layered Navigation for categories, and Use in Search Result Layered Navigation for Catalog Search. This configuration is available in the Stores > Attributes > Product > Storefront Properties panel of attribute configuration in the Magento back office.
This approach offers several benefits:
- It gives you an alternative if don’t want to use InstantSearch.
- It replaces the Magento native facets and lets you select more than one value per facet with checkboxes.
- It lets you use the native search result item template, and override it in a standard Magento way.
- It displays the configurable options as directly selectable from the list.
- It lets you natively use the Add to wishlist and Add to compare buttons.
