Integrate Algolia into the storefront sample app

​

Download and run the SFCC storefront sample app

1. Clone the sample app GitHub repository:
   Command line

   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.
   Command line

   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.
   Command line

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

​

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:
   Command line

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

// 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`,
        },
      ],
    });
  }
}

<!-- algoliaUnifiedUi.html -->
<template>
  <div class="site-search"></div>
</template>

​

Click and conversion events