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.
Create a wishlist-view component
After creating the Redux components and a mock data file, create wishlist-view component.

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.
      - 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.
        Creating a wishlist view
        To create a wishlist view, follow the steps given in this document.
        Display a wishlist view
        To display a wishlist view, follow the steps given in this document.
        Building up a wishlist-view react component
        To create a wishlist view, you follow the steps in this document.
      - 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.

Create a wishlist-view component

After creating the Redux components and a mock data file, create wishlist-view component.

About this task

Follow the steps given below to build a wishlist-view component.

Procedure

Create a wish-list directory under src/components/pages.
After creating the directory, open the downloaded zip file. Copy the following files from wishlisttutorial_sourcecode/src/components/pages/wish-list/ directory:
- wishlist-view.tsx
- create-wishlist-view.tsx
- display-wishlist-view.tsx
- index.ts
The wishlist-view has two child components, create-wishlist-view and display-wishlist-view. The individual view components use respective create and display wish list UI widgets.

The view components contain the view logic, util functions, and translation string objects, which will be passed as properties to create-wishlist-widget/display-wishlist-widget components.