Storefront Preview

Vous pouvez utiliser Storefront Preview (aperçu de la boutique) pour voir à quoi ressemblera votre site Progressive Web App (PWA) Kit en fonction du contexte, tel que le code source spécifié, les groupes de clients ou une date ou une heure particulière. Par exemple, si vous souhaitez prévisualiser l’apparence de votre site lors d’une vente à venir, vous pouvez utiliser cette fonctionnalité.

Les soldes du Black Friday/Cyber Monday arrivent bientôt ? Prévisualisez les modifications apportées à votre site dans un environnement de staging. Ensuite, assurez-vous que les modifications apportées aux produits, aux prix et aux stratégies marketing fonctionnent comme prévu avant de les déployer en production.

En outre, vous pouvez intégrer Storefront Preview à un système de gestion de contenu (CMS) tiers. Supposons, par exemple, que vous ayez une bannière de soldes de Noël gérée par votre CMS. Vous pouvez autoriser votre CMS à reconnaître le contexte actuel, tel que la date et l’heure d’entrée en vigueur, afin que l’aperçu de votre site affiche le contenu correct, comme la bannière des soldes de Noël pour la période spécifiée.

Storefront Preview est disponible dans Runtime Admin. Ce guide explique comment configurer, utiliser et dépanner Storefront Preview.

Pour utiliser Storefront Preview, vous devez d’abord :

Créer votre site à l’aide de la version 2.8.3 ou ultérieure de PWA Kit, ou de la version 3.2.x avec @salesforce/commerce-sdk-react@1.4.0 ou @salesforce/retail-react-app@2.4.0. Storefront Preview n’est pas disponible dans les versions de PWA Kit antérieures à la version 2.8.3 ou 3.2.x. Mettez à jour votre projet pour utiliser PWA Kit 2.8.3 ou 3.2.x en fonction de votre version majeure actuelle.
Avoir accès au projet dans Runtime Admin dans n’importe quel rôle autre que lecture seule. Si vous n’y avez pas accès, demandez à quelqu’un disposant d’un rôle d’administrateur Managed Runtime (MRT) de vous aider.
Activer le contexte des acheteurs dans Business Manager.
Configurer votre site en fonction de la fonctionnalité que vous souhaitez valider dans Storefront Preview. Exemples :
- Configurez des critères de qualification personnalisés et des identifiants de groupe de clients à l’aide de groupes de clients dans Business Manager pour appliquer des règles pour les prix, les produits ou les promotions personnalisés.
- Pour bénéficier d’une expérience d’achat personnalisée, configurez le code source qui appelle les points de terminaison Shopper Context. Cette opération est nécessaire car Storefront Preview utilise des informations contextuelles pour la personnalisation.
- Configurez les prix que vous souhaitez proposer à une date donnée. De cette façon, le prix que vous avez spécifié s’affiche lorsque vous sélectionnez cette date dans Storefront Preview.
Suivre les étapes de configuration décrites dans la section Configurer Storefront Preview.
Configurer votre navigateur pour autoriser les cookies tiers sur https://runtime.commercecloud.com.

Si vous le souhaitez, vous pouvez écrire une fonction si vous souhaitez intégrer Storefront Preview à un CMS tiers. Voir Ajouter le composant StorefrontPreview à votre boutique en ligne et Intégrer à un CMS tiers.

La fonction que vous écrivez pour l’intégrer à un CMS tiers doit être asynchrone. Cela vous permettra d’éviter des résultats inattendus lorsque vous prévisualiserez votre site.

Vous pouvez utiliser Storefront Preview avec les dernières versions de Chrome ou Safari. Votre navigateur doit permettre à https://runtime.commercecloud.com d’accéder aux cookies tiers. Storefront Preview ne fonctionnera pas si vous n’activez pas les cookies tiers.

Découvrez comment activer les cookies tiers pour Chrome et Safari.

Les données et les expériences affichées dans Storefront Preview ne reflètent pas nécessairement l’expérience d’achat. La personnalisation de l’acheteur nécessite l’utilisation de l’API Shopper Context dans votre projet PWA Kit. En savoir plus sur Shopper Context
Storefront Preview affiche les pages de la boutique telles qu’elles apparaissent à un utilisateur invité sur votre site. Par exemple, un utilisateur invité peut consulter le contenu produit ou marketing, les prix, les promotions, les listes de produits ou les pages d’affichage des produits. Vous ne verrez pas le contenu que voit un utilisateur connecté, comme les informations de compte ou un panier.
Storefront Preview fonctionne sur les pages PWA Kit et non sur les pages Storefront Reference Architecture (SFRA). Toutefois, vous pouvez utiliser l’outil Aperçu du site Storefront Toolkit dans B2C Commerce pour prévisualiser les pages SFRA.

