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:
- Install the Algolia Link Integration.
- Index your catalogs into Algolia.
- 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.
Install the Algolia Link Integration
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 Algoliabm_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.
1
npm install algoliasearch react-instantsearch-dom
In the header of your HTML, add the style sheets:
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 asearch/directory with the following files:
search/index.jsxsearch/_style.scss
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.
- 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. - In your
Searchcomponent, import theRefinementListcomponent and add it to the search experience.
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.
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>
);
