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
Display color swatches
Color swatches are enabled by default when you use the product-level record model.
For the variant-level record model, some extra information must be added to the records.
To ensure that the Algolia integration for Salesforce B2C Commerce can display the colors of all variants, each variant record must contain the images for each color.
For that, you must add the colorVariations additional attribute.
Click and conversion events
To complete your setup, see Click and conversion events.
Content search UI
Integrating content pages enhances the user experience by broadening the search scope. To incorporate relevant content pages into your search results:
- Index your content pages
- Select Enable content search in the Algolia Business Manager Module.
Your site’s search capabilities have now been enhanced in two notable ways:
- Autocomplete: a new section has been added which provides relevant content suggestions to users.
- InstantSearch: a new tab has been added which lets users browse content page results. The tab isn’t displayed if there are no content page results.
To align content search with your site’s design and user experience, you can customize the appearance and behavior by modifying the same configuration files used for category and search result pages.
