1.5.3 Connexion d’ACCS à AEM Assets CS

Après avoir terminé l’exercice précédent, vous pouviez voir un produit renvoyé par l’ACCS à votre site web, mais il n’avait pas encore d’image. À la fin de cet exercice, vous devriez également voir une image renvoyée.

1.5.3.1 la configuration du pipeline de mise à jour

Accédez à https://my.cloudmanager.adobe.com. L’organisation que vous devez sélectionner est --aepImsOrgName--.

Cliquez pour ouvrir votre programme Cloud Manager, qui doit être appelé --aepUserLdap-- - CitiSignal AEM+ACCS.

Faites défiler l’écran vers le bas, puis cliquez sur Accéder aux informations sur le référentiel dans l’onglet Pipelines.

Vous devriez alors voir ceci. Cliquez sur Générer un mot de passe.

Cliquez de nouveau sur Générer un mot de passe.

Vous devriez alors disposer d’un mot de passe. Cliquez ensuite sur l’icône copy en regard du champ ligne de commande Git.

Créez un nouveau répertoire à un emplacement de votre choix sur votre ordinateur et nommez-le GitHub du pipeline AEM.

Cliquez avec le bouton droit sur votre dossier, puis sélectionnez Nouveau terminal dans le dossier.

Vous devriez alors voir ceci.

Collez la commande ligne de commande Git que vous avez copiée précédemment dans la fenêtre Terminal.

Vous devez saisir un nom d’utilisateur. Copiez le nom d’utilisateur du pipeline de programme Cloud Manager Accéder aux informations sur le référentiel et appuyez sur Entrée.

Ensuite, vous devez saisir le mot de passe. Copiez le mot de passe du pipeline du programme Cloud Manager Accéder aux informations sur le référentiel et appuyez sur Entrée.

Cela peut prendre une minute. Une fois l’opération terminée, vous disposez d’une copie locale du référentiel Git lié au pipeline de votre programme.

Un nouveau répertoire s’affiche dans le répertoire GitHub du pipeline AEM. Ouvrez ce répertoire.

Sélectionnez tous les fichiers de ce répertoire et supprimez-les tous.

Vérifiez que le répertoire est vide.

Accédez à https://github.com/ankumalh/assets-commerce. Cliquez sur <> Code puis sélectionnez Télécharger le fichier ZIP. Téléchargez le fichier, puis déposez-le sur votre bureau.

Copiez ensuite le fichier assets-commerce-main.zip sur votre bureau et décompressez-le. Ouvrez le dossier assets-commerce-main.

Copiez tous les fichiers du répertoire assets-commerce-main dans le répertoire vide du répertoire du référentiel de pipeline de votre programme.

Ouvrez ensuite Microsoft Visual Studio Code et ouvrez le dossier contenant le référentiel de pipeline de votre programme dans Microsoft Visual Studio Code.

Accédez à Rechercher dans le menu de gauche et recherchez <my-app>. Vous devez remplacer toutes les occurrences de <my-app> par --aepUserLdap--citisignalaemaccs.

Cliquez sur l’icône tout remplacer.

Cliquez sur Remplacer.

Les nouveaux fichiers sont maintenant prêts à être chargés à nouveau dans le référentiel Git lié au référentiel Pipeline de votre programme. Pour ce faire, ouvrez le dossier GitHub du pipeline AEM et cliquez avec le bouton droit de la souris sur le dossier contenant les nouveaux fichiers. Sélectionnez Nouveau terminal dans le dossier.

Vous devriez alors voir ceci. Collez la git add . de commande et appuyez sur entrée.

Vous devriez alors voir ceci. Collez la git commit -m "add assets integration" de commande et appuyez sur entrée.

Vous devriez alors voir ceci. Collez la git push origin main de commande et appuyez sur entrée.

Vous devriez alors voir ceci. Vos modifications ont maintenant été déployées dans le référentiel Git de votre pipeline de programme.

Revenez à Cloud Manager et cliquez sur Fermer.

Après avoir apporté des modifications au référentiel Git du pipeline, vous devez exécuter à nouveau le pipeline Déployer vers l’environnement de développement. Cliquez sur le de 3 points… et sélectionnez Exécuter.

Cliquez sur Exécuter. L’exécution d’un déploiement de pipeline peut prendre entre 10 et 15 minutes. Vous devez attendre que le déploiement du pipeline se termine avec succès avant de continuer.

1.5.3.2 Activer l’intégration d’AEM Assets dans ACCS

Revenez à votre instance ACCS. Dans le menu de gauche, accédez à Magasins puis sélectionnez Configuration.

Faites défiler le menu vers le bas jusqu’à SERVICES ADOBE puis ouvrez Intégration d’AEM Assets. Vous devriez alors voir ceci.

Renseignez les variables suivantes :

Cliquez sur Enregistrer la configuration.

Vous devriez alors voir ceci.

1.5.3.3 Update config.json

Accédez au référentiel GitHub créé lors de la configuration de votre environnement AEM Sites CS/EDS. Ce référentiel a été créé dans l’exercice 1.1.2 Configuration de votre environnement AEM CS et doit être nommé citisignal-aem-accs.

