Ajouter un bouton "Ajouter à la liste de présélection"

Ajoutez un bouton dans une page de détails de produit de HCL Commerce version 9.1.9.0+ afin que les clients puissent ajouter des produits ou des articles à la liste de présélection. Ce bouton ne sera visible que pour les clients connectés. Les utilisateurs invités n'auront pas la possibilité d'ajouter des produits à une liste de présélection.

About this task

Ce bouton est activé uniquement lorsqu'un client a créé une liste de présélection. Si l'utilisateur a créé plusieurs listes de présélection, lorsqu'il clique sur le bouton Ajouter à la liste de présélection, l'élément est ajouté à la liste la plus récemment créée.

Procedure

Ouvrez le fichier src/_foundation/hooks/use-product-details.tsx pour l'éditer.

Ajoutez l'instruction d'importation suivante dans le dossier Foundation libraries.

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

Ajoutez l'instruction d'importation suivante dans le dossier 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";

Ajoutez les déclarations suivantes dans la section Product Display component pour activer le stockage des données loginStatus et userWishList fournies par les sélecteurs Redux loginStatusSelector et GetWishListSelector.
```
const loginStatus = useSelector(loginStatusSelector);
const userWishList = useSelector(GEtWishListSelector);
```
Créez une méthode addToWishList. Cette méthode est un gestionnaire d'événement de clic pour le bouton Ajouter à la liste de présélection. Appelez l'API WishList pour ajouter le produit ou l'article sélectionné à la liste récemment créée des clients connectés. Si l'ajout réussit, distribuez l'action Redux suivante.

GET_USER_WISHLIST_ACTION

Pour obtenir la liste de présélection d'un utilisateur connecté et mettre à jour l'état du magasin Redux WishList.

HANDLE_SUCCESS_MESSAGE_ACTION

- Pour déclencher l'affichage de la barre de snack de message de réussite. Nous avons également transmis les paramètres requis, dans ce cas, le nom de la liste de présélection à laquelle nous avons ajouté le produit/l'article.

Ajoutez le code suivant sous la méthode 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);
      });
  };

Lors du chargement du composant, GET_USER_WISHLIST_ACTION est exécuté pour extraire les informations de liste de présélection du client connecté.

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

Renvoyez les valeurs loginStatus, userWishList et addToWishList depuis l'ancrage personnalisé use-product-details.tsx vers le composant d'interface utilisateur product-details-widget pour afficher le bouton Ajouter à la liste de présélection, comme illustré dans l'image suivante.

Dans HCL Commerce version 9.1.9.0, la page des détails du produit a été modifiée dans le cadre de la fonction de widget de l'outil Composeur de page. Les composants de l'interface utilisateur de la page des détails du produit ont été déplacés vers le composant SDK du magasin React. Etant donné que vous ne pouvez pas modifier directement les composants présents dans le SDK du magasin React, copiez les composants nécessaires dans le projet store-web et personnalisez-les ici.

Copiez le répertoire product-details à partir de node_modules/@hcl-commerce-store-sdk/react-component/src/commerce-widgets.
Collez le product-details dans le dossier src/components/widgets.
Ouvrez le fichier product-details-widget.tsx dans le répertoire src/components/widgets.

Vous recevrez des erreurs de compilation dans l'instruction d'importation. Vous pouvez les résoudre en modifiant l'importation comme suit.

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

Déclarez les variables loginStatus, userWishList et addToWishList dans l'interface 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;
}

Récupérez et stockez les paramètres loginStatus, userWishList et addToWishList à partir de la liste de propriétés.

  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;

Ajouter le bouton Ajouter à la liste de présélection sous le bouton Ajouter au panier

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

Ouvrez le fichier product-details-widgets.tsx à partir de src/components/commerce-widgets.
Modifiez le chemin dans import { ProductDetailsWidget } depuis "@hcl-commerce-store-sdk/react-component" vers votre chemin de fichier local où le fichier product-details-widget.tsx nouvellement personnalisé est stocké. Vous pouvez maintenant tester le bouton dans le navigateur Web.

Results

Vous pouvez maintenant vous connecter au magasin avec des données d'identification valides et accéder à la page Détails du produit pour vérifier les nouvelles modifications, en ajoutant un produit ou un article à la liste de présélection récemment créée.