The Amplience Salesforce Composable Commerce app is a storefront technology for headless commerce using Amplience APIs, Salesforce Commerce and OCAPI APIs, and React. It provides front-end developers with a more flexible and agile approach to build and maintain modern eCommerce experiences with the use of Amplience.
This version of the SF Retail React app integrates Amplience as the Content CMS to:
- drive all site content, PLP in-grid content, site navigation, product page content and footer links
- shoppable content components for rich media like images and video
- schedule & preview all content
- real-time visualisation of all content
- real-time visualisation of content sizing & placement within product listing grids
- content personalisation based on a user's groups
- enhanced search suggestions and search results page with content, products and category parents
- automation scripts to load required content schemas and types to your Content HUB
- Stylitics components for configuration in content not code
- Image Studio integration
- Content Studio integration
The documentation starting here below is 'as-is' from Salesforce. For Amplience specifics please see the docs listed under Amplience Contents.
- Amplience Configuration
- Amplience API
- Visualisation
- Preview
- Amplience Account
- Automation
- Localisation
- Navigation
- Product Listing Page (PLP) Management
- Product Details Page (PDP) Management
- Personalisation (Customer Groups)
- Personalised Experiences
- Global Site Search
Note: This code is built against the code version of PWAKit v2.7.3 released on June 20th 2023 for Node 18: https://github.com/SalesforceCommerceCloud/pwa-kit/releases/tag/v2.7.3
If you are using an earlier version, please consider upgrading your codebase to match this for Node 18 support.
By default we point to the same SFCC instance as the vanilla Retail React app. If you are pointing to your own SFCC sandbox, you should ensure that you have localisation enabled. See guide at Localization README.md, Overview and Salesforce Commerce Cloud Setup.
There is currently no 'out of the box' API available that enables you to see which customer groups a user is associated to for Content Personalisation. To enable Content Personalisation on your own sandbox, please follow the steps to install our cartridge which enables a hook to get the required information via OCAPI.
Please ensure that your SFCC sandbox has the Amplience Hooks Bridge Cartridge installed with the correct OCAPI permissions as per the documentation.
Note: When the Salesforce Shopper Context API is out of BETA, the code examples may change to make use of this API.
The Retail React App is a project template that includes an isomorphic JavaScript storefront and Progressive Web App built using React and Express. It uses a modern headless architecture that enables developers to decouple front-end code from back-end systems. It leverages popular open-source libraries in the React ecosystem, such as Chakra UI components, Emotion (CSS-in-JS), Webpack, and many more.
Developers don’t have to worry about the underlying infrastructure, whether they’re developing their app locally, deploying it to a Managed Runtime environment, or testing the app live.
- Node 18.x
- npm 9.x
To start your web server for local development, run the following command in your project directory:
npm startNow that the development server is running, you can open a browser and preview your commerce app and go to http://localhost:3000.
See the Localization README.md for important setup instructions for localization.
The Retail React App's configuration files are located in the app/config folder. For more details, see Configuration Files in the documentation.
The full documentation for PWA Kit and Managed Runtime is hosted on the Salesforce Developers portal.