Integrations / Platforms / Salesforce Commerce Cloud B2C / Connecting to Headless Salesforce Commerce Cloud Using PWA Kit

Connecting to Headless Salesforce Commerce Cloud Using PWA Kit

A headless architecture decouples a website’s user experience from the back end that processes ordering, payment, tracking, and fulfillment. This lets you change a site’s content and user interface without affecting the back end, and vice versa.

This guide shows how to combine Algolia and Salesforce Commerce Cloud in a headless architecture, using the Progressive Web App (PWA) Kit.

The architecture is as follows:

  • The Algolia Link Integration automatically indexes and syncs the Salesforce Commerce Cloud products catalog in an Algolia index.
  • The PWA Kit storefront uses React InstantSearch widgets to create a first-class search and discovery experience for users. It includes the Salesforce Commerce Cloud product catalog, but could extend to any other content indexed in Algolia, like blog posts, FAQs, and orders.

It’s a three-step process:

  1. Install the Algolia Link Integration.
  2. Index your catalogs.
  3. Connect to your PWA storefront.

This guide assumes that you already have a PWA Kit storefront connected to your Salesforce Commerce Cloud instance. See Get Started with Progressive Web App Kit to get started.

The Algolia Link Integration contains four cartridges that work together.

Unlike SiteGenesis or Storefront Reference Architecture (SFRA) architectures, headless architectures use server-side cartridges:

  • int_algolia: handles the export of your product information from Salesforce Commerce Cloud to Algolia
  • bm_algolia: lets you control and configure Algolia indexing from your Business Manager

To complete the installation, follow the installation guide.

Index your catalogs

To index your catalogs, follow the indexing guide.

After indexing, you can see your indexed catalogs in the Indices section of the Algolia dashboard.

Connect to your PWA Kit storefront

Once you’ve indexed your data, you can add a search user interface to your PWA Kit storefront with React InstantSearch.

Install Algolia libraries

First, install the Algolia JavaScript API client and React InstantSearch library to your project.

Copy 
1

npm install algoliasearch react-instantsearch-dom

In the header of your HTML, add the stylesheets:

Copy 
1
2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/reset-min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/satellite-min.css">

You can also use a library such as React Helmet to inject the CSS in the document’s <head>.

Create your search page

In <root>/app/pages/, create a search/directory with the following files:

  • search/index.jsx
  • search/_style.scss
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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, for example, the brand attribute.

  1. Select the product index in the Indices section of your Algolia dashboard.
  2. Go to Configuration > Facets and add the attribute to the Attributes for faceting, for example,brand, and save your changes.
  3. In your front-end code, import the RefinementList component into your Search component to add it the search experience.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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;

Search through content from multiple sources

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

Copy 
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

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>
);
Previous
Connecting to headless Salesforce Commerce Cloud using a React front end
Next
Monitoring
Did you find this page helpful?