Integrations / Salesforce Commerce Cloud B2C

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.

Did you find this page helpful?