Home
Documentation
HCL Commerce is a high-availability, highly scalable and customizable e-commerce platform. Able to support hundreds of thousands of transactions per day, HCL Commerce allows you to do business with consumers (B2C) or directly with businesses (B2B). HCL Commerce uses cloud friendly technology to make deployment and operation both easy and efficient. It provides easy-to-use tools for business users to centrally manage a cross-channel strategy. Business users can create and manage precision marketing campaigns, promotions, catalog, and merchandising across all sales channels. Business users can also use AI enabled content management capabilities.
Samples
Topics in the Samples category highlight the various samples that are provided with HCL Commerce.
Store samples
HCL Commerce includes sample storefront designs that illustrate the use of the remote store model.
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.
React store mock data
In the React store SDK, you can create your own custom mock data for store development.

Documentation
HCL Commerce is a high-availability, highly scalable and customizable e-commerce platform. Able to support hundreds of thousands of transactions per day, HCL Commerce allows you to do business with consumers (B2C) or directly with businesses (B2B). HCL Commerce uses cloud friendly technology to make deployment and operation both easy and efficient. It provides easy-to-use tools for business users to centrally manage a cross-channel strategy. Business users can create and manage precision marketing campaigns, promotions, catalog, and merchandising across all sales channels. Business users can also use AI enabled content management capabilities.
- Getting started
  HCL Commerce has different advantages for business users, administrators and developers. HCL Commerce targets each of these roles with a tailored set of offerings so that each of your users can get maximum benefit.
- Installing and deploying
  Learn how to install and deploy HCL Commerce development environments and HCL Commerce production environments.
- Migrating
  Before you migrate to HCL Commerce Version 9.1, review this information to help plan and execute your migration.
- Operating
  Topics in the Operating category highlight tasks that are typically performed by business users, customer support representatives, to complete their day-to-day tasks in the operation of the HCL Commerce site.
- Integrating
  Topics in the Integrating category highlight the tasks that are commonly performed for using HCL Commerce in combination with other products.
- Administering
  Topics in the Administering category highlight tasks that are typically performed by the Site Administrator, to support daily operations of the HCL Commerce site.
- Customizing
  The topics in the Customizing section describe tasks performed by an application developer to customize HCL Commerce.
- Tutorials
  HCL Commerce provides many tutorials to help you customize and understand your HCL Commerce instance and stores.
