Cas d’utilisation complet de Storefront et de Catalog Administrator

Interface utilisateur de Adobe Commerce Optimizer - Configurez des vues et des politiques de catalogue pour gérer la configuration opérationnelle complexe du catalogue pour le cas d’utilisation de Carvelo.

Storefront Commerce : effectuez le rendu du storefront à l’aide des exemples de données de catalogue chargées dans votre instance Adobe Commerce Optimizer et des fichiers de configuration, fstab.yaml et config.json du storefront Commerce.

Créez une nouvelle politique appelée Catégories de pièces Celport pour que Celport vende uniquement des pièces de frein et de suspension.

Créez une vue de catalogue pour le storefront Celport.

Cette vue catalogue utilise votre nouvelle politique catégories de pièces Celport et les marques existantes East Coast Inc pour vous assurer que Celport ne peut vendre que les marques Bolt et Cruz dans le cadre de l'accord avec East Coast Inc. La vue catalogue Celport utilise le catalogue east_coast_inc pour prendre en charge les barèmes de prix de produits qui s'alignent sur les accords de licence de la marque.

Mettez à jour la configuration du storefront Commerce pour utiliser les données de la vue de catalogue Celport que vous avez créée.

Dans le rail de gauche, développez la section Configuration du magasin et cliquez sur Policies.

Cliquez sur Create Policy.

Une nouvelle page s’affiche pour ajouter les détails de la politique.

Ajoutez les détails requis :

Nom = Catégories de pièces Celport

Cliquez sur Add Filter.

Une boîte de dialogue s’affiche pour ajouter des détails de filtre.

Ajoutez les détails du filtre :

• Attribute = part_category
• Opérateur = IN
• Valeur Source = STATIC
• Valeur = freins
• Valeur = suspension

Pour en savoir plus sur la différence entre une source de valeurs STATIQUE et TRIGGER, voir types de sources de valeurs.

Dans la boîte de dialogue Filter details, cliquez sur Save.

Pour activer le filtre que vous venez de créer, cliquez sur les points d’action (…) et sélectionnez Activer.

Cliquez sur Save.

Revenez à la liste des politiques en cliquant sur la flèche Précédent.

Votre nouvelle stratégie Celport part categories apparaît dans la liste.

Dans le rail de gauche, développez la section Configuration du magasin et cliquez sur Catalog views.

Notez les vues de catalogue existantes : Arkbridge, Kingsbluff et Global.

Cliquez sur Add catalog view.

Renseignez les détails de la vue Catalogue :

• Name = Celport
• Sources de catalogue = fr-FR
• Politiques (liste déroulante d’utilisation) = Marques East Coast Inc; Catégories de pièces Celport; Marque; Modèle

Cliquez sur Add pour créer la vue de catalogue.

La page Vues du catalogue se met à jour pour afficher la nouvelle vue du catalogue.

Obtenez l’identifiant de vue du catalogue Celport.

Cliquez sur l’icône d’informations correspondant à la vue Catalogue Celport sur la page Vues Catalogue.

Copiez et enregistrez l’ID de vue de catalogue. Vous avez besoin de cet identifiant lorsque vous mettez à jour la configuration du storefront pour fournir des données à votre nouveau catalogue Celport.

Pour vérifier que cette étape a été correctement effectuée :

• Le nom de la vue Catalogue est « Celport »
• La vue Catalogue affiche 4 politiques associées
• L’ID de vue de catalogue s’affiche et peut être copié
• La source du catalogue affiche « en-US ».

Dans votre environnement de développement local, ouvrez le dossier dans lequel vous avez cloné le référentiel GitHub avec vos fichiers de configuration storefront standard.

Dans le répertoire racine du dossier, ouvrez le fichier config.json.

{
 "public": {
   "default": {
   "commerce-core-endpoint": "https://www.aemshop.net/graphql",
   "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/Fwus6kdpvYCmeEdcCX7PZg/graphql",
   "headers": {
      "cs": {
         "ac-view-id": "9ced53d7-35a6-40c5-830e-8288c00985ad",
         "ac-price-book-id": "west_coast_inc",
         "ac-source-locale": "en-US"
        }
      },
      "analytics": {
         "base-currency-code": "USD",
         "environment": "Production",
         "store-id": 1,
         "store-name": "ACO Demo",
         "store-url": "https://www.aemshop.net",
         "store-view-id": 1,
         "store-view-name": "Default Store View",
         "website-id": 1,
         "website-name": "Main Website"
       }
    }
   }
}

