DocumentationCommerceAdobe Commerce as a Cloud Service

[SaaS uniquement]{class="badge positive" title="S’applique uniquement aux projets Adobe Commerce as a Cloud Service et Adobe Commerce Optimizer (infrastructure SaaS gérée par Adobe)."}

Cas d’utilisation

Last update: Tue Jan 06 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Débutant
  • Utilisateur ou utilisatrice
  • Leader

Les cas d’utilisation suivants présentent les principales fonctionnalités et les scénarios métier pris en charge par Adobe Commerce as a Cloud Service. Ils vous permettent d’accélérer le développement et de lancer des expériences à fort impact.

Si vous rencontrez des problèmes, consultez la section Dépannage pour obtenir des conseils.

Conditions préalables

Avant de lancer l’un de ces cas d’utilisation, vous devez remplir les conditions préalables suivantes :

  1. Créez votre instance Cloud Service à l’aide des options suivantes :

    1. Sélectionnez Sandbox dans le menu déroulant Environnement.
    2. Sélectionnez Adobe Store dans le menu déroulant Tester les données.

  2. Connexion à votre Adobe Experience Cloud compte

  3. Configurez votre storefront Cloud Service à l’aide des options suivantes :

    1. Sélectionnez adobe-commerce/adobe-demo-store pour le modèle.
    2. Sélectionnez Choisir une instance disponible (maillage -> SaaS) pour la méthode de connexion.

Workflow de passage en caisse

Ce workflow présente le processus de passage en caisse d’un client qui achète un produit sur votre storefront et la manière dont vous, en tant qu’administrateur, pouvez confirmer la commande.

Activer les services de paiement

  1. Dans Commerce Admin, accédez à Magasins > Settings > Configuration > Modes de paiement.

  2. Dans la section Configuration générale, saisissez vos Payment Services Sandbox ID et Payment Services Sandbox Key. Vous pouvez obtenir ces identifiants en suivant les étapes décrites dans Intégration des sandbox

  3. Définissez la liste déroulante Activer sur Oui.

  4. Cliquez sur Enregistrer la configuration.

Achat d’un produit

  1. Accédez au storefront créé dans les conditions préalables.

  2. Recherchez et sélectionnez un produit. Effectuez les sélections de personnalisation nécessaires. Cliquez ensuite sur Ajouter au panier.

    Interface de recherche et de sélection de produits Storefront {width="600" modal="regular"}

  3. Sélectionnez l’icône de panier pour afficher votre panier.

    Panier avec produit ajouté et options de paiement {width="600" modal="regular"}

  4. Cliquez sur Extraire.

    Bouton Passer en caisse sur la page du panier {width="600" modal="regular"}

  5. Saisissez les coordonnées et les informations d’expédition requises. Vous pouvez utiliser des informations fictives pour cette commande.

  6. Pour passer en caisse, sélectionnez Chèque / Mandat. Si vous souhaitez utiliser une carte de crédit, utilisez l'une des cartes test fournies par Paypal. Vous pouvez les utiliser avec n’importe quelle date d’expiration future et n’importe quel CVC.

    Formulaire de paiement avec champs d’informations de contact et d’expédition {width="600" modal="regular"} Formulaire de paiement par carte de crédit lors du passage en caisse {width="600" modal="regular"}

  7. Cliquez sur Passer une commande.

Confirmer la commande

  1. Ouvrez l’Administration Commerce : <your store URL>/admin.

  2. Connectez-vous à l’aide de votre Adobe ID.

  3. Accédez à Ventes > Commandes.

    Grille des commandes dans Commerce Admin affichant les commandes récentes {width="600" modal="regular"}

  4. Recherchez la commande que vous avez passée et confirmez les détails.

    Page de détails de la commande avec des informations sur le client et le produit {width="600" modal="regular"}

Mettre à jour le contenu du storefront

Créer, modifier et publier du contenu directement sur le storefront.

  1. Ouvrez le storefront créé dans les conditions préalables.

  2. Ouvrez Storefront Builder. En accédant à https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.md.

  3. Ouvrez la page Index.

  4. Sous le bloc Carrousel, saisissez un nouveau titre en modifiant la ligne « Bienvenue dans la démonstration de la boutique Adobe ».

  5. Cliquez sur l’icône d’envoi, puis sur Aperçu.

  6. Vérifiez la page d’aperçu et cliquez sur Publier.

  7. Actualisez la page du storefront et confirmez que vos modifications sont maintenant actives.

Expérimentation contextuelle

La fonctionnalité d’expérimentation contextuelle de Adobe Commerce vous permet de créer et de gérer des expériences sur votre storefront pour tester différents contenus et configurations.