Suivez ces étapes de configuration unique requises pour chaque site qui utilise Storefront Preview :

Vous devez créer un client privé Shopper Login and API Access Service (SLAS) avec les étendues sfcc.shopper-context.rw et sfcc.ts_ext_on_behalf_of pour les instances B2C Commerce utilisées par votre boutique en ligne. Storefront Preview utilise le client privé SLAS pour définir le contexte dans la boutique en ligne. Le client privé SLAS peut être facilement créé à l’aide de l’interface utilisateur d’administration de SLAS.

Suivez les étapes du guide Autorisation pour les Shopper API afin de créer un client privé SLAS pour chaque instance B2C Commerce dans laquelle vous souhaitez utiliser Storefront Preview :

Sélectionnez le type d’application BFF ou Web App dans le champ Quel type d’application sera utilisé ? pour créer un client privé.
Spécifiez les étendues séparées par un espace dans le champ Saisir les étendues acheteur : sfcc.shopper-context.rw sfcc.ts_ext_on_behalf_of

Copiez la clé secrète client générée automatiquement et affichée en haut de la page de résultats et l’identifiant client afin de pouvoir les utiliser à l’étape suivante.

Pour créer les variables d’environnement MRT, appelez le point de terminaison projects_target_env_var_partial_update de l’API MRT. Remplacez $SLAS_PRIVATE_CLIENT_ID et $SLAS_PRIVATE_CLIENT_SECRET par les valeurs que vous avez copiées à l’étape 1. Remplacez-$CC_SHORT_CODE par la valeur de configuration du shortcode de Business Manager. Vous pouvez également utiliser Runtime Admin pour gérer les variables d’environnement. Voir Variables d’environnement.

L’appel de cette API redéploie votre paquet actuellement déployé. Vous devez attendre la fin du redéploiement avant de prévisualiser votre boutique en ligne. Une fois le redéploiement terminé, le paquet s’affiche sous l’en-tête Deployed Bundle dans le répertoire de votre projet.

Pour utiliser Storefront Preview avec une boutique connectée à votre instance B2C Commerce, vous devez disposer de l’un des rôles d’utilisateur Account Manager suivants : Administrateur Business Manager ou Utilisateur Business Manager. Pour vérifier si vous disposez de l’un de ces rôles, vérifiez vos rôles dans Account Manager.

Si vous ne disposez d’aucun des rôles requis, suivez ces instructions relatives à l’octroi d’autorisations pour ajouter des instances à votre utilisateur Account Manager.

Cette étape n’est requise que pour les projets générés avant la sortie des versions 2.8.0 et 3.2.0 de PWA Kit.
Pour n’importe quelle version de PWA Kit, si vous souhaitez intégrer Storefront Preview à un CMS tiers, vous devez ajouter la propriété onContextChange au composant StorefrontPreview. Si vous avez déjà ajouté le composant StorefrontPreview à votre boutique en ligne, reportez-vous à la section Intégrer à un CMS tiers.

Pour que la communication entre Runtime Admin et votre boutique fonctionne, établissez un canal de communication. Cela se fait en deux étapes :

Pour activer la communication, effectuez le rendu du composant StorefrontPreview à partir du SDK React de PWA Kit dans votre boutique. Le composant StorefrontPreview injecte un script pour établir la communication avec Runtime Admin. Ce script n’affecte pas les performances de votre boutique car il ne se charge que lorsque votre boutique est en cours d’exécution dans Storefront Preview.
Quel que soit l’endroit où vous effectuez le rendu StorefrontPreview, vous devez définir la propriété getToken, qui doit renvoyer le jeton d’accès de l’acheteur actuel.

Si vous souhaitez intégrer Storefront Preview à un CMS tiers, vous pouvez également ajouter la propriété onContextChange au composant StorefrontPreview. Voir Intégration avec un CMS tiers. Dans les exemples ci-dessous, nous ajoutons la propriété onContextChange et lui passons une fonction asynchrone nommée handleContextChange. Vous pouvez remplacer l’instruction console.log dans la fonction handleContextChange par votre propre logique pour répondre aux changements de contexte. Personnalisez la fonction handleContextChange en fonction de vos besoins spécifiques. Le paramètre newContext de la fonction contiendra les informations de contexte mises à jour.

Si vous disposez de la version 2.8.x de PWA Kit, utilisez le code suivant dans votre boutique en ligne pour établir un canal de communication. Ajoutez le composant StorefrontPreview autour de votre composant IntlProvider dans le fichier _app/index.jsx.

