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:

   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.

   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.

   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

   // 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

   <!-- 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:

   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:

JavaScript

// algoliaUnifiedUi.js
export default class AlgoliaUnifiedUi extends LightningElement {
  renderedCallback() {
    // Ensure this matches your products index's name
    const productsIndexName =
      "zzaa_001_sandbox_us01_dx__RefArch__products__en_US";
    const currencyCode = "EUR";

    window.UnifiedUI.start({
      inputContainer: this.template.querySelector(".site-search"),
      keyboardShortcuts: false,
      appId: "ALGOLIA_APPLICATION_ID",
      searchApiKey: "ALGOLIA_SEARCH_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`,
        },
      ],
    });
  }
}

Click and conversion events

To complete your setup, send click and conversion events.