Set up the Algolia cartridge
Install using the command line
-
Download the cartridge source from the Algolia Code Exchange.
-
Extract the directory.
-
Install the dependencies from the extracted directory:
Copy1 2
cd /path/to/unzipped/folder npm install
-
Create a
dw.json
file in the same directory with the following content:Copy1 2 3 4 5 6
{ "hostname": "...", "username": "...", "password": "...", "code-version": "..." }
hostname
the hostname of your sandbox—for example:"zzgk-001.sandbox.us01.dx.commercecloud.salesforce.com"
username
andpassword
are your account manager credentialscode-version
is the active code version listed in Administration > Code Deployment—for example,"SFRA_AP_05_15_2020"
-
Upload the cartridges:
Copy1
npm run uploadCartridge
-
Go to Administration > Development Setup > Folder Browser > Cartridges and verify that the Algolia cartridges are uploaded.
Install via Salesforce UX Studio
-
Download the cartridge source from the Algolia Code Exchange.
-
Establish a new digital server connection with your Salesforce B2C Commerce instance.
-
Import the cartridges to a workspace in Salesforce UX Studio.
-
Select the cartridges you want to add and click Finish.
-
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
-
Go to Administration > Sites > Manage Sites.
Select your site from the Storefront Sites list:
-
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.SiteGenesis
- Add
algolia_sg_changes:int_algolia_controllers
to the beginning of your cartridge path. - Add
int_algolia
to the end of your cartridge path.
Headless
Add
int_algolia
to the beginning of your cartridge path. - Add
Add the Algolia cartridges to the Business Manager
-
Go to Administration > Sites > Manage Sites and select Business Manager.
-
In Settings, add
bm_algolia:int_algolia
at the end of your cartridge path.
Import metadata
-
Go to Administration > Site Development > Site Import & Export and upload the
algolia.zip
archive from themetadata
folder. -
Select
algolia.zip
and click Import. -
Confirm that the import is successful.
Set Algolia custom preferences for your site
-
Go to Merchant Tools > Site Preferences > Custom Preferences.
-
In Custom Site Preferences Groups, select Algolia.
-
In the Enable Algolia option, select Yes.
-
Enter your Application ID, Search API Key and Admin API Key. You can find them in the Algolia dashboard
-
Set the Read Host Base Url to
https://sfcc-stream.algolia.com
. -
Set up your custom fields—or attributes—from the list of attributes. You should start with the following attributes:
name
,short_description
,long_description
,price
,brand
,color
,size
andimage_groups
. -
Enter your OCAPI credentials:
- OCAPI client ID:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
, - OCAPI client password:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
.
These are placeholder credentials. For the Algolia cartridges, it’s important that you declare these credentials, but the values themselves aren’t important. You can enter any string.
- OCAPI client ID:
Add service credentials
- Go to Administration > Operations > Services > Service Credentials > algolia.http.api.cred.
-
In the URL field, add
https://sfcc-stream.algolia.com
. You can leave the User and Password fields empty.
To prevent your logs from overflowing, only turn on communication logs when you need them.
Enable Algolia in the Business Manager
-
Go to Administration > Organization > Roles & Permissions.
-
Select the role for which you’d like to enable access, such as, Administrator.
-
Go to Business Manager Modules.
-
Select Algolia and click Update.
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.
-
In
app_storefront_base/cartridge/templates/default/common/htmlHead.isml
, add the following code on line 32:Copy1
<isinclude template="algolia/headerScripts" />
-
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:Copy1 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>
-
In
app_storefront_base/cartridge/templates/default/search/searchResult.isml
, replace this line:Copy1
<isinclude template="search/searchResultsNoDecorator" />
with the following code:
Copy1 2 3 4 5
<isif condition="${pdict.algoliaEnable}"> <isinclude template="algolia/search/searchResultsNoDecorator" /> <iselse/> <isinclude template="search/searchResultsNoDecorator" /> </isif>