Mostrar widgets de lista de deseos

El archivo display-wishlist-widget.tsx contiene el código fuente de ejemplo para crear el widget de lista de deseos. La lógica de implementación se describe en este documento.

About this task

Procedure

Importe los componentes de la IU con estilo de los paquetes @hcl-commerce-store-sdk/react-component y las bibliotecas react:

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

Cree una interfaz DisplayWishListWidgetProps, con las propiedades necesarias para el componente funcional DisplayWishListWidget. Cree el componente funcional react DisplayWishListWidget utilizando el código siguiente:

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

Propiedades	Descripciones
traducción	El objeto de traducción contiene las cadenas i18n.
Lista de deseos	Se ha conectado a la lista de deseos del usuario desde el selector de tienda React Redux.
deleteWishlist	Función para suprimir la lista de deseos seleccionada.
productsData	La variable de estado de gancho react contiene la información de productos añadida a una lista de deseos.

Como productData contiene toda la información del producto agregada a una lista de deseos, tendrá que cortar la array y almacenarla en recentProducts:
```
const recentProducts = productsData.slice(0, 2);
```
Note: La tarjeta de lista de deseos mostrará dos miniaturas de productos añadidos recientemente.

Para crear una tarjeta de lista de deseos para las acciones Ver lista y Suprimir, use el siguiente código:

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

Para obtener la información del producto, se necesita una llamada de API Rest adicional. Utilice el enlace de estado de react para verificar la disponibilidad de productData.

Utilice el componente de interfaz de usuario StyledCircularProgress hasta que productData esté disponible para su visualización. Utilice los códigos siguientes para lograr esto:

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

Se necesitaban Create wishlist widget y Display wishlist widgets, y ya se han creado.

What to do next

Una vez creados los widgets de interfaz de usuario, cree los componentes de selectores de tienda Redux, Redux Saga y Redux.