- Samples
  Topics in the Samples category highlight the various samples that are provided with HCL Commerce.
  - Store samples
    HCL Commerce includes sample storefront designs that illustrate the use of the remote store model.
    - Aurora starter store
      The Aurora starter store showcases the latest in storefront features, and models best practices in store development, demonstrating a wide scope of retail scenarios. Simplify your responsive B2C or B2B web store implementation and reduce your time-to-market by using the Aurora starter store as your development base.
    - Extended sites starter store
      Use an extended sites starter store to get started on setting up an extended sites solution that will allow your selling organization to provide unique storefronts for different enterprise customers or showcase a number of branded storefronts.
    - 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.
      - Adding browsing history for React-based stores.
        You can display recently viewed products (browsing history) using a new Page Composer tool for React-based stores. This document gives the steps to add "Browsing history" to your default Emerald store home page.
      - Emerald (B2C) Reference Store application site flows
        The Emerald (B2C) Reference Store application is a B2C eSite Headless React store with new EmeraldCAS & EmeraldSAS and provides a sample implementation of some commonly used store pages. It also includes:
      - Sapphire (B2B) Reference Store application site flows
        The Sapphire (B2B) Reference Store application is a B2B eSite Headless React store with ExtendedSitesCatalogAssetStore & SapphireSAS. It provides a sample implementation of some commonly used pages.
      - My account page
        The My Account page displays the personal details, recent order details and other account tools of the registered shoppers and enables them to edit their personal information page and reorder their past orders items.
      - The Customer Service Hub
        The Customer Service hub, also known as the CSR tool, provides your Customer Service Representatives (CSRs) an authority to manage Accounts and Orders for a selected store.
      - React store mock data
        In the React store SDK, you can create your own custom mock data for store development.
        Adding custom or new mock data
        Refer to the following two examples to add new mock data for GET and POST REST API call.
      - Multiple Payment for React Stores
        Prior to Version 9.1.9.0, shoppers buying products in React stores could only place an order using a single payment method. But with the introduction of the multiple payment option, they can pay a part of the total cart value by using various payment options such as cash on delivery or credit cards.
      - Multiple Shipment for React stores
        Prior to HCL Commerce Version 9.1.7.0, the shoppers purchasing products via react-based stores could only place an order for a single shipping address. However from HCL Commerceversion 9.1.7.0 and onwards, shoppers can choose a multiple shipment option when placing an order. This document provides information on the multiple shipment facility provided to shoppers for the Emerald and Sapphire stores.
      - In-progress orders and shared orders
        From HCL Commerce Version 9.1.9.0 onwards, B2B react store users have the ability to keep multiple orders in the same buyer organization. If you are a registered buyer, you can manage orders other than your own cart.
      - Requisition Lists page for Sapphire (B2B)
        Shoppers can use requisition lists to periodically reorder the same items. They can add frequently ordered items to a private or shared requisition lists. To use this feature on your Sapphire B2B store, they must navigate to Your Accounts > Dashboard and click Requisition List in the Order Management section.
      - Ribbon ads for React based stores
        A ribbon ad is an image overlay ad that is displayed over the thumbnail image of catalog entries. This ad contain text that describes shared characteristics of the catalog entries to draw the attention of shoppers.
      - Locating a nearby store using the Store Locator feature
        The Store Locator feature allows the shopper to easily locate a physical store of their choice by using online maps. This feature is especially designed to enable them to physically pick up the products bought online, from a store of their choice.
      - Using the Buy Online Pickup In Store (BOPIS) feature
        The BOPIS feature allows shoppers to pick up the products purchased online from a physical store of their choice, without any pickup charges.
      - Multiple Quick Checkout profiles
        The Quick Checkout profile page allows registered shoppers to predefine a separate billing address and shipping address. When the profile is completed, shoppers can use the quick checkout feature that auto-populates the billing and shipping addresses when they check out.
      - EmeraldPlus and SapphirePlus Reference Store application
        The reference B2C (EmeraldPlus) store application and a reference B2B (SapphirePlus) store applications are enabled for integration with HCL Digital Experience.
      - Using the Wish List feature
        The Wish List feature allows shoppers to create wish lists, add items to a wish list, perform group actions on the products and preview the recent products. Once the items are added to the wish list they can be moved to the check out flow.
      - Registering a seller in Marketplace
        Marketplace sellers can self-register for one or more marketplaces approved by the Operator using the following steps.
      - Upgrading the Material UI JavaScript to version 5
        Use the Git bundle source to upgrade the Material UI JavaScript to version 5.
      - Parameters to publish a Reference React store
        You can use the values in the examples provided to publish the Reference React Emerald B2C store and the Reference React Sapphire B2B store.
    - Next.js starter store
      The Next.js store offers customizable features for storefronts using the Next.js framework. It uses the same data template as the ReactJS stores and supports business-to-consumer (B2C) and business-to-business (B2B) use cases. The store includes pages for browsing, shopping, checkout, and account management, and uses Elasticsearch for search functions.
  - Access control policy samples
    The following access control policy samples show you how some basic access control policies can be used in the development environment, so that you can quickly test new resources. They are not designed to be used as-is on an HCL Commerce production environment, as they do not provide adequate resource protection.
- Compliance
  The following section describes how you can leverage HCL Commerce features and functionality to help your site be compliant with different privacy and security standards.
- Securing
  These topics describe the security features of HCL Commerce and how to configure these features.
- Performance
  Topics in the Performance section describe the means by which to plan, implement, test, and re-visit the optimization of HCL Commerce site performance.
- Troubleshooting
  Topics in the Troubleshooting section highlight common issues that are encountered with HCL Commerce, and how they can be addressed or mitigated.
- Reference
  Topics in the Reference section contain all of the HCL Commerce reference documentation.

React store mock data

In the React store SDK, you can create your own custom mock data for store development.

Running react store in mock mode

Run the React store application in development mode using mock REST services data by running npm run mock command. This command will start the React application with the default Emerald store.

To start with a different store such as Sapphire, use the following command.

npm run mock -- --appName <storeName>

The React store application uses the mockserver npm library. Upon running the above command, by default the mock server will be started on port 9002 pointing to the mocks folder for providing mock responses. For more details, see tools/mockServer.js file.

For more information about mockserver, see the link mockserver documentation and github-mockserver documentation.