Frontend (UI/UX)
Whether you’re using the SiteGenesis (int_algolia_controllers and algolia_sg_changes) or Storefront reference architecture (int_algolia_sfra) cartridges,
Algolia provides a set of configuration files, which you can customize to match the look and feel of your site.
Autocomplete
Algolia’s Salesforce B2C Commerce cartridge uses the Autocomplete library to provide a search-as-you-type experience. It suggests products and categories by default.
The Autocomplete configuration is in the following files:
- SFRA.
int_algolia/cartridges/int_algolia_sfra/cartridge/static/default/js/algolia/autocomplete-config.js - SiteGenesis.
int_algolia/cartridges/int_algolia_controllers/cartridge/static/default/js/algolia/autocomplete-config.js
Category and search results page
Algolia’s Salesforce B2C Commerce integration uses the following InstantSearch.js widgets to display results on your search page:
| Widget | Description |
|---|---|
infiniteHits |
A list of products matching the query |
sortBy |
A switch to toggle between different product sorts |
rangeInput |
A price range filter |
hierarchicalMenu |
A menu to refine the category of the products |
refinementList |
A menu to refine by a facet—for example, brand, color, or size |
panel |
Used to toggle other faceting widgets |
Customize the defaults to fit the look and feel of your site, and add extra features in the following files:
- SFRA.
int_algolia/cartridges/int_algolia_sfra/cartridge/static/default/js/algolia/instantsearch-config.js - SiteGenesis.
int_algolia/cartridges/int_algolia_controllers/cartridge/static/default/js/algolia/instantsearch-config.js
The page is rendered with a “controller”. You can customize the controller in the following files:
- SFRA.
int_algolia/cartridges/int_algolia_sfra/cartridge/controllers/Search.js - SiteGenesis.
int_algolia/cartridges/algolia_sg_changes/cartridge/controllers/Search.js
Click and conversion events
To complete your setup, see Click and conversion events.
