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.

Before you begin

Note: This tutorial is only valid for HCL Commerce version 9.1.8.0 to version 9.1.10.0, as the wishlist feature is included as a default feature for HCL Commerce version 9.1.11.0 and onwards.

About this task

Procedure

As there is no route configured for /wish-list url, add the route in the src/configs/routes.ts file.

Import the wishlist-view React Component. Use the following code to import wishlist-view React Component:

//Emerald pages
const Account = lazy(() => import("../components/pages/_emerald/account/Account"));

//wish List
const WishListView = lazy(() => import("../components/pages/wish-list/wishlist-view"));

As Wish List functionality is new, the wishlist-view react component does not exist.

Note: This file will show an error due to missing react component. Once the wishlist-view react component is added, the error will be cleared.

To add wishlist functionality for the Emerald store, add the react routes to the B2CRouteConfig array. Use the following code to add react routes:

];
const B2CRouteConfig: RouteConfig[] = [
 {
   key: ROUTES.WISH_LIST,
   path: ROUTES.WISH_LIST,
   exact: true,
   isProtected: ROUTES.REGISTER_PROTECTED,
   component: WishListView,
 },
 {...
 },

Save the src/configs/routes.ts file and a new route is added for a wishlist.
After enabling wishlists and adding new routes, follow Adding Internationalization (i18n) strings to add i18n translation strings which are used in UI components as well as for success message display.