Integrate Algolia with the Progressive Web App Kit

This guide describes how to integrate Algolia into the Salesforce Progressive Web App (PWA) Kit for headless commerce.

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

Connect to your PWA Kit storefront

After indexing your data with Algolia, you can add search to your PWA Kit storefront with React InstantSearch.

Install Algolia libraries

1. Install the Algolia JavaScript API client and React InstantSearch library:

   Shell

   Copy

   1
   npm install algoliasearch react-instantsearch-dom
   

2. Add the style sheet to the header of your HTML:

   HTML

   Copy

   1
   2
   3
   4
   <link 
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.1.0/themes/satellite-min.css"
   >
   

Create your search page

In your project directory, create a new directory app/pages/search/ with the following files:

• search/index.jsx
• search/_style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// search/index.jsx
import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
   InstantSearch,
   SearchBox,
   Hits,
   Pagination,
} from 'react-instantsearch-dom';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

const Search = (props) => {
   return (
      <InstantSearch searchClient={searchClient} indexName="YourIndexName">
         <SearchBox />
         <Hits />
         <Pagination />
      </InstantSearch>
   );
};

export default Search;

Add a facet filter

Faceting lets you filter products based on specific attribute values, such as, the brand attribute.

1. Go to the Algolia dashboard and select your product index.
2. On the Configuration tab, go to Facets and add the attribute to the Attributes for faceting.
3. Save your changes.
4. In your frontend code, add the <RefinementList /> component to your <Search /> component.

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
// search/index.jsx
import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
   InstantSearch,
   SearchBox,
   Hits,
   Pagination,
+  RefinementList,
} from 'react-instantsearch-dom';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

const Search = (props) => {
   return (
      <InstantSearch searchClient={searchClient} indexName="YourIndexName">
         <SearchBox />
+        <RefinementList attribute="brand" />
         <Hits />
         <Pagination />
      </InstantSearch>
   );
};

export default Search;

Federated search

Beyond products and categories, you can create a federated search experience with data from other Algolia indices. In the following example, Algolia returns articles from Salesforce Commerce Cloud Communities.

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
// search/index.jsx
import algoliasearch from 'algoliasearch/lite';
import {
   InstantSearch,
   SearchBox,
   Hits,
   Configure,
   Index,
} from 'react-instantsearch-dom';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

const Search = () => (
   <InstantSearch searchClient={searchClient} indexName="YourProductsIndex">
      <SearchBox />
      <Configure hitsPerPage={5} />
      <Index indexName="YourProductsIndex">
         <Hits />
      </Index>
      <Index indexName="YourCategoriesIndex">
         <Hits />
      </Index>
      <Index indexName="YourArticlesIndex">
         <Hits />
      </Index>
   </InstantSearch>
);