Dans le répertoire racine, faites défiler l’écran vers le bas et cliquez pour ouvrir le fichier config.json. Cliquez sur l’icône modifier pour apporter des modifications au fichier.

Ajoutez le fragment de code ci-dessous sous la ligne 5 "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/XXX/graphql", :

 "commerce-assets-enabled": "true",

Cliquez sur Valider les modifications….

Cliquez sur Valider les modifications.

Votre modification est maintenant enregistrée et sera bientôt publiée. Cela peut prendre quelques minutes avant que la modification ne soit visible sur le storefront.

1.5.3.4 la vérification des champs Commerce dans AEM Assets CS

Connectez-vous à votre environnement de création AEM CS et accédez à Assets.

Accédez à Fichiers.

Ouvrez le dossier CitiSignal.

Pointez sur une ressource et cliquez sur l’icône info.

Vous devriez maintenant voir un onglet Commerce contenant 2 nouveaux attributs de métadonnées.

Votre environnement AEM Assets CS prend désormais en charge l’intégration de Commerce. Vous pouvez maintenant commencer à charger les images du produit.

1.5.3.4 Charger l’Assets du produit et créer un lien vers les produits

Téléchargez les images du produit ici. Une fois téléchargés, exportez les fichiers sur votre bureau.

Cliquez sur Créer puis sélectionnez Dossier.

Saisissez la valeur Product_Images pour les champs Titre et Nom. Cliquez sur Créer.

Cliquez pour ouvrir le dossier que vous venez de créer.

Cliquez sur Créer puis sélectionnez Fichiers.

Accédez au dossier Product_Images sur le bureau, sélectionnez tous les fichiers, puis cliquez sur Ouvrir.

Cliquez sur Télécharger.

Vos images seront alors disponibles dans votre dossier. Pointez sur le produit iPhone-Air-Light-Gold.png et cliquez sur l’icône Propriétés.

Faites défiler vers le bas et définissez le champ Statut de la révision sur Approuvé. L’intégration AEM Assets CS - ACCS ne fonctionne que pour les images approuvées.

Faites défiler l’écran vers le haut, accédez à l’onglet Commerce puis cliquez sur Ajouter sous SKU de produit.

Ajoutez les SKU suivants pour ce produit :

Tu devrais avoir ça. Cliquez sur Enregistrer et fermer.

Pointez sur le produit iPhone-Air-Space-Black.png et cliquez sur l’icône Propriétés.

Faites défiler vers le bas et définissez le champ Statut de la révision sur Approuvé. L’intégration AEM Assets CS - ACCS ne fonctionne que pour les images approuvées.

Faites défiler l’écran vers le haut, accédez à l’onglet Commerce puis cliquez sur Ajouter sous SKU de produit.

Ajoutez les SKU suivants pour ce produit :

Tu devrais avoir ça. Cliquez sur Enregistrer et fermer.

Pointez sur le produit iPhone-Air-Sky-Blue.png et cliquez sur l’icône Propriétés.

Faites défiler vers le bas et définissez le champ Statut de la révision sur Approuvé. L’intégration AEM Assets CS - ACCS ne fonctionne que pour les images approuvées.

Faites défiler l’écran vers le haut, accédez à l’onglet Commerce puis cliquez sur Ajouter sous SKU de produit.

Ajoutez les SKU suivants pour ce produit :

Tu devrais avoir ça. Cliquez sur Enregistrer et fermer.

Pointez sur le produit iPhone-Air-Cloud-White.png et cliquez sur l’icône Propriétés.

Faites défiler vers le bas et définissez le champ Statut de la révision sur Approuvé. L’intégration AEM Assets CS - ACCS ne fonctionne que pour les images approuvées.

Faites défiler l’écran vers le haut, accédez à l’onglet Commerce puis cliquez sur Ajouter sous SKU de produit.

Ajoutez les SKU suivants pour ce produit :

Tu devrais avoir ça. Cliquez sur Enregistrer et fermer.

Chaque image iPhone Air ​ ​doit désormais avoir une pouces verts vers le haut, indiquant que la ressource a été approuvée.

1.5.3.5 Vérifier les images de produit sur le storefront AEM Sites CS/EDS

Pour vérifier que l'intégration fonctionne, vous devez ouvrir votre site Web CitiSignal.

Pour accéder à votre site web, accédez à main--citisignal-aem-accs--XXX.aem.page et/ou main--citisignal-aem-accs--XXX.aem.live, après avoir remplacé XXX par votre compte utilisateur GitHub, qui est woutervangeluwe dans cet exemple.

Ainsi, dans cet exemple, l’URL complète devient :
https://main--citisignal-aem-accs--woutervangeluwe.aem.page et/ou https://main--citisignal-aem-accs--woutervangeluwe.aem.live

Vous devriez alors voir ceci. Accédez à Téléphones.

Vous devriez alors voir une image de produit affichée pour iPhone Air. Cliquez sur iPhone Air.

Vous devriez alors voir ceci. Modifiez les options de couleur et de stockage pour que les images changent de manière dynamique en fonction des choix que vous avez effectués.

Voici un exemple de modification de la couleur en Or clair et de la taille de stockage en 256GB.

Étape suivante : Résumé et avantages

Revenir à Adobe Commerce as a Cloud Service

Revenir à tous les modules