Integrations / Platforms / Salesforce Commerce Cloud B2C / Connecting to Headless Salesforce Commerce Cloud Using Mobify

Connecting to Headless Salesforce Commerce Cloud Using Mobify

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.

There are several ways to create a headless architecture with Salesforce Commerce Cloud. This guide shows how Algolia and Salesforce Commerce Cloud can combine into a headless architecture, with a Mobify-powered storefront.

The architecture is as follows:

  • The Algolia Link Integration automatically indexes and syncs the Salesforce Commerce Cloud products catalog in an Algolia index.
  • The Mobify 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 3-step process:

  1. Install the Algolia Link Integration.
  2. Index your catalogs into Algolia.
  3. Connect to a headless storefront.

This guide assumes that you already have a Mobify storefront connected to your Salesforce Commerce Cloud instance. If it isn’t the case, please start with the Get started section of Mobify’s documentation.

The Algolia Link Integration contains four cartridges that work together to fit various uses cases.

Unlike SiteGenesis or Storefront Reference Architecture (SFRA) architectures, Headless architectures use the “server-side” cartridges, namely: int_algolia and bm_algolia.

  • int_algolia: handles the import 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, please follow the instructions in the installation guide.

Index your catalogs

To index your catalogs, please follow the instructions in the indexing guide.

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

Connect to a Mobify storefront

Once you’ve indexed your data, you can build a search UI to your Mobify 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 style sheets:

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

  1. 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 your filter products based on specific attribute values, such as the brand attribute.

  1. In your Algolia dashboard, select your product index in the Indices section. Then go to Configuration > Facets > Attributes for faceting, add the attribute brand, and save your changes.
  2. In your Search component, import the RefinementList component and add it to 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?