Reference React stores

The Store SDK includes a reference B2C (Emerald) store application and a reference B2B (Sapphire) store application. Use these Reference Store applications to develop and deploy your own React Store applications.

Important: The Emerald and Sapphire React-based stores are provided only as a reference for front-end developers.

The Store SDK provides a set of foundational React components for interacting with HCL Commerce business logic that can be used as the basis for creating and managing your custom store and allows front end developers to focus on customizing and replacing the display and view aspects of the store. All aspects of the React Store application, including the foundation, are customizable by web developers and are provided as references to interact with HCL Commerce REST APIs and session management.

The Reference Store applications include:

A framework for pages and React-based components
The Common Single Page Application (SPA) model with B2C and B2B components (common and unique components)
A page structure that is managed within React-based components and JSON
Product and category pages with SEO-friendly URLs
Metadata managed from the Management Center for HCL Commerce
Support for the use of Progressive Web Application (PWA)

Note: From HCL Commerce Version 9.1.9.0 onwards, the tabular contents are highly responsive to mobile screens (phone, tablets, etc.) as well as desktop screens. This ensures that there is no disturbance to the tabular content viewing experience when you switch from a desktop to a mobile screen or vice versa.

Note: The Reference Store applications support the latest browsers. If you want to support earlier versions of browsers, you must use workarounds that enable the earlier versions to support the new features available in the latest versions of the browsers. For example:

http://cdnjs.cloudflare.com/polyfill - This is a service which accepts a request for a set of browser features and returns only the polyfills that are needed by the requesting browser.
https://github.com/philipwalton/flexbugs - This repository is a community-curated list of flexbox issues and cross-browser workarounds for them.

Functionality available in Reference Store applications

The React B2C and B2B Headless stores demonstrate the utilization of various functionalities and features available in HCL Commerce:

ElasticSearch V2 catalog REST APIs
ElasticSearch SEO REST APIs
Commerce Transaction service REST APIs
Marketing content and promotions
Marketing activities for page view and click actions
Session management via WC tokens

Deploying the Reference Store application

The Reference Store application, Emerald (B2C) and Sapphire (B2B), are provided within the Store-Web IHS Docker container for convenience (IHS V9.0.5.3). The Docker container contains the Emerald and Sapphire Reference Store applications and content assets.

HCL Digital Experience enabled Reference Store applications

From v9.1.4 onwards, the Store SDK also includes a reference B2C (EmeraldPlus) store application and a reference B2B (SapphirePlus) store application. These Reference Store applications are enabled for integration with HCL Digital Experience. For more information, see EmeraldPlus and SapphirePlus Reference Store application.