Adding an "Add to Wishlist" button

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.

About this task

The Add to Wish List button will be enabled only when a shopper has a wishlist created.

Note: As per the scope of this tutorial; you will be able to add products only in the most recent wishlist, if you have created multiple wishlists. Upon clicking Add to Wish List, items will be added to the most recent wishlist.

Procedure

Open the src/components/commerce-widgets/product-details-widget.tsx file for editing.

Add the following import statement in the Foundation libraries folder.

import { useSite } from "../../_foundation/hooks/useSite";
import wishListService from "../../_foundation/apis/transaction/wishList.service";

Add the following import statement in the Redux folder.


import { loginStatusSelector } from "../../redux/selectors/user";
import { GetWishListSelector } from "../../redux/selectors/wishList";
import * as wishListActions from "../../redux/actions/wishList";
import * as successActions from "../../redux/actions/success";

Store the loginStatus and userWishList from Redux Selectors loginStatusSelector and GetWishListSelector.

const loginStatus = useSelector(loginStatusSelector);
  const userWishList = useSelector(GetWishListSelector);

Save and close the file.
Create the addToWishList method. The addToWishList method is a click event handler of the Add to Wish List button. Call the WishList API to add the selected product or item to the recently created wishlist of the logged-in shopper. Upon successful addition, dispatch the following Redux action:

GET_USER_WISHLIST_ACTION

For getting a wishlist of the logged-in user and updating the wishList Redux store state.

HANDLE_SUCCESS_MESSAGE_ACTION

For triggering the success message snack bar to display.

Add the following code below the addToCart method.

const addToWishList = () => {
  const params = {
     body: {
      item: [
       {
         productId: currentSelection.sku.id,
         quentityRequested: currentSelection.quantity.toString(),
       },
     ],
   },
   addItem: true,
   externalId: userWishList[userWishList.length - 1].externalIdentifier,
   ...payloadBase,
 };
 wishListService
   .updateWishlist(params)
   .then((res) => res.data.item)
   .then((result) => {
     if (result && result.length > 0 && result[0].giftListItemID) {
       dispatch(
         wishListActions.GET_USER_WISHLIST_ACTION({ ...payloadBase })
       );
       const successMessage = {
         key: "success-message.WISHLIST_ADD_SUCCESS",
         messageParameters: {
           "0": userWishList[userWishList.length - 1].description,
         },
       };
       dispatch(
         successActions.HANDLE_SUCCESS_MESSAGE_ACTION(successMessage)
       );
      }
    })
     .catch((e) => {
       console.log("Could not add item to the wish list", e);
     });
};

During the component load, dispatch GET_USER_WISHLIST_ACTION to get the wishlist information of the logged-in shopper. Use the following code for dispatch,:

React.useEffect(() => {
  dispatch(wishListActions.GET_USER_WISHLIST_ACTION({ ...payloadbase }));
  return () => {
    cancels.forEach((cancel) => cancel());
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Add the Add to Wish List button using the following code:

<StyledButton
  color="primary"
  size="small"
  ClassName="product-add-to-cart"
  id={'product_add_to_cart_${productPartNumber}'}
  onClick={addToCart}
  disabled={!inventoryAvailableFlag || !buyableFlag}>
  {t("productDetail.AddToCart")}
</StyledButton>
{loginStatus && (
  <StyledButton
   color="secondary"
   size="small"
   ClassName="left-margin-2"
   disabled={!(loginStatus && userWishList)}
   onClick={addToWishList}
   id={'product_add_to_cart_${productPartNumber}'}>
   Add to Wish List
  <StyledButton>
)}

Save and close the file.
Login to the store with valid shopper credentials. Go to the Product Details page. Verify that the changes were made by adding a product or item to the recently created wish list.