Afficher les widgets de liste de présélection

Le fichier display-wishlist-widget.tsx contient l'exemple de code source pour créer un widget de liste de présélection. Ce document décrit la logique d'implémentation.

About this task

Procedure

Importez les composants d'interface utilisateur mis en forme à partir des packages @hcl-commerce-store-sdk/react-component et les bibliothèques React :

//Standard libraries
import React, { Fragment, useState, useEffect } from "react";
//UI
import {
  StyledTypography,
  StyledCard,
  StyledCardMedia,
  StyledGrid,
  StyledCircularProgress,
} from "@hcl-commerce-store-sdk/react-component";

Créez une interface DisplayWishListWidgetProps avec les propriétés requises pour le composant fonctionnel DisplayWishListWidget. Créez le composant fonctionnel React DisplayWishListWidget à l'aide du code suivant :

interface DisplayWishListWidgetProps {
translation: any;
WishListName: String;
handelWishListName: Function;
validateWishListName: Function;
canCreatewishlist: Function;
createWishList: Function;
EMPTY_STRING: string;

Propriétés	Descriptions
traduction	L'objet de traduction contient les chaînes i18n.
wishList	Liste de présélection de l'utilisateur connecté à partir du sélecteur de magasin React Redux.
deleteWishList	Fonction de suppression de la liste de présélection sélectionnée.
productsData	La variable d'état d'ancrage React contient les informations sur les produits ajoutées à une liste de présélection.

Comme productData contient toutes les informations sur le produit ajoutées à une liste de présélection, vous devez trancher le array et le stocker dans recentProducts :
```
const recentProducts = productsData.slice(0, 2);
```
Note: La carte de liste de présélection affiche deux miniatures des produits récemment ajoutés.

Pour créer une carte de liste de présélection pour les actions ViewList et Delete, utilisez le code suivant :

const cardActions = [
 {
  text: translation.ViewList,
  link: "#",
 },
 {
  text: translation.Delete,
  handleClick: () =>
   deleteWishList(WishList.uniqueID, WishList.Description),
 },
];

Pour obtenir les informations sur le produit, un appel d'API REST supplémentaire est nécessaire. Utilisez l'ancrage d'état React pour vérifier la disponibilité de productData.

Utilisez le composant d'interface utilisateur StyledCircularProgress jusqu'à ce que productData soit disponible pour l'affichage. Utilisez les codes suivants pour y parvenir :

const { translation wishList, deleteWishList, productsData } = props;
const [loading, setLoading] = useState<boolean>(true);
const recentProducts = productsData.slice(0, 2);

useEffect(() => {
 if (productsData && productsData.length > 0) {
  setLoading(false);
 }
 if (!wishList.item) {
  setLoading(false);
 }]
 // eslint-disable-nextline react-hooks/exclusive-deps
}, [productsData]);

return loading ? (
 <StyledCircularProgress />
):(
 <StylesCard
  className="product-card"
  contentComponent={contentComponent}
  cardActions={cardActions}
  confirmLabel={translation.Confirm}
  concelLabel={translation.cancel}
 />
);

Le Create wishlist widget et les Display wishlist widgets requis sont maintenant créés.

What to do next

Une fois les widgets d'interface utilisateur créés, créez les composants des sélecteurs Redux, Redux Saga et Redux Store.