Integrate Algolia into the storefront sample app

This guide describes how to connect Algolia to a headless Salesforce B2C Commerce storefront with the storefront sample app.

Salesforce deprecated the sample app and recommends using the Progressive Web App (PWA) Kit.

To set up Algolia for your headless Salesforce B2C Commerce storefront, see Headless commerce.

Download and run the SFCC storefront sample app

1. Clone the sample app GitHub repository:

   Shell

   Copy

   1
   git clone --depth=1 https://github.com/SalesforceCommerceCloud/sfcc-sample-apps
   

2. Follow the setup instructions to create a frontend with the native search.

Download and compile Unified InstantSearch

1. Clone the Unified InstantSearch GitHub repository into the packages/ directory.

2. Delete the unified-instantsearch-ecommerce/.git directory from the unified-instantsearch-ecommerce directory.

   Shell

   Copy

   1
   2
   3
    cd sfcc-sample-apps/packages
    git clone --depth=1 https://github.com/algolia/unified-instantsearch-ecommerce
    rm -rf unified-instantsearch-ecommerce/.git
   

3. Install the dependencies and compile.

   Shell

   Copy

   1
   2
   3
   cd sfcc-sample-apps/packages/unified-instantsearch-ecommerce
   npm install
   npm run export
   

This creates a new folder unified-instantsearch-ecommerce/export which contains the assets you need for a working search in the sample app.

Import Unified InstantSearch into the sample app

1. Add the Unified UI assets to be copied into the storefront-lwc package. Edit the file packages/storefront-lwc/scripts/plugin-copy-assets.js:

   JavaScript

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
    /* inside packages/storefront-lwc/scripts/plugin-copy-assets.js */
   
    const ASSETS = {
        'src/assets/favicon.ico': 'favicon.ico',
        'src/assets/manifest.json': 'manifest.json',
        'src/assets/fonts/': 'fonts/',
        'src/assets/images/': 'images/',
        'src/assets/img/': 'img/',
   +    '../unified-instantsearch-ecommerce/export/': 'algolia_unified_ui/',
    };
   

   Now, building storefront-lwc automatically imports Unified UI files.

2. Include the new files in the index.html file:

   HTML

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
       <!-- inside packages/storefront-lwc/src/index.html -->
   
       <link rel="manifest" href="/manifest.json" />
       <link rel="shortcut icon" href="/favicon.ico" />
       <link rel="stylesheet" href="/css/global.css" />
   
   +   <link rel="stylesheet" href="/algolia_unified_ui/search.css" />
   +   <script src="/algolia_unified_ui/search.js"></script>
   

3. Create a new Lightning Element that serves as a host for the Algolia Unified UI. In the directory packages/storefront-lwc/src/modules/, create the following files:

   Shell

   Copy

   1
   2
   mkdir -p packages/storefront-lwc/src/modules/algoliaUnifiedUi
   touch packages/storefront-lwc/src/modules/algoliaUnifiedUi/algoliaUnifiedUi.{html,js,scss}
   

Add the following code to the files algoliaUnifiedUi.html and algoliaUnifiedUi.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export default class AlgoliaUnifiedUi extends LightningElement {
   renderedCallback() {
       const productsIndexName = 'zzaa_001_sandbox_us01_dx__RefArch__products__en_US'; // Check to ensure this matches your products index's name
       const currencyCode = 'EUR';

       window.UnifiedUI.start({
           inputContainer: this.template.querySelector('.site-search'),
           keyboardShortcuts: false,
           appId: '<Your Algolia application ID>',
           searchApiKey: '<Your Algolia Search-only API Key>',
           currencyCode,
           index: {
               indexName: productsIndexName,
               searchParameters: {
                   analytics: true,
                   clickAnalytics: true,
                   hitsPerPage: 18,
                   attributesToSnippet: ['short_description:25'],
               },
           },
           sorts: [
               {
                   label: 'Price ascending',
                   value: `${productsIndexName}__price_${currencyCode}_asc`,
               },
               {
                   label: 'Price descending',
                   value: `${productsIndexName}__price_${currencyCode}_desc`,
               },
           ]
       });
  }
}

1
2
3
<template>
    <div class="site-search"></div>
</template>