Ajout d'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.8.x 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

Le bouton Ajouter à la liste de présélection est activé uniquement lorsqu'une liste de présélection est créée pour un client.

Note: Selon la portée de ce tutoriel, vous ne pourrez ajouter des produits que dans la liste de présélection la plus récente, si vous avez créé plusieurs listes de présélection. Lorsque vous cliquez sur Ajouter à la liste de présélection, des articles sont ajoutés à la liste de présélection la plus récente.

Procedure

Ouvrez le fichier src/components/commerce-widgets/product-details-widget.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";

Stockez les valeurs loginStatus et userWishList à partir des sélecteurs Redux loginStatusSelector et GetWishListSelector.
```
const loginStatus = useSelector(loginStatusSelector);
  const userWishList = useSelector(GetWishListSelector);
```
Enregistrez et fermez le fichier.
Créez la méthode addToWishList. La méthode addToWishList est un gestionnaire d'événement de clic du bouton Ajouter à la liste de présélection. Appelez l'API WishList pour ajouter le produit ou l'article sélectionné à la liste de présélection récemment créée du client connecté. Une fois l'ajout réussi, distribuez l'action Redux suivante :

GET_USER_WISHLIST_ACTION

Pour obtenir une liste de présélection de l'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.

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

Lors du chargement du composant, envoyez GET_USER_WISHLIST_ACTION pour obtenir les informations de liste de présélection du client connecté. Pour la distribution, utilisez le code suivant :

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

Ajoutez le bouton Ajouter à la liste de présélection à l'aide du code suivant :

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

Enregistrez et fermez le fichier.
Connectez-vous au magasin avec des données d'identification client valides. Accédez à la page Détails du produit. Vérifiez que les modifications ont été apportées en ajoutant un produit ou un article à la liste de présélection récemment créée.