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.
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.
Page Composer overview
Page Composer consists of widgets (customizable page components) that can be placed within the page layout using the Page Composer tool. These widgets enable the shoppers to get a quick overview of the desired products, without searching them manually and thus help in enhacing their shopping experience.
Product Listing page
Widgets are customizable page components that can be placed within a page layout using the Page Composer tool.

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.
        Converting pages from previous versions to Page Composer-enabled pages
        In the Page Composer-enabled pages introduced in HCL Commerce Version 9.1.7.0., the layouts and the widgets used within them can be managed through CMC.
        React store NPM package structure
        As a part of Page Composer support, React store is widgetized and re-structured component code. Some of the components are moved into different NPM local packages.
        Store SEO and Layout resolution rendering flow
        This document provides information about the store SEO (Search Engine Optimization) and layout rendering flow.
        Page Composer overview
        Page Composer consists of widgets (customizable page components) that can be placed within the page layout using the Page Composer tool. These widgets enable the shoppers to get a quick overview of the desired products, without searching them manually and thus help in enhacing their shopping experience.
        Bundle page
        The Bundle page displays various combinations of items (bundles) in tabular form, which allows you to select attributes for products and their variants.
        B2B Product page
        Widgets are customizable page components that can be placed within a page layout using the Page Composer tool.
        Cart page
        The cart page displays the shopping cart details, which includes the details of the items added by you in the cart during shopping.
        Category Landing page
        Widgets are customizable page components that can be placed within a page layout using the Page Composer tool.
        Checkout page
        The checkout page displays the shipping and payment details for the items in the shopping cart.
        Home page
        Widgets are customizable page components that can be placed within a page layout using the Page Composer tool.
        Kit page
        A kit is a set of catalog entries that your customers can purchase in one transaction, without changing the product quantities or removing the products from the list. Kits are different from bundles, as bundles allow you to change the quantities or remove products from the list. This document gives a brief description about the Kit details page.
        Order Confirmation page
        The order confirmation page gives a confirmation that the order has been placed successfully.
        Product Listing page
        Widgets are customizable page components that can be placed within a page layout using the Page Composer tool.
        Product page
        Widgets are customizable page components that can be placed within a page layout using the Page Composer tool.
    - 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.

HCL Commerce Version 9.1.8.0 or later

Product Listing page

Widgets are customizable page components that can be placed within a page layout using the Page Composer tool. The following section describes the widgets used in the Product Listing page and their layout.

The Product Listing Page mainly consists of a Product List widget that displays a list of catalog entries on a product listing category page. This includes the image and name of the product, available SKUs, and the price of the product.

From HCL Commerce Version 9.1.10.0 and onwards, the Product List Widget also displays the price-range of the SKUs of a product or its variant. So if the minimum and maximum price of an SKU are different, then the system will display a price range in the format, "minimum SKU price - maximum SKU price" as shown in the following sample image for the product "Flared Accent Chair". In case the price of all SKUs is same, then the Page will display a single price for the product.

The following widgets are displayed in the above example:

Breadcrumb Trail: It displays the breadcrumb trail on the catalog entry page.
Facet Navigation: It displays a facet filter on a product listing-category page.
Product List: It displays a list of catalog entries on a product listing category page.

For more details on Page Composer widgets, refer to Widgets for Page Composer.