Si vous disposez de la version 3.2.x de PWA Kit, utilisez le code suivant dans votre boutique en ligne pour établir un canal de communication. Ajoutez le composant StorefrontPreview autour de votre composant IntlProvider dans le fichier _app/index.jsx.

Cette étape n’est requise que pour les projets générés avant la sortie des versions 2.8.0 et 3.2.0 de PWA Kit.
À partir des versions 2.8.1 et 3.2.1, cette étape se fait automatiquement dans les nouveaux projets.
Cette étape n’est pas requise pour les projets utilisant PWA Kit version 2.8.0 ou 3.2.0, car le middleware defaultPwaKitSecurityHeaders n’existe pas dans ces versions.

Pour activer le canal de communication, votre boutique doit :

Permettre d’être incorporée dans un iframe par Runtime Admin (runtime.commercecloud.com), et
Autoriser le chargement et l’exécution du script mentionné à l’étape 4.

Activez le canal de communication en ajoutant https://runtime.commercecloud.com aux directives frame-ancestors, connect-src et script-src de votre politique de sécurité du contenu (CSP). Pour que cela soit géré automatiquement, importez et utilisez le middleware defaultPwaKitSecurityHeaders fourni par le package pwa-kit-runtime.

Si vous avez déjà ajouté le composant StorefrontPreview à votre boutique en ligne et que vous souhaitez maintenant l’intégrer à un CMS tiers, ajoutez la propriété onContextChange au composant StorefrontPreview. Voir Intégration avec un CMS tiers.

Dans les exemples ci-dessous, nous ajoutons la propriété onContextChange et une fonction asynchrone nommée handleContextChange. Vous pouvez remplacer l’instruction console.log dans la fonction handleContextChange par votre propre logique pour répondre aux changements de contexte. Personnalisez la fonction handleContextChange en fonction de vos besoins spécifiques. Le paramètre newContext de la fonction contiendra les informations de contexte mises à jour.

Si vous disposez de la version 2.8.x de PWA Kit, utilisez le code suivant pour ajouter la propriété onContextChange dans le fichier _app/index.jsx.

Si vous disposez de la version 3.2.x de PWA Kit, utilisez le code suivant pour ajouter la propriété onContextChange dans le fichier _app/index.jsx.

Procédez comme suit pour utiliser Storefront Preview :

Ouvrez Runtime Admin dans votre navigateur et connectez-vous à l’aide de vos informations d’identification Account Manager.
Accédez à la page Environnements du projet et cliquez sur Preview Site (Prévisualiser le site) en regard de l’environnement dans lequel vous souhaitez prévisualiser votre site.

Un nouvel onglet s’ouvre pour afficher la boutique, avec le formulaire Storefront Preview dans la barre latérale gauche.
(Facultatif) Choisissez la date et l’heure d’entrée en vigueur de l’aperçu du contexte. La date et l’heure affichées sont basées sur le fuseau horaire de votre ordinateur, puis converties en heure UTC avant d’envoyer la request qui définit le contexte. Si vous ne spécifiez pas de date et d’heure, l’aperçu reflète la date et l’heure actuelles.
(Facultatif) Saisissez le code source qui déclenche la promotion (association de campagne) et les listes de prix (associées au groupe de codes source) pour le contexte que vous souhaitez prévisualiser.
(Facultatif) Saisissez les identifiants de groupe de clients configurés dans Business Manager. Séparez chaque identifiant par une virgule.
(Facultatif) Saisissez les critères de qualification personnalisés qui s’appliquent aux prix, produits ou promotions personnalisés configurés dans Business Manager. Les clés de critères de qualification personnalisés doivent être uniques. Vous pouvez définir jusqu’à 20 critères de qualification personnalisés.
Cliquez sur Preview (Aperçu).

Vous pouvez maintenant naviguer dans la boutique à l’aide du contexte que vous souhaitez prévisualiser.

Pour faciliter le partage, l’URL de l’onglet du navigateur est mise à jour pour inclure les valeurs contextuelles.

Vous devez parfois interagir avec la boutique prévisualisée pour voir le comportement attendu. Par exemple, vous pouvez cliquer sur une taille de vêtement particulière pour afficher les prix réduits applicables.

Si vous rencontrez des problèmes avec Storefront Preview, vous pouvez activer les journaux Storefront Preview dans votre environnement MRT. Cela imprime des journaux supplémentaires lorsque vous cliquez sur le bouton Preview pour vous aider à déboguer les problèmes.

Pour activer les journaux Storefront Preview, ajoutez la variable d’environnement STOREFRONT_PREVIEW_DEBUG=1 à votre environnement MRT.

Vous pouvez utiliser les journaux de queue MRT pour lire les journaux Storefront Preview.

