Front-End (UI/UX)

Whether you use the Algolia cartridge for SiteGenesis (int_algolia_controllers and algolia_sg_changes) or SFRA (int_algolia_sfra), you’re provided with a “boilerplate”, which you can customize to match the look and feel of your site.

Autocomplete

Algolia uses the autocomplete widget for InstantSearch.js to display an autocomplete “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

Algolia’s Salesforce Commerce Cloud integration uses 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 (for example, brand, color, size).
• panel - A virtual widget to toggle other faceting widgets.

Check out the interactive showcase to see all the InstantSearch.js widgets.

Customize the default boilerplate to fit the look and feel of your site, and add extra features 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.

The page is rendered with a “controller”. You can customize the controller in the following file:

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