HCL Commerce Version 9.1.9.0 or later

Add an "Add to Wishlist" button

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.

About this task

The button will be enabled only when a shopper has created a wishlist. If the shopper has created multiple wishlists, when they click the Add to Wish List button, the item will be added to the most recently created list.

Procedure

  1. Openthe file src/_foundation/hooks/use-product-details.tsx for editing.
  2. Add the following import statement in the Foundation libraries folder. 
    import { useSite } from "../../_foundation/hooks/useSite";
import wishListService from "../../_foundation/apis/transaction/wishList.service";
  3. 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";
  4. Add the following declarations in the Product Display component section to enable the storage of loginStatus and userWishList data provided by the Redux Selectors loginStatusSelector and GetWishListSelector. 
    const loginStatus = useSelector(loginStatusSelector);
const userWishList = useSelector(GEtWishListSelector);
  5. Create a method addToWishList. This method is a click event handler for the Add to Wish List button. Call the WishList API to add the selected product or item to the most recently created list of logged-in users. If the addition is successful, dispatch the following Redux action.
    GET_USER_WISHLIST_ACTION
    - For getting logged in user’s wish list and update the wishList Redux store state.
    HANDLE_SUCCESS_MESSAGE_ACTION
    - For triggering the success message snack bar to display. We also pass the required parameters in this case, the wish list name of which we added the product/item to it.
  6. Add the following code below the addToCart method. 
      const addToWishList = () => {
    const params = {
      body: {
        item: [
          {
            productId: currentSelection.sku[currentSelection.index].id,
            quantityRequested: 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);
      });
  };
  7. During component load, GET_USER_WISHLIST_ACTION is run to fetch the wishlist information of the logged-in shopper. 
    React.useEffect(() => {
    dispatch(wishListActions.GET_USER_WISHLIST_ACTION({ …payloadBase }));
    return ( ) => { 
         cancels.forEach((cancel) => cancel()); 
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps 
}, []);
  8. Return the loginStatus, userWishList, and addToWishList from the use-product-details.tsx custom hook to the product-details-widget UI component to display the Add to Wish List button, as shown in the following image.
  9. In HCL Commerce Version 9.1.9.0, the product details page has been modified as a part of the Page Composer widget feature. The user interface components of the product details page have been moved to the react store SDK component. Since you cannot modify the components present in the react store SDK directly, copy the needed components into the store-web project and customize it there.
    1. Copy the product-details directory from node_modules/@hcl-commerce-store-sdk/react-component/src/commerce-widgets.
    2. Paste the product-details in the src/components/widgets folder.
    3. Open the product-details-widget.tsx file from the src/components/widgets directory.
    4. You will receive compilation errors in the import statement. You can resolve these by modifying the import as follows. 
      import React, { useMemo } from "react";
//UI
import {
  StyledGrid,
  StyledPDPContainer,
  StyledTypography,
  StyledButton,
  StyledTabs,
} from "@hcl-commerce-store-sdk/react-component";
import { ProductAttributes } from "@hcl-commerce-store-sdk/react-component";
import { ProductImage } from "@hcl-commerce-store-sdk/react-component";
import { ProductQuantity } from "@hcl-commerce-store-sdk/react-component";
import { ProductThumbnails } from "@hcl-commerce-store-sdk/react-component";
import Hidden from "@material-ui/core/Hidden";
import { get } from "lodash-es";
    5. Declare the variables loginStatus, userWishList, and addToWishList in the ProductDetailsWidgetProps interface. 
      interface ProductDetailsWidgetProps {
  productPartNumber: any;
  product: any;
  showCarousel: boolean;
  carouselImages: any;
  changeMainImage: Function;
  index: number;
  displayFullImage: string;
  displayName: string;
  displayPartNumber: string;
  displayShortDesc: string;
  promotion: any;
  displayOfferPrice: number;
  displayListPrice: number;
  definingAttrList: any;
  skuColor: string;
  onAttributeChange: Function;
  currentSelection: any;
  updateProductQuantity: Function;
  availability: any;
  addToCart: Function;
  inventoryAvailableFlag: boolean;
  buyableFlag: boolean;
  productDetailTabsChildren: any;
  translation: any;
  formattedPriceDisplayOffer: any;
  formattedPriceDisplayList: any;
  formattedPriceDisplayNull: any;
  loginStatus: boolean;
  userWishList: any;
  addToWishList: Function;
}
    6. Fetch and store the parameters loginStatus, userWishList, and addToWishList from the property list. 
        const {
    productPartNumber,
    product,
    showCarousel,
    carouselImages,
    changeMainImage,
    index,
    displayFullImage,
    displayName,
    displayPartNumber,
    displayShortDesc,
    promotion,
    displayOfferPrice,
    displayListPrice,
    definingAttrList,
    skuColor,
    onAttributeChange,
    currentSelection,
    updateProductQuantity,
    availability,
    addToCart,
    inventoryAvailableFlag,
    buyableFlag,
    productDetailTabsChildren,
    translation,
    formattedPriceDisplayOffer,
    formattedPriceDisplayList,
    formattedPriceDisplayNull,
    loginStatus,
    userWishList,
    addToWishList,
  } = props;
    7. Add the Add to Wish List button below the Add to Cart button 
                              {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>
                        )}
  10. Open the product-details-widgets.tsx file from src/components/commerce-widgets
  11. Change the path in import { ProductDetailsWidget } from "@hcl-commerce-store-sdk/react-component" to your local file path where the newly customized product-details-widget.tsx file is stored. You can now test the button in the web browser.

Results

You can now login to the store with valid credentials and go to the Product Details page to verify the new changes, by adding a product or item to the recently created wishlist.