Añadir un botón "Añadir a la lista de deseos"

Añada un botón en una página de detalles del producto a la Versión 9.1.8.x HCL Commerce para que los clientes puedan añadir productos o artículos a la lista de deseos. Este botón será visible solo para los compradores que hayan iniciado sesión. Los usuarios invitados no tendrán una opción para añadir productos a una lista de deseos.

About this task

El botón Añadir a la lista de deseos solo se habilitará cuando el comprador haya creado una lista de deseos.

Note: Según el ámbito de esta guía de aprendizaje; solo podrá añadir productos a la lista de deseos más reciente, si ha creado varias listas de deseos. Al pulsar Añadir a la lista de deseos, los artículos se añadirán a la lista de deseos más reciente.

Procedure

Abra el archivo src/components/commerce-widgets/product-details-widget.tsx para editarlo.

Añada la siguiente sentencia import a la carpeta Foundation libraries.

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

Añada la siguiente sentencia import a la carpeta Redux.


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";

Almacene loginStatus y userWishList de Redux Selectors loginStatusSelector y GetWishListSelector.

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

Guarde y cierre el archivo.
Cree el método addToWishList. El método addToWishList es un gestor de sucesos de pulsación del botón Añadir a lista de deseos. Llame a la API de WishList para añadir el producto o artículo seleccionado a la lista de deseos creada recientemente del comprador que ha iniciado la sesión. Una vez que se haya añadido satisfactoriamente, despacha la siguiente acción de Redux:

GET_USER_WISHLIST_ACTION

Para obtener una lista de deseos del usuario que ha iniciado sesión y actualizar el estado de la tienda Redux wishList.

HANDLE_SUCCESS_MESSAGE_ACTION

Para activar la visualización de la barra de mensaje de éxito.

Añada el código siguiente debajo del método addToCart.

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);
     });
};

Durante la carga del componente, envíe GET_USER_WISHLIST_ACTION para obtener la información de lista de deseos del comprador que ha iniciado sesión. Utilice el código siguiente para el envío:

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

Añada el botón Añadir a la lista de deseos utilizando el código siguiente:

<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>
)}

Guarde y cierre el archivo.
Inicie la sesión en la tienda con credenciales de comprador válidas. Vaya a la página Detalles del producto. Verifique que se hayan realizado los cambios, añadiendo un producto o artículo a la lista de deseos creada recientemente.