HCL Commerce Version 9.1.8.0 or later

Ajout d'une nouvelle route pour la liste de présélection

Une fois que la fonctionnalité de liste de présélection est activée pour vos clients, ajoutez une route pour vos listes de présélection. Pour ajouter une nouvelle route, le composant React est nécessaire. Ce document décrit les étapes à suivre pour importer le composant React lors de l'ajout d'une nouvelle route pour la liste de présélection.

Before you begin

Note: Ce tutoriel n'est valide que pour HCL Commerce versions 9.1.8.0 à 9.1.10.0, car la fonction de liste de présélection est incluse en tant que fonction par défaut pour HCL Commerce versions 9.1.11.0 et ultérieures.

About this task

Procedure

  1. Comme aucune route n'est configurée pour /wish-list url, ajoutez la route dans le fichier src/configs/routes.ts.
  2. Importez le composant React wishlist-view. Utilisez le code suivant pour importer le composant React wishlist-view : 
    //Emerald pages
const Account = lazy(() => import("../components/pages/_emerald/account/Account"));

//wish List
const WishListView = lazy(() => import("../components/pages/wish-list/wishlist-view"));
  3. La fonctionnalité Liste de présélection étant nouvelle, le composant React wishlist-view n'existe pas.
    Note: Ce fichier affichera une erreur en raison d'un composant React manquant. Une fois le composant React wishlist-view ajouté, l'erreur sera effacée.
  4. Pour ajouter la fonctionnalité de liste de présélection pour le magasin Emerald, ajoutez les routes React à la matrice B2CRouteConfig. Utilisez le code suivant pour ajouter des routes React : 
    ];
const B2CRouteConfig: RouteConfig[] = [
 {
   key: ROUTES.WISH_LIST,
   path: ROUTES.WISH_LIST,
   exact: true,
   isProtected: ROUTES.REGISTER_PROTECTED,
   component: WishListView,
 },
 {...
 },
  5. Enregistrez le fichier src/configs/routes.ts et une nouvelle route est ajoutée pour une liste de présélection.
  6. Après l'activation de la liste de présélection et l'ajout de nouvelles routes, suivez Ajout de chaînes d'internationalisation (i18n) pour ajouter des chaînes de traduction i18n utilisées dans les composants de l'interface utilisateur, ainsi que pour l'affichage des messages de réussite.