Configurer votre storefront

Créer votre projet de storefront-Utilisez l’outil Créateur de site pour créer un projet de storefront avec un code standard, un exemple de contenu et un fichier de configuration.

Personnaliser la configuration storefront-Mettez à jour le fichier config.json dans votre référentiel pour vous connecter à votre instance Adobe Commerce Optimizer.

Vérification de la configuration (10 minutes)

• Prévisualiser votre site storefront
• Tester les pages de détails du produit et la fonctionnalité de recherche

Ouvrez l’outil Créateur de site

{width="700" modal="regular"}

Sélectionnez Créer un site (code et contenu).

Effectuez la configuration du site :

• Organisation/nom d’utilisateur GitHub : saisissez votre nom d’utilisateur ou d’organisation GitHub
• Nom du site : choisissez un nom explicite pour votre storefront
• Point d’entrée Commerce GraphQL (facultatif) : saisissez le point d’entrée GraphQL de votre instance Adobe Commerce Optimizer

Cliquez sur Créer un site pour créer le référentiel GitHub avec le code standard du storefront.

Lorsque le référentiel est créé, le créateur du site se met à jour et vous invite à installer l’application de synchronisation du code.

Cliquez sur Install AEM Code Sync App pour ouvrir le programme d’installation de la synchronisation du code dans un nouvel onglet.

Configurez l’application de synchronisation du code :

• Sélectionnez votre organisation GitHub, puis cliquez sur Configure.
• Dans l’interface de synchronisation du code, cliquez sur Only select repositories.
• Cliquez sur le menu Select repositories, puis choisissez le référentiel de code storefront que vous avez créé.
• Cliquez sur Save pour enregistrer votre référentiel.

Revenez à la fenêtre du navigateur dans laquelle le créateur du site est ouvert, puis cliquez sur Créer un site.

Le créateur du site copie le contenu standard du storefront dans l’environnement de création de documents. Ce processus prend entre 1 et 2 minutes.

Dans la section Détails du site , passez en revue les liens de votre projet de storefront :

{width="700" modal="regular"}

Utilisez ces liens pour gérer le code, le contenu et la configuration de votre storefront.

Copiez et enregistrez ces liens pour référence ultérieure : cliquez sur **Copy.

Ouvrez Configuration Manager à l’aide du lien que vous avez enregistré précédemment :

https://da.live/sheet#/<username or org>/<repo name>/config.json

Recherchez la section cs (Catalog Service) dans la configuration.

Remplacez les valeurs d’espace réservé par les valeurs de votre instance. Voir Conditions préalables.

"cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

Enregistrez le fichier de configuration.

Accédez à votre URL d’aperçu en direct :

https://main--{SITE}--{ORG}.aem.live

Remplacez {ORG} et {SITE} par le nom de votre organisation et de votre site GitHub.

Critères de réussite : vous devriez voir la page d’accueil du storefront avec du contenu standard.

{width="700" modal="regular"}

Accédez à un exemple de page de produit :
https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

Utilisez n’importe quel SKU de vos données d’exemple, par exemple :
https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

Pour le storefront par défaut, vous pouvez utiliser la valeur placeholder dans l’itinéraire pour afficher le produit. Lorsque vous commencez à personnaliser votre storefront, vous pouvez personnaliser le code de storefront pour définir le chemin d’accès à la page des détails du produit en fonction des itinéraires de produit définis dans votre catalogue.

Critères de réussite : la page doit afficher :

• Nom, description et prix du produit
• Images du produit
• Fonctionnalité Ajouter au panier
• Données extraites de votre instance Adobe Commerce Optimizer

{width="700" modal="regular"}

Sur la page d’accueil du storefront, cliquez sur l’icône de loupe dans l’en-tête.

Saisissez la chaîne de recherche tires et appuyez sur Entrée.

Critères de réussite : vous devriez voir :

• Page de résultats de recherche avec produits pneumatiques
• Options de filtrage dans la barre latérale
• Listes de produits avec images et prix

{width="675" modal="regular"}

Cliquez sur n'importe quel produit de pneu pour voir sa page détaillée.

{width="675" modal="regular"}

Installer Sidekick - Extension de navigateur pour la modification, la prévisualisation et la publication de contenu directement à partir de votre site web

Configuration d’un environnement de développement local - Créez un environnement local pour personnaliser le code et le contenu de votre storefront