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.
Tutorials
HCL Commerce provides many tutorials to help you customize and understand your HCL Commerce instance and stores.
Starter stores
HCL Commerce provides tutorials that are designed to introduce the various tasks that are related to customizing the storefront.
Wishlist Tutorial
The wishlist is an e-commerce feature that helps customers create a personalized collection of products they want to purchase, and save them in their account page.
Developing wishlist UI widgets
Easily create Create wishlist and Display wishlist widgets.

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.
  - Docker start-up logic
    HCL Commerce provides tutorials that are designed to introduce the various tasks that are related to the customizing Docker start-up logic. The following tutorials provide sample guides to defining the custom logic.
  - Programming model
    HCL Commerce provides tutorials that are designed to introduce the various tasks that are related to creating customized code to develop and enhance HCL Commerce applications. The following tutorials provide sample guides to customizing elements of the HCL Commerce programming model.
  - Web services
    Web services tutorials introduce the various tasks that are related to creating and customizing web services for HCL Commerce applications.
  - Management Center
    HCL Commerce provides tutorials that are designed to introduce the various tasks that are related to customizing Management Center.
  - Migration
    HCL Commerce provides tutorials that are designed to introduce the various tasks that are related to migration from previous versions of WebSphere Commerce. The following tutorials provide sample guides to migrating your WebSphere Commerce sites to HCL Commerce Version 9.1.
  - Search
    HCL Commerce provides tutorials that are designed to describe how to customize HCL Commerce Search.
  - Starter stores
    HCL Commerce provides tutorials that are designed to introduce the various tasks that are related to customizing the storefront.
    - Customizing the storefront
      In this tutorial, you learn how to customize the storefront for a custom store by shortening the store URL and adding a view to the for the storefront by updating the context root, and add a view to display the home page.
    - Product compare feature
      The product compare feature allows you to compare items from the Product Listing Page (PLP) in tabular form on a dedicated screen.
    - Using Page Composer in React Store
      To use Page Composer for React Stores, you must modify the database in order to use the data from Aurora Stores in React Sores. Here, the example of AuroraB2B store ID is taken in reference to the Sapphire React Stores.
    - Adding support for a language to a store (REST API)
      In this tutorial, you add a new language to HCL Commerce for use in your organization's asset stores and an extended sites store.
    - Marketplace for React-based store
      HCL Commerce allows different vendors to participate in one or more marketplaces. The following provides an overview of the Marketplace for React-based Stores. Here the "Marketplace Operator" refers to the entity who is hosting the marketplace, "Marketplace Seller" is the vendor who sells the products on the market place and "Shopper" refers to the buyers who buy the product from the platform.
    - Wishlist Tutorial
      The wishlist is an e-commerce feature that helps customers create a personalized collection of products they want to purchase, and save them in their account page.
      - Enabling wishlist functionality
        Before wishlists can be created, enable Wish List functionality for the selected store.
      - Adding a new route for a wishlist
        Once wishlist functionality is enabled for your customers, add a route for your wishlists.To add a new route, React Component is needed. This document describe the steps that has to be followed for importing react component while adding new route for wishlist.
      - Adding Internationalization (i18n) strings
        This document provides information about adding the i18n strings, which are used in displaying user interface components and the message snack bar.
      - Developing wishlist UI widgets
        Easily create Create wishlist and Display wishlist widgets.
        Creating a wishlist widget
        The create-wishlist-widget.tsx file contains the sample source code that creates the wishlist widget. This document describes the implementation logic in detail.
        Display wishlist widgets
        The display-wishlist-widget.tsx file contains the sample source code for create wishlist widget. The implementation logic is described in this document.
      - Redux, Redux Saga and Redux Store components
        After you have generated the User Interface widgets, create the , Redux, Redux Saga & Redux store selectors components.
      - Create a wishlist-view component
        After creating the Redux components and a mock data file, create wishlist-view component.
      - Add an "Add to Wishlist" button in V9.1.8.x
        Add a button in a HCL Commerce Version 9.1.8.x product detail page so that customers can add products or items to the wishlist. This button will be visible to logged in shoppers only. Guest users will not have an option to add products to a wishlist.
      - Add an "Add to Wishlist" button in V9.1.9.0+
        Add a button in a HCL Commerce Version 9.1.9.0+ product detail page so that customers can add products or items to the wishlist. This button will be visible to logged in shoppers only. Guest users will not have an option to add products to a wishlist.
      - Deploying Wishlist customization on production environment
        Once the Wishlist functionality is enabled in the Developer Toolkit environment, you must deploy the Wishlist funtionality in the production environment as well. This document provides the steps to deploy the Wishlist customization in the production environment.
    - Adding a store page
      In this tutorial, you create a new page in your custom store that captures additional demographic information about the customer.
    - Customizing Commerce Composer widgets to display additional information
      In this tutorial, you update a Commerce Composer widget to display additional information.
    - Adding languages to a store (Data load)
      In this tutorial, you add support for more languages to HCL Commerce.
    - Adding support for a language to a store (REST API)
      In this tutorial, you add a new language to HCL Commerce for use in your organization's asset stores and an extended sites store.
    - Adding support for a currency to a store (REST API)
      In this tutorial, you add a new currency to HCL Commerce for use in your organization's asset stores and an extended sites store.
- 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.

Developing wishlist UI widgets

Easily create Create wishlist and Display wishlist widgets.

About this task

To view the wishlist in the page, map wishlist-view react component to the route/ wish-list. The following topics show you how.

Procedure

Create a wish-list folder inside src/components/widgets, for adding the Create wishlist widget and Display wishlist widget.
After you have created a wish-list folder, open the downloaded source code zip.
Copy the following files from wishlisttutorial_sourcecode/src/components/widgets/wish-list/ folder and paste them in the newly created wish-list folder:
- create-wishlist-widget.tsx
- display-wishlist-widget.tsx
- index.ts
Styled UI components of the HCL Commerce React Store SDK are used for designing the above widgets. Material UI design is used for Styled UI components.