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.
Customizing
The topics in the Customizing section describe tasks performed by an application developer to customize HCL Commerce.
Creating your custom store
After you install and set up your programming environment, you can create your custom store and customize your storefront. You must ensure that the store server is properly configured, and that your store assets are moved to the Store server.
Creating a custom store using React
You can create a React single page application Store using the HCL Commerce Store SDK that is provided for pages and react components. The Store SDK allows your front end developers to quickly develop and deploy a Store while focusing on creating the best user experience possible.
Customizing your home page
When the React Store application homepage is launched, the React Router considers the relative path and loads the respective page component configured for that path.

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.
  - Customizing Management Center for HCL Commerce
    HCL Commerce allows you to pull the GIT bundle of Management Center source code and start the application locally to customize the Management Center.
  - Managed asset deployment
    Managed assets are files that are uploaded by business users to be used for store marketing, or to supplement products. They are added to HCL Commerce through the Assets tool or the Marketing tool in Management Center. By default, managed assets are extracted and deployed through the HCL Commerce EAR. To maintain performance in a large-scale production environment, site administrators must switch to alternative extraction and deployment methods for managed assets.
  - HCL Commerce development environment
    HCL Commerce Developer is the development toolkit for customizing a HCL Commerce application.
  - Functional architecture
    Functional architecture provides both the set of patterns used to implement the business functionality and the frameworks in which these business functions execute.
  - Persistent object model
    HCL Commerce deals with a large amount of persistent data. There are numerous tables defined in the current database schema. Even with this extensive schema, however, you might need to extend or customize the database schema for your particular business needs.
  - Creating your custom store
    After you install and set up your programming environment, you can create your custom store and customize your storefront. You must ensure that the store server is properly configured, and that your store assets are moved to the Store server.
    - Creating a custom store using JSP
      This HCL Commerce store uses Java Server Pages (JSP) to implement the view layer of the Model-View-Controller (MVC) design pattern.
    - Creating a custom store using React
      You can create a React single page application Store using the HCL Commerce Store SDK that is provided for pages and react components. The Store SDK allows your front end developers to quickly develop and deploy a Store while focusing on creating the best user experience possible.
      - React Store architecture
        The React Store architecture is based on a Single Page Application (SPA) model whereby the browser loads the React JavaScript as an application, executes an HTTP request to retrieve data and renders the storefront UI. The model is a client-centric headless Store model that makes API calls to scalable services provided by the HCL Commerce Transaction server and HCL Commerce Search server.
      - Publishing a React Store
        The site administrator must first publish the React Store data model by using the Gradle script and the starterstores/EmeraldDataTemplate.zip template.
      - Downloading the HCL Commerce Store SDK
        HCL Commerce provides a standalone Store SDK with Reference Store applications that is based on the Node.js react-app. The Store SDK is completely independent of the HCL Commerce toolkit.
      - Store SDK and application configurations
        The HCL Commerce 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 application, including the foundation, are customizable by front end developers and are provided as references to interact with HCL Commerce REST APIs and session management.
      - Store SDK structure
        The Store SDK contains all the components, widgets, UI forms, and so on, that are required to start developing your custom React store.
      - Customizing your home page
        When the React Store application homepage is launched, the React Router considers the relative path and loads the respective page component configured for that path.
      - Using e-Marketing spots
        The React Store single page application (SPA) contains e-Marketing spots which reserve areas on store pages for displaying personalized marketing content from activities. e-Marketing spots on pages allow business users to change the content easily.
      - Search engine optimization
        Search engine optimization (SEO) allows shoppers to find your site content more effectively through search engines. The React Store application supports SEO URLs that use keywords and metadata and can be managed by business users directly from the Management Center.
      - Email Templates and Notifications
        The Store SDK contains email templates to send order confirmation, order cancellation, and order shipment notification emails. It also contains email templates for password reset request notifications, password change notifications, and to support shopper email activation scenarios.
      - Previewing the store
        You can use store preview to ensure that changes that are made in Management Center show up in your store as expected. The store preview for a React Store works similar to the store preview for a JSP Store.
      - Managing digital assets
        HCL Commerce does not provide any tools to manage digital assets for the React Stores and recommends that you use a third party digital asset management tool such as HCL Digital Experience. As such, catalog and marketing assets, images and attachments should simply be managed as fully qualified URLs with Management Center or through the data load processes.
      - Managing content in HCL Digital Experience
        HCL Commerce integration with HCL Digital Experience allows digital assets managed within HCL Digital Experience to be utilized anywhere within the HCL Commerce storefront..
      - Supporting multiple languages for your store
        The Reference Store applications support multiple languages by using the language parameters langId or locale.
      - Organization and buyer administration flows (B2B)
        In the B2B business model, each company that purchases from your store must have one or more registered users who are assigned the Buyer Administrator role. You can also assign the Buyer Approver role to users. The B2B Reference Store application (Sapphire) provides a link to the Management Center for Buyer Administrators and Buyer Approvers to complete the tasks that are assigned to them.
      - Building and deploying the store
        The custom React Store application is built as a React SPA static model and can be deployed to any web server of your choice. The Store SDK build process supports the building of multiple apps.
      - HCL Customer Service Hub for HCL Commerce React stores
        HCL Customer Service Hub for HCL Commerce provides customer service enhancements that enable a customer service representative (CSR) to resolve common issues and capture orders. These capabilities are built into the HCL Commerce Reference Store application and enable a CSR to complete key tasks on behalf of guest and registered customers for headless stores that are built based on the Emerald and Sapphire reference stores. Customer Service Hub for HCL Commerce is offered for Enterprise edition.
      - Page Composer for React store
        You can create a React Store using the HCL Commerce Store SDK that is provided for pages and react components. The Store SDK allows your front end developers to quickly develop and deploy a Store specially Sapphire and Emerald while focusing on creating the best user experience possible.
    - Creating a custom store using Next.js
      You can create a server-side rendered storefront using the HCL Commerce Next.js Store SDK. The Next.js Store SDK allows your front end development of a storefront using an easy extension paradigm.
    - Email templates and sitemap generator
      An email template is a pre-designed format for creating consistent emails. Notifications are messages that inform users about events or updates related to a service or application.
  - Presentation layer
    HCL Commerce uses Java Server Pages (JSP) to implement the view layer of the Model-View-Controller (MVC) design pattern. The view layer is in charge of retrieving data from the database through the use of data beans and formatting it to meet the display requirements. The view layers determines whether the request is sent to a browser or streamed out as XML. JSP files present a clean separation between data content and presentation.
  - Controller layer
    The Controller layer is the conductor of operations for a request. It controls the transaction scope and manages the session related information for the request. The controller first dispatches to a command and then calls the appropriate view processing logic to render the response.
  - Business logic layer
    The business logic layer is the business components that provide OAGIS services to return data or start business processes. The presentation layer uses these OAGIS services to display data, or to invoke a business process. The business logic provides data required by the presentation layer. The business logic layer exists because more than just fetching and updating data is required by an application; there is also additional business logic independent of the presentation layer.
  - Persistence layer
    The interaction between the business objects and persistence layer is isolated in an object called the Business Object Mediator. Business object document (BOD) commands interact with the Business Object Mediator to handle the interaction with the logical objects and how they are persisted.
  - Business model information model
    A business model, a representation of the business processes used throughout the site, provides a sample commerce solution which includes an organization structure, default user roles and access control policies, one or more starter stores, administration tools, and business processes that demonstrate best practices. A business model can be customized to support business requirements and scenarios. HCL Commerce provides sample business models that show some common commerce solutions. These business models are created by setting up an organization hierarchy structure, access control policies, stores, and contracts that help satisfy the necessary business requirements.
  - Business models
    Before starting to develop your site with HCL Commerce, you need to determine the business model supported by HCL Commerce that best represents the purpose of your site. Usually sites created with HCL Commerce will be implemented based on of one of these business models.
  - Store data information model
    Store data is the information that is loaded into the Transaction server database, which allows your store to function. The URL Registry Entries and View Registry Entries packages are included in the diagram, but they are not database assets. These entries are presentation configuration (that is, struts actions and forwards) that must be deployed. URL registry entries are shown in the diagram to illustrate the entire store data information model. To operate properly, a store must have the data in place to support all customer activities. For example, in order for a customer to make a purchase, your store must contain a catalog of goods for sale (catalog data), the data associated with processing orders (tax and shipping data), and the inventory to fulfill the request (inventory and fulfillment data).
  - Customizing HCL Commerce
    You can extend the HCL Commerce product to fit your business needs. This topic describes the prerequisite skills and required knowledge that you need to customize business logic. After you have the required knowledge, use HCL Commerce Developer to take tutorials that guide you step-by-step through various customization scenarios.
  - Run Engine command framework
    The Run Engine command framework provides predefined commands, that you can use to change environment parameters or container configurations. This framework is built into the HCL provided Docker images.
  - GraphQL for HCL Commerce
    The GraphQL markup language is available for any API. It is a server-side interpreter for processing queries using a data type system you design. With GraphQL, your data and code are independent of any database or storage system.
  - Representational State Transfer (REST) services
    HCL Commerce uses Representational State Transfer (REST) services to provide a framework that can be used to develop RESTful applications on several platforms. These platforms can include web, mobile, kiosks, and social applications.
  - Web services
  - Search
    HCL Commerce comes with a powerful and fully integrated search function. The search functions in HCL Commerce provide an enriched customer experience, with features such as automatic search term suggestions and spelling correction. Since it is built on industry standards, HCL Commerce Search is highly flexible and extensible. Starter stores can use the search engine's most sophisticated features without requiring extra customization. Starting with Version 9.1, HCL Commerce Search with Elasticsearch microservices manage indexing and other crucial tasks, with no performance impact on the storefront or transaction server.
- 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.
- 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.

Customizing your home page

When the React Store application homepage is launched, the React Router considers the relative path and loads the respective page component configured for that path.

Table 1. Home page and its components
Location	Description
src\constants\routes.ts	Store path - paths used in the store.
ROUTE_CONFIG in src\configs\routes.ts	Path-to-component mappings. ROUTE_CONFIG must be mapped separately for the B2C and B2B stores.
Home.tsx in src\components\pages\home	Page component for the home page. The Home.tsx component contains the entire home page and its sub-components.
src\components\layouts\standard-page	Home page layout component The homepage uses the StandardPageLayout to display the page sub-components. The StandardPageLayout component consists of a banner and two sections, vertically aligned.
src\App.tsx	Header and footer

Consider the following points for the home page and its components:

For the Reference Store applications, the home page for both the B2C and B2B Reference Store applications maps to the same page component.
It is not mandatory to use a layout component. The sub-components can be included directly in the Home component. However, by creating a layout component you can reuse the same layout structure on other pages.
The header and footer are statically included in the React app and are not part of the routing. As such they are present on every page. The header and footer components are src/components/header and src/components/footer respectively.