Front-End (UI/UX)

Whether you use the Algolia cartridge for SiteGenesis (int_algolia_controllers and algolia_sg_changes) or SFRA (int_algolia_sfra), we provide you with a boilerplate which is ready to customize and match the look and feel of your site.

Autocomplete

We use the autocomplete widget for InstantSearch.js to display the autocomplete of our search-as-you-type experience. It suggests products and categories by default.

You can find the configuration for autocomplete in:

• int_algolia/cartridges/int_algolia_sfra/cartridge/static/default/js/algolia/autocomplete-config.js for SFRA
• int_algolia/cartridges/int_algolia_controllers/cartridge/static/default/js/algolia/autocomplete-config.js for SiteGenesis

Category and search results page

We make use of the following InstantSearch.js widgets to display results on your search page:

• infiniteHits - A list of products matching the query.
• sortBy - A switch to toggle between different product sorts (usually replicas of your product index).
• rangeInput - A widget to filter by price range.
• hierarchicalMenu - A menu to refine the category of the products.
• refinementList - A menu to refine by a facet (eg. brand, color, size).
• panel - A virtual widget to toggle other faceting widgets.

Check out our interactive showcase to see all the InstantSearch.js widgets you can use.

You can customize the default boilerplate to fit the look and feel of your site, and add extra features. You can do this in the following file:

• int_algolia/cartridges/int_algolia_sfra/cartridge/static/default/js/algolia/instantsearch-config.js for SFRA.
• int_algolia/cartridges/int_algolia_controllers/cartridge/static/default/js/algolia/instantsearch-config.js for SiteGenesis.

We render the page using a controller. You can customize the controller in the following file:

• int_algolia/cartridges/int_algolia_sfra/cartridge/controllers/Search.js for SFRA.
• int_aloglia/cartridges/algolia_sg_changes/cartridge/controllers/Search.js for SiteGenesis.