🎉 Try the public beta of the new docs site at algolia.com/doc-beta! 🎉
Integrations / Salesforce Commerce Cloud B2C

Set up the Algolia cartridge

Install using the command line

  1. Download the cartridge source from the Algolia Code Exchange.

  2. Extract the directory.

  3. Install the dependencies from the extracted directory:

    Copy 
    1
2

     cd /path/to/unzipped/folder
 npm install

  4. Create a dw.json file in the same directory with the following content:

    Copy 
    1
2
3
4
5
6

    {
  "hostname": "...",
  "username": "...",
  "password": "...",
  "code-version": "..."
}
    • hostname the hostname of your sandbox—for example: "zzaa-001.sandbox.us01.dx.commercecloud.salesforce.com"
    • username and password are your account manager credentials
    • code-version is the active code version listed in Administration > Code Deployment—for example, "SFRA_AP_05_15_2020"

  5. Upload the cartridges:

    Copy 
    1

    npm run uploadCartridge

  6. Go to Administration > Development Setup > Folder Browser > Cartridges and verify that the Algolia cartridges are uploaded.

Install with Salesforce UX Studio

  1. Download the cartridge source from the Algolia Code Exchange.

  2. Establish a new digital server connection with your Salesforce B2C Commerce instance.

  3. Import the cartridges to a workspace in Salesforce UX Studio.

    Importing Algolia Cartridge in Salesforce UX studio Workspace

  4. Select the cartridges you want to add and click Finish.

    Adding Algolia Cartridge to Project Reference

  5. Wait until Salesforce UX Studio uploads the cartridge to your B2C Commerce instance.

Enable the cartridges on your site

Algolia provides the following cartridges to integrate with your Salesforce B2C Commerce storefronts:

Cartridge name Purpose
int_algolia Import your product information from B2C Commerce to Algolia
bm_algolia Monitor and configure Algolia indexing from your Business Manager
int_algolia_controllers algolia_sg_changes Add Algolia InstantSearch to your SiteGenesis storefront
int_algolia_sfra Add Algolia InstantSearch on your SFRA storefront

Add the Algolia cartridges to your site

  1. Go to Administration > Sites > Manage Sites.

    Select your site from the Storefront Sites list:

    Storefront List

  2. In Settings, add the cartridges that match your site’s architecture:

    SFRA

    Add int_algolia_sfra:int_algolia to the beginning of your cartridge path.

    Add the Algolia cartridge to the SFRA site installation cartridge path

    SiteGenesis

    1. Add algolia_sg_changes:int_algolia_controllers to the beginning of your cartridge path.
    2. Add int_algolia to the end of your cartridge path.

    Headless

    Add int_algolia to the beginning of your cartridge path.

    Add the Algolia cartridge to the SiteGenesis site installation cartridge path

Add the Algolia cartridges to the Business Manager

  1. Go to Administration > Sites > Manage Sites and select Business Manager.

    Business Manager

  2. In Settings, add bm_algolia:int_algolia at the end of your cartridge path.

    Add the Algolia cartridge to the Business Manager installation cartridge path

Enable Algolia in the Business Manager

  1. Go to Administration > Organization > Roles & Permissions.

  2. Select the role for which you’d like to enable access, such as, Administrator.

    Configure Algolia Service roles

  3. Go to Business Manager Modules.

    Configure Algolia in the Business Manager

  4. Select Algolia and click Update.

Import metadata

  1. Go to Administration > Site Development > Import & Export and click Upload under Import & Export files.

  2. Upload both files from the metadata/algolia/meta folder by clicking Choose File, then Upload. Do this for both custom-objecttype-definitions.xml and system-objecttype-extensions.xml.

    Import metadata to your instance

  3. Go back to Administration > Site Development > Import & Export and click Import under Meta Data.

  4. Select custom-objecttype-definitions.xml, click Next, then Import.

  5. Click Import under Meta Data and import system-objecttype-extensions.xml as well.

  6. Confirm that the import is successful:

    Metadata import successful

Import jobs and services

  1. Go to Administration > Operations > Import & Export and click Upload under Import & Export files

  2. Upload both files from the metadata/algolia folder by clicking Choose File, then Upload. Do this for both jobs.xml and services.xml.

  3. Go back to Administration > Operations > Import & Export and click Import under Jobs.

  4. Select jobs.xml and click Next, Next, then Import.

  5. Click Import under Services.

  6. Select services.xml and click Next, Next, then Import.

  7. Confirm that the import is successful:

    Jobs and services import successful

Set Algolia custom preferences for your site

  1. Go to Merchant Tools > Algolia > Algolia.

    Configure Algolia custom preferences

  2. Enable Algolia by checking the checkbox next to Enable Algolia.

  3. Enter your Application ID, Search API Key and Admin API Key. Find them in the Algolia dashboard.

    Consider using restricted API keys for security reasons. For more information see API key restrictions.

  4. Specify which Additional Product Attributes you would like to index, including additional attributes from the list here. Consider starting with the following attributes: short_description, long_description, then expanding the list according to your use case (for example brand, color, size).

    The following attributes are always sent: name, primary_category_id, categories, url, image_groups, in_stock, price. You can extend this list with the Additional Product Attributes preference.

For more information, see Custom preferences.

Update your templates

You need to update your templates, if your site uses a SiteGenesis or SFRA architecture AND you haven’t enabled the Algolia cartridge. The Algolia cartridges already include these updates. If you are using a headless architecture, see Headless storefronts.

  1. In app_storefront_base/cartridge/templates/default/common/htmlHead.isml, add the following code on line 32:

    Copy 
    1

    <isinclude template="algolia/headerScripts" />

  2. In app_storefront_base/cartridge/templates/default/components/header/search.isml, add the following code at the start of the file, and move existing the code to an <iselse> section:

    Copy 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <isset name="algoliaData" value="${require('*/cartridge/scripts/algolia/lib/algoliaData')}" scope="page" />
<isif condition="${algoliaData.getPreference('Enable')}">
  <div class="site-search">
    <div id="suggestions-wrapper"
         data-category="${pdict.cgid}"
         data-category-display-name-path="${pdict.categoryDisplayNamePath}"
         data-category-display-name-path-separator="${pdict.categoryDisplayNamePathSeparator}"
         data-q="${pdict.q}"
         data-search-page-root="${URLUtils.http('Search-Show')}"></div>

    <input
      type="search"
      id="aa-search-input"
      class="aa-input-search form-control"
      placeholder="${Resource.msg('label.header.searchwatermark', 'common', null)}"
      name="search"
      autocomplete="off"
    />

  </div>
<iselse/>
    <!-- existing code from the template -->
</isif>

  3. In app_storefront_base/cartridge/templates/default/search/searchResult.isml, replace this line:

    Copy 
    1

    <isinclude template="search/searchResultsNoDecorator" />

    with the following code:

    Copy 
    1
2
3
4
5

    <isif condition="${pdict.algoliaEnable}">
  <isinclude template="algolia/search/searchResultsNoDecorator" />
<iselse/>
  <isinclude template="search/searchResultsNoDecorator" />
</isif>
Previous
Introduction
Next
Start indexing your data
Did you find this page helpful?