Conditions préalables

  1. Dans Storefront Builder, sélectionnez votre page d’index et cliquez sur Copier.

  2. Créez un dossier expériences sous le dossier principal, en cliquant sur le bouton Nouveau et en sélectionnant Dossier.

  3. Créez un dossier nommé 1234 dans le dossier expériences.

  4. Collez les deux copies de la page d’index dans le dossier 1234.

  5. Ouvrez chaque page et renommez-les « homev1 » et « homev2 ». Ce sont vos challengers.

  6. Modifiez chaque page pour inclure un contenu différent. Par exemple, modifiez l’image principale ou le texte. Vous devez être en mesure d'identifier les différences entre chaque page.

  7. Publiez chacune de vos pages de challenger.

  8. Ouvrez la page de contrôle, la page d'index d'origine.

  9. Ajoutez un nouveau bloc avec le titre métadonnées.

  10. Ajoutez les informations suivantes aux lignes du bloc de métadonnées

    • Titre - Adobe Commerce

    • Description - Boutique web

    • Expérience - 1234

    • Variantes d’expérience

      • https://<your-site>.aem.live/experiments/1234/indexv1
      • https://<your-site>.aem.live/experiments/1234/indexv2

    Configuration de blocs de métadonnées pour l’expérimentation contextuelle {width="600" modal="regular"}

  11. Ouvrez une fenêtre de navigation privée ou privée et accédez à la page principale.

  12. Fermez la fenêtre de navigation privée et répétez l'étape précédente. Chaque fois que vous ouvrez la page, une variante aléatoire que vous avez créée s’affiche.

Améliorer le contenu du storefront

Avec AEM Assets, Adobe Express et Firefly, vous pouvez rapidement apporter des modifications aux images qui apparaissent dans votre storefront à l’aide d’un workflow simple et autonome.

Conditions préalables

  • Nécessite un accès à AEM Assets, Adobe Express et Adobe Firefly.

Personnaliser l’arrière-plan d’une image

Supposons que vous souhaitiez modifier rapidement l’arrière-plan d’une image de produit. La combinaison de Adobe Commerce, AEM Assets et Adobe Express vous permet d’effectuer cette modification en quelques étapes simples.

  1. Ouvrez le storefront créé dans les conditions préalables et accédez à un élément à modifier. Notez le SKU ou le code de produit des éléments.

  2. Ouvrez AEM Assets en le sélectionnant dans Adobe Experience Cloud.

    AEM Assets sélecteur affichant l’interface Adobe Experience Cloud ​ {width="600" modal="regular"}

  3. Cliquez sur Assets.

    Option de navigation Assets dans AEM Assets interface {width="600" modal="regular"}

  4. Recherchez l’article par SKU ou Code de produit.

  5. Sélectionnez l’élément à modifier, puis cliquez sur Ouvrir dans Adobe Express.

    Option Ouvrir dans Adobe Express pour l’édition de ressources {width="600" modal="regular"}

  6. Dans le panneau Image, sélectionnez Insérer un objet.

    Option Insérer un objet dans le panneau Image Adobe Express {width="600" modal="regular"}

  7. Dans la zone de texte, décrivez l’image que vous souhaitez ajouter. Par exemple, « les pins enneigés ».

    Zone de texte décrivant l’image à générer avec l’IA {width="600" modal="regular"}

  8. Ajustez la Brush size et dessinez à l’endroit où vous souhaitez ajouter l’image générée. Pour cet exemple, dessinez autour de l’objet existant pour sélectionner l’arrière-plan.

  9. Cliquez sur Générer pour afficher les résultats.

  10. Choisissez parmi les différents résultats, en sélectionnant l'option souhaitée et en cliquant sur Conserver.

  11. Cliquez sur Vos affaires pour revenir à l’éditeur d’image.

  12. Cliquez sur Enregistrer pour spécifier le type d’image.

  13. Cliquez de nouveau sur Enregistrer pour enregistrer les modifications.

  14. Dans la boîte de dialogue Enregistrer la ressource, sélectionnez le Commerce Dossier de destination.

    Boîte de dialogue Enregistrer la ressource avec le dossier de destination Commerce sélectionné {width="600" modal="regular"}

  15. Cliquez sur Enregistrer en tant que nouvelle ressource pour enregistrer l’image.

