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

Añada un botón en una página de detalles del producto HCL Commerce Versión 9.1.9.0+ 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 solo se activará cuando un comprador haya creado una lista de deseos. Si el comprador ha creado varias listas de deseos, cuando pulse el botón Añadir a la lista de deseos, el artículo se añadirá a la lista creada más recientemente.

Procedure

Abra el archivo src/_foundation/hooks/use-product-details.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";

Añada las declaraciones siguientes en la sección Product Display component para habilitar el almacenamiento de datos loginStatus y userWishList proporcionados por los selectores Redux loginStatusSelector y GetWishListSelector.
```
const loginStatus = useSelector(loginStatusSelector);
const userWishList = useSelector(GEtWishListSelector);
```
Cree un método addToWishList. Este método es un administrador de eventos de pulsación para el 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 usuarios que han iniciado sesión más recientemente. Si se añade correctamente, envía la siguiente acción de Redux.

GET_USER_WISHLIST_ACTION

- Para iniciar sesión en la lista de deseos del usuario y actualizar el estado de la lista de deseos de la tienda Redux.

HANDLE_SUCCESS_MESSAGE_ACTION

- Para activar la visualización de la barra del mensaje de éxito. En este caso, también se pasan los parámetros necesarios, el nombre de la lista de deseos a la que hemos añadido el producto/artículo.

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

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

Durante la carga del componente, GET_USER_WISHLIST_ACTION se ejecuta para captar la información de lista de deseos del comprador que ha iniciado sesión.

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

Devuelva loginStatus, userWishList y addToWishList del enganche personalizado use-product-details.tsx al componente de interfaz de usuario product-details-widget para mostrar el botón Añadir a la lista de deseos, tal como se muestra en la imagen siguiente.

En la versión 9.1.9.0 HCL Commerce, la página de detalles del producto se ha modificado como parte de la característica del widget Compositor de páginas. Los componentes de la interfaz de usuario de la página de detalles del producto se han movido al componente SDK de tienda de react. Puesto que no puede modificar los componentes presentes en el SDK de la tienda de react directamente, copie los componentes necesarios en el proyecto store-web y personalícelos allí.

Copie el directorio product-details de node_modules/@hcl-commerce-store-sdk/react-component/src/commerce-widgets.
Pegue product-details en la carpeta src/components/widgets.
Abra el archivo product-details-widget.tsx desde el directorio src/components/widgets.

Recibirá errores de compilación en la sentencia import. Puede resolverlos modificando la importación como se muestra a continuación.

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

Declare las variables loginStatus, userWishList y addToWishList en la interfaz ProductDetailsWidgetProps.

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

Captar y almacenar los parámetros loginStatus, userWishList y addToWishList de la lista de propiedades.

  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;

Añadir el botón Añadir a la lista de deseos debajo del botón Añadir al carro de la compra

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

Abra el archivo product-details-widgets.tsx desde src/components/commerce-widgets
Cambie la vía de acceso en import { ProductDetailsWidget } desde "@hcl-commerce-store-sdk/react-component" a la vía de acceso de archivo local donde se almacena el archivo product-details-widget.tsx recién personalizado. Ahora puede probar el botón en el navegador web.

Results

Ahora puede iniciar la sesión en la tienda con credenciales válidas e ir a la página Detalles del producto para verificar los cambios nuevos, añadiendo un producto o un artículo a la lista de deseos creada recientemente.