Cette section propose des solutions pour les erreurs courantes que vous pouvez rencontrer lors de l’utilisation de Storefront Preview.

En fonction de votre navigateur, vous pouvez rencontrer des comportements différents lorsque les cookies tiers ne sont pas activés.

Chrome : une fenêtre modale s’affiche indiquant « Preview is not enabled on this storefront » (L’aperçu n’est pas activé sur cette boutique) et la boutique affiche une SecurityError.
Safari : une fenêtre modale indique « Failed to initialize Storefront Preview » (Échec de l’initialisation de Storefront Previwe) et la boutique n’est pas visible.

Cause : votre navigateur n’autorise pas les cookies tiers sur https://runtime.commercecloud.com.

Solution suggérée : mettez à jour les paramètres de votre navigateur et toutes les extensions que vous pouvez utiliser pour autoriser les cookies tiers sur https://runtime.commercecloud.com.

Message d’erreur lors du chargement de Storefront Preview : "Preview is not enabled on this storefront!"

Cause : il manque à la boutique en ligne le fichier de script qui permet de communiquer avec Runtime Admin.

Solution suggérée : suivez les instructions affichées dans la fenêtre de message d’erreur ou terminez les configurations de l’étape 4.

Message d’erreur de réponse lorsque vous cliquez sur le bouton Preview :

Solution suggérée : effectuez les configurations de l’étape 1 et de l’étape 2.

En fonction de votre navigateur, vous pouvez rencontrer une erreur si vous ne disposez pas de la bonne politique de sécurité du contenu.

Chrome : une fenêtre modale s’affiche indiquant « Preview is not enabled on this storefront » (L’aperçu n’est pas activé sur cette boutique) et la boutique affiche une page d’erreur indiquant « refused to connect » (refus de connexion).
Safari : une fenêtre modale s’affiche indiquant « Preview is not enabled on this storefront » (L’aperçu n’est pas activé sur cette boutique) et la boutique n’est pas visible.

Cause : votre boutique n’autorise pas Runtime Admin dans sa politique de sécurité du contenu.

Solution suggérée : suivez les instructions de l’étape 5 pour configurer correctement votre politique de sécurité du contenu.

La page initiale chargée par Storefront Preview correspond au domaine configuré en tant que nom d’hôte externe pour l’environnement.

Cause : le nom d’hôte externe n’est pas configuré correctement dans les paramètres de votre environnement.

Solution suggérée : configurez le nom d’hôte externe dans la section Advanced (Avancés) de vos paramètres d’environnement pour qu’il pointe vers le domaine approprié.

Message d’erreur de réponse affiché lorsque vous cliquez sur le bouton Preview :

Solution suggérée : effectuez l’étape 3.

Message d’erreur de réponse affiché lorsque vous cliquez sur le bouton Preview :

Cause : valeurs incorrectes dans les variables d’environnement MRT SLAS_PRIVATE_CLIENT_ID et SLAS_PRIVATE_CLIENT_SECRET ou configuration incorrecte du client privé SLAS.

Solution suggérée : effectuez l’étape 1 et l’étape 2.

Lors de l’aperçu de votre site après avoir ajouté la propriété onContextChange au composant StorefrontPreview, vous pouvez obtenir des messages d’erreur ou des résultats inattendus.

Cause : il se peut qu’il y ait un problème avec la fonction appelée par la propriété onContextChange.

Solution suggérée : supprimez la propriété onContextChange et la fonction qu’elle appelle à partir du composant StorefrontPreview. Prévisualisez ensuite votre site et voyez si les mêmes problèmes se produisent. Si ce n’est pas le cas, déboguez votre fonction pour résoudre les erreurs. Par exemple, vous pouvez :

Ajouter la propriété onContextChange et la fonction qu’elle appelle vers le composant StorefrontPreview. Voir Intégrer avec un CMS tiers.
Inspecter l’activité du réseau lors de l’aperçu de votre site et voir si la request de récupération envoie les données attendues.

Si vous rencontrez toujours des problèmes après avoir retiré la propriété onContextChange et la fonction qu’elle appelle, ouvrez un dossier de support.

Lors de la prévisualisation de votre site, le contenu ne s’affiche pas comme prévu et aucune des erreurs ci-dessus ne se produit. Par exemple, les prix ne changent pas en fonction des valeurs que vous avez saisies dans Storefront Preview.

Cause : il est possible que vous n’ayez pas effectué un ou plusieurs des prérequis.

Solution suggérée : confirmez que vous avez effectuer tous les prérequis. Si c’est le cas et que vous rencontrez toujours des problèmes, ouvrez un dossier de support.