Ajoutez l’image à Commerce AEM Assets

  1. Dans le Panneau de navigation de AEM as a Cloud Service, sélectionnez Assets > Fichiers > Commerce et cliquez sur la ressource que vous avez créée dans la section précédente.

    Dossier Commerce en AEM Assets avec les images du produit {width="600" modal="regular"}

  2. Cliquez sur Propriétés.

    Bouton Propriétés dans AEM Assets barre d’outils {width="600" modal="regular"}

  3. Sélectionnez l’onglet Commerce.

    Onglet Commerce dans le panneau des propriétés de la ressource {width="600" modal="regular"}

  4. Vérifiez que le existe-t-il dans Adobe Commerce ? champ est défini sur Oui.

  5. Cliquez sur Ajouter et saisissez le SKU du produit auquel vous souhaitez ajouter la ressource.

    Ajouter un SKU pour lier la ressource au produit {width="600" modal="regular"}

  6. Sélectionnez la position et le type de la ressource.

  7. Sélectionnez l’onglet De base et modifiez l’onglet Statut de la révision en Approuvé.

    Le menu déroulant Statut de la révision est défini sur Approuvé dans l’onglet De base {width="600" modal="regular"}

  8. Cliquez sur Enregistrer et fermer.

Confirmer l’image dans Commerce

  1. Dans Adobe Commerce Admin, accédez à Catalogue > Produits.

  2. Sélectionnez le produit auquel vous avez ajouté l’image dans la section précédente.

  3. Développez la section Images et vidéos.

    Section Images et vidéos développée dans la modification de produit {width="600" modal="regular"}

  4. Vérifiez que votre image est maintenant disponible dans la liste des images.

  5. Revenez à votre storefront et accédez à la page du produit modifié.

  6. Vérifiez que la nouvelle image s’affiche.

    Page produit sur le storefront affichant la nouvelle image générée {width="600" modal="regular"}

Générer des variations

Adobe Commerce utilise Generate Variations pour automatiser la génération de contenu de haute qualité, affiner la messagerie et publier facilement des ressources sur votre storefront.

Générer du texte

  1. Ouvrez votre site storefront à l’aide de l’éditeur universel.

  2. Sélectionnez le bloc de texte à modifier.

  3. Dans le panneau Propriétés, cliquez sur Générer des variations.

  4. Cliquez sur le bouton Générer.

  5. Sélectionnez ou personnalisez le texte généré.

  6. Cliquez sur Publier pour mettre à jour votre storefront.

Générer du contenu et des images

  1. Ouvrir le Generate Variations

  2. Sélectionnez le modèle Bannière héroïque.

  3. Dans la zone de texte Expliquer l’interaction utilisateur, saisissez : « Expérience permettant aux employés et aux partenaires d’Adobe d’acheter des équipements de marque Adobe ! ».

  4. Dans l’URL pour la connaissance de domaine, saisissez www.adobestore.com.

  5. Cliquez sur Générer.

  6. Sélectionnez une variation de contenu et cliquez sur Générer une image.

  7. Dans la liste déroulante Taille de l’image, sélectionnez Écran large (16:9).

  8. Dans la liste déroulante Type de contenu, sélectionnez Photo.

  9. Pour l’image de référence Style, sélectionnez la bannière de magasin Adobe existante.

  10. Sélectionnez l’image générée à utiliser, puis cliquez sur Enregistrer.

  11. Répétez ce processus avec d’autres images de référence pour générer d’autres variations.

Dépannage

Suivez les suggestions suivantes pour résoudre les problèmes rencontrés lors de ces tutoriels.

  • Si vous avez besoin de conseils sur les commandes ou les indicateurs :

    1. Exécutez aio --help pour afficher toutes les commandes et indicateurs disponibles.

    2. Pour des commandes spécifiques, utilisez l’indicateur --help . Par exemple :

      • aio console --help
      • aio commerce --help

  • Si vous rencontrez des problèmes de connexion non valides :

    1. Exécutez aio config clear.
    2. Exécutez aio auth login --force.
    3. Connectez-vous à votre navigateur.
    4. Sélectionnez votre profil.
    5. Revenez au terminal pour continuer.

  • Si la commande init échoue :

    1. Exécutez aio api-mesh delete.
    2. Réexécutez aio commerce init.

  • Si vous n’avez pas sélectionné l’organisation, le projet ou l’espace de travail approprié avant d’exécuter la commande init :

    1. Exécutez aio console org select.
    2. Exécutez aio console project select.
    3. Exécutez aio console workspace select.

  • Si vous avez une sélection de client non valide :

    1. Annulez l’exécution actuelle de l’interface de ligne de commande en appuyant sur Ctrl+C.
    2. Exécutez aio commerce init.

  • Si vous rencontrez une installation du maillage API non valide :

    • Exécutez aio api-mesh update mesh-config.json.
recommendation-more-help
aa40c2bf-3234-45d5-985f-5d274c066970