Dans la valeur commerce-endpoint , remplacez l’ID du client dans l’URL par l’URL de votre instance Adobe Commerce Optimizer.

L’ID du client se trouve dans l’URL de l’interface utilisateur de Commerce Optimizer. Par exemple, dans l’URL suivante, l’identifiant client est XDevkG9W6UbwgQmPn995r3.

https://experience.adobe.com/#/@commerceprojectbeacon/in:XDevkG9W6UbwgQmPn995r3/commerce-optimizer-studio/catalog

Remplacez la valeur ac-view-id par l’ID de vue du catalogue Celport que vous avez copié précédemment.

Remplacez la valeur ac-price-book-id par "east_coast_inc".

Après avoir apporté ces modifications, votre fichier config.json doit ressembler à ce qui suit, les espaces réservés ACO-tenant-id et celport-catalog-view-id devant être remplacés par vos valeurs :

{
  "public": {
     "default": {
     "commerce-core-endpoint": "https://www.aemshop.net/graphql",
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{{ACO-tenant-id}}/graphql",
     "headers": {
         "cs": {
             "ac-view-id": "{{celport-catalog-view-id}}",
             "ac-price-book-id": "east_coast_inc",
             "ac-source-locale": "en-US"
           }
         },
         "analytics": {
             "base-currency-code": "USD",
             "environment": "Production",
             "store-id": 1,
             "store-name": "ACO Demo",
             "store-url": "https://www.aemshop.net",
             "store-view-id": 1,
             "store-view-name": "Default Store View",
             "website-id": 1,
             "website-name": "Main Website"
          }
      }
  }
}

Enregistrez le fichier.

Lorsque vous enregistrez les modifications, vous mettez à jour la configuration du catalogue pour utiliser la vue de catalogue Carvelo qui a été configurée pour vendre uniquement des pièces de frein et de suspension.

Lancez le storefront pour afficher l’expérience de catalogue spécifique à Celport créée par votre configuration de storefront.

1. Dans la fenêtre du terminal de votre IDE, démarrez l’aperçu de votre storefront local.

   code language-shell
   npm start

   Le navigateur s’ouvre dans l’aperçu du développement local sur http://localhost:3000.

   Si la commande échoue ou si le navigateur ne s’ouvre pas, consultez les instructions pour le développement local dans la rubrique Configuration de Storefront .

Dans le navigateur, recherchez brakes et appuyez sur Entrée.

Le storefront se met à jour pour afficher la page de liste de produits affichant les pièces de frein.

Cliquez sur une image de pièce de frein pour afficher les détails du produit avec les informations de prix et notez les informations de prix du produit.

Recherchez tires, qui est une autre catégorie d’articles disponible dans les données de cas d’utilisation de votre instance Adobe Commerce Optimizer.

Notez qu’aucun résultat n’est renvoyé. Ceci est dû au fait que la vue Catalogue Celport a été configurée pour vendre uniquement des pièces de frein et de suspension.

Testez la mise à jour de votre fichier de configuration de storefront (config.json).

1. Modifiez les valeurs ac-view-id et ac-price-book.

Par exemple, vous pouvez remplacer l'ID de vue de catalogue par la vue de catalogue Kingsbluff et l'ID de catalogue par east_coast_inc. Vous pouvez voir les catégories de pièces disponibles pour Kingsbluff en examinant la politique Catégories de pièces Kingsbluff.

1. Enregistrez le fichier.

   Lorsque vous enregistrez le fichier, l’aperçu du storefront local se met automatiquement à jour.

2. Prévisualisez les modifications dans le navigateur à l'aide de la fonction Rechercher pour rechercher des pièces de pneumatique.

   Notez les différents types de pièces disponibles et les prix attribués à la vue catalogue Kingsbluff.

Ces expériences illustrent la flexibilité de Adobe Commerce Optimizer : vous pouvez rapidement basculer entre différentes vues de catalogue et tarifs afin de créer des expériences d’achat personnalisées pour différentes audiences sans dupliquer les données de votre catalogue.