Page Builder Présentation de la partie 2 : blocs
L’exercice suivant illustre la différence entre blocs simples et blocs dynamiques, et comment utiliser Page Builder pour créer chaque type de bloc.
Cet exercice suppose que vous avez terminé Partie 1 : Page simple, y compris les conditions préalables et les fichiers d’exemple téléchargés. Suivez les parties de cet exercice pas à pas dans l’ordre.
Partie 1 : créer un bloc simple
Dans cet exercice de présentation, vous créez un bloc simple avec du contenu de Google Maps. Les blocs simples sont parfois appelés blocs CMS ou blocs statiques, car le contenu ne change pas. Un bloc simple est idéal pour le contenu que vous souhaitez peut-être réutiliser.
Etape 1 : créer un bloc
-
Sur la barre latérale Admin, accédez à Content > Elements>Blocks.
-
Dans le coin supérieur droit, cliquez sur Add New Block.
-
Pour Block Title, saisissez
Google Map
. -
Pour Identifier, saisissez
google-map
. -
Sélectionnez l’ Store View où le bloc doit être disponible.
{width="600" modal="regular"}
-
Dans le coin supérieur droit, cliquez sur Save.
Étape 2 : Ajouter un Google Map
-
Faites défiler l’écran jusqu’à l’aperçu du contenu Page Builder (actuellement vide) et cliquez sur Edit with Page Builder.
-
Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Map sur la scène.
{width="600" modal="regular"}
Une carte de l’emplacement de votre magasin s’affiche si Google Maps est configuré pour votre magasin.
{width="600" modal="regular"}
Un mappage d’espace réservé s’affiche si Google Maps n’est pas encore configuré pour votre magasin.
{width="600" modal="regular"}
-
Dans le coin supérieur droit de l’étape, cliquez sur l’icône Fermer le plein écran ( ).
Cliquez sur cette icône pour revenir à la section Content du bloc dont l'aperçu est affiché.
-
Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.
Étape 3 : configurer Google Maps
Si Google Maps est déjà configuré pour votre magasin, vous pouvez ignorer cette étape et passer à l’étape suivante.
-
Accédez à la console Google Cloud Platform.
-
Cliquez sur la liste déroulante du projet et sélectionnez ou créez le projet pour lequel vous souhaitez ajouter une clé API.
-
Pour configurer vos informations d’identification d’API, suivez les instructions de la documentation Google Maps.
-
Copiez votre clé API dans le Presse-papiers.
-
Revenez à l’administrateur Commerce et accédez à Stores > Settings>Configuration.
-
Dans le panneau de gauche sous General, choisissez Content Management.
-
Développez Advanced Content Tools.
{width="600" modal="regular"}
Pour plus d’informations sur les options de configuration Content Management Advanced Tools, consultez le Guide de référence de configuration.
-
Pour Google Maps API Key, collez la clé que vous avez copiée.
-
Cliquez sur Test Key.
En cas de problème avec votre clé, revenez au site de la plateforme Google Maps pour résoudre le problème. Ensuite, réessayez.
-
Une fois votre clé vérifiée, cliquez sur Save Config.
Etape 4 : Ajouter le bloc à une page
-
Sur la barre latérale Admin, accédez à Content > Elements>Pages.
-
Dans la grille, recherchez le Simple Page que vous avez créé dans le premier tutoriel et sélectionnez Edit dans la colonne Action.
-
Développez de la section Content et cliquez sur Edit with Page Builder ou dans la zone d’aperçu du contenu.
-
Dans le panneau Page Builder sous Layout, faites glisser un espace réservé Row en haut de l’étape.
{width="600" modal="regular"}
-
Dans le panneau Page Builder, développez Add Content et faites glisser un espace réservé Block sur la nouvelle ligne.
-
Passez la souris sur le conteneur de blocs vide pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
{width="600" modal="regular"}
-
Sur la page Modifier le bloc , cliquez sur Select Block.
{width="600" modal="regular"}
-
Dans la zone de recherche, saisissez
map
et appuyez sur la touche Entrée/Retour pour trouver le bloc que vous avez créé.{width="600" modal="regular"}
-
Dans la grille, cliquez sur Select pour choisir le bloc Google Maps.
-
Dans le coin supérieur droit, cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.
-
Dans le coin supérieur droit de l’étape, cliquez sur l’icône Fermer le plein écran ( ).
Cliquez sur cette icône pour revenir à la section Content de la page dont l’aperçu est affiché.
-
Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.
Félicitations ! Vous avez terminé la première partie de l’exercice Bloc. Veillez à conserver votre travail à titre de référence.
Partie 2 : créer un bloc dynamique
Un bloc dynamique comprend une logique qui détermine où, quand et à qui il apparaît. Dans cet exercice pas à pas, vous créez un bloc dynamique pour une promotion qui est déclenchée lorsque les conditions des règles de prix sont remplies et qui ne s’affiche que pour un segment de client spécifique. Le résultat de cet exemple est similaire à la bannière créée lors du premier exercice, mais avec une logique qui contrôle le moment où elle apparaît dans le storefront.
Etape 1 : créer un bloc dynamique
-
Sur la barre latérale Admin, accédez à Content > Elements>Dynamic Blocks.
{width="700" modal="regular"}
-
Dans le coin supérieur droit, cliquez sur Add Dynamic Block.
{width="600" modal="regular"}
-
Renseignez les paramètres de base du nouveau bloc dynamique :
-
Définissez Enable Dynamic Block sur
Yes
. -
Pour Dynamic Block Name, saisissez
Tee Shirt Promo
. -
Définissez Dynamic Block Type sur
Content Area
et cliquez sur Done.Le type de bloc dynamique détermine où le bloc est placé dans la mise en page. Lors de la configuration d’un bloc dynamique pour votre magasin, pensez à la fois à la mise en page et au thème, de sorte que vous puissiez utiliser l’espace disponible à bon escient. Certains magasins disposent d’une zone de contenu active limitée à une largeur fixe, tandis que d’autres étendent la largeur totale de l’écran.
{width="600" modal="regular"}
-
Pour Customer Segment, cochez la case de chaque segment à appliquer au bloc dynamique et cliquez sur Terminé pour enregistrer la liste de segments.
Pour l’exemple suivant, il existe deux segments de clients qui identifient les clients enregistrés par sexe. Ce bloc dynamique s’affiche uniquement pour les clientes enregistrées qui sont connectées à leurs comptes lorsqu’elles font leurs achats dans votre boutique.
{width="600" modal="regular"}
-
Étape 2 : Définition des paramètres
Faites défiler l'écran jusqu'à la section Content, qui affiche un aperçu du contenu Page Builder vide, puis cliquez sur Edit with Page Builder. Ensuite, effectuez les tâches suivantes :
Tâche 1 : Ajouter une image d’arrière-plan
-
Pointez sur le conteneur de lignes pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
-
Sous Appearance, choisissez Full Bleed.
-
Pour Minimum Height, saisissez
400px
. -
Accédez à la section Background et définissez Background Image en cliquant sur Select from Gallery et en choisissant l’image
wide-banner-background.png
chargée dans le premier tutoriel. -
Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
{width="600" modal="regular"}
Tâche 2 : Ajouter des colonnes
Dans le panneau Page Builder sous Layout, faites glisser un espace réservé Column sur la ligne.
La ligne est maintenant divisée en deux colonnes de largeur égale.
Tâche 3 : Ajouter du texte
-
Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Texte vers la deuxième colonne.
{width="600" modal="regular"}
-
Saisissez les trois lignes de texte suivantes dans l’éditeur :
Even more ways to mix and match.
Buy 3 Luma tees and get a 4th free.
Shop Tees >
{width="600" modal="regular"}
-
Sélectionnez les trois lignes de texte et utilisez la barre d’outils pour définir la hauteur de ligne sur
40px
.{width="600" modal="regular"}
-
Définissez le Font Size pour chaque ligne comme suit :
table 0-row-2 1-row-2 2-row-2 3-row-2 Ligne Taille de police Ligne 1 : 28px
Ligne 2 : 24px
Ligne 3 : 18px
Comme ce bloc peut être placé n’importe où sur la page, utilisez le style de paragraphe par défaut plutôt que les niveaux d’en-tête. De plus, ne vous inquiétez pas que le texte ne soit pas encore correctement renvoyé à la ligne dans la colonne.
{width="600" modal="regular"}
Tâche 4 : Ajouter un lien
Au cours du premier exercice, vous avez appris à utiliser le type de contenu Button pour créer un lien. Cet exemple montre comment insérer un lien à partir de la barre d'outils de l'éditeur.
-
Dans un autre onglet du navigateur, ouvrez le storefront et accédez à la page qui doit être la destination cible du lien.
Vous pouvez utiliser l’URL complète ou une URL relative qui omet la référence à votre domaine de magasin.
URL complète
:https://mystore.com/women/tops-women/tees-women.html
URL relative
:../women/tops-women/tees-women.html
-
Revenez à l’onglet de l’espace de travail Page Builder et à l’éditeur de texte, sélectionnez le texte
Shop Tees >
sur la troisième ligne, puis sélectionnez Bold ( ) dans la barre d’outils de l’éditeur. -
Avec le texte
Shop Tees >
sur la troisième ligne toujours sélectionné, choisissez Insérer/Modifier le lien ( ) dans la barre d’outils de l’éditeur.{width="600" modal="regular"}
-
Pour URL, saisissez le lien relatif que vous avez préparé.
-
Définissez Target sur
None
.Ce paramètre permet d’ouvrir la page dans la même fenêtre du navigateur, plutôt que d’ouvrir un nouvel onglet.
-
Pour Title, saisissez
Shop Tees
.L’attribut de lien Titre est utilisé par certains navigateurs comme info-bulle.
-
Pour enregistrer le lien et revenir à l’espace de travail Page Builder, cliquez sur OK.
{width="600" modal="regular"}
-
Dans le coin supérieur droit de l’étape, cliquez sur l’icône Fermer le plein écran ( ).
Cliquez sur cette icône pour revenir à la section Content du bloc dynamique dont l'aperçu est affiché.
-
Dans le coin supérieur droit, cliquez sur Save.
Étape 3 : Ajouter une règle de prix
-
Ouvrez à nouveau le bloc dynamique Promo de la chemise en mode d'édition.
-
Développez de la section Related Promotions et cliquez sur Add Cart Price Rules.
{width="600" modal="regular"}
-
Sur la page Ajouter des règles de prix de panier connexes , cochez la case correspondant aux tee-shirts Acheter 3 et obtenez la quatrième règle de prix gratuit et cliquez sur Add Selected.
{width="600" modal="regular"}
La règle de prix apparaît dans la section Promotions connexes, sous la Règle de prix du panier connexe. Vous pouvez associer plusieurs règles de prix à un bloc dynamique. Cependant, cet exemple simple n’en utilise qu’un seul.
{width="600" modal="regular"}
-
Dans le coin supérieur droit, cliquez sur Save.
Etape 4 : Ajouter le bloc dynamique à une page
-
Dans la barre latérale Admin, accédez à Content > Elements>Pages
-
Recherchez la page simple que vous avez créée lors du premier exercice de présentation et ouvrez-la en mode d’édition.
-
Développez de la section Content et cliquez sur Edit with Page Builder.
-
Pointez sur la ligne supérieure avec la même image que le bloc dynamique pour afficher la boîte à outils et l’icône Supprimer ( {width="20"} ).
Pour confirmer la suppression de la ligne de la page, cliquez sur OK .
-
Dans le panneau Page Builder sous Layout, faites glisser un nouvel espace réservé Row en haut de l’étape.
-
Dans le panneau Page Builder, développez Add Content et faites glisser un espace réservé Dynamic Block sur la nouvelle ligne.
{width="600" modal="regular"}
-
Passez la souris sur le conteneur de blocs dynamiques pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
{width="600" modal="regular"}
-
Sur la page Edit Dynamic Block, cliquez sur Select Dynamic Block.
{width="600" modal="regular"}
-
Recherchez le bloc dynamique Tee Shirt Promo que vous avez créé et cliquez sur Select.
Un résumé des informations du bloc dynamique apparaît ci-dessous.
{width="600" modal="regular"}
-
Acceptez la valeur par défaut Template,
Dynamic Block Block Template
. -
Une fois l’opération terminée, cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.
{width="600" modal="regular"}
-
Dans le coin supérieur droit de l’étape, cliquez sur l’icône Fermer le plein écran ( ).
Cliquez sur cette icône pour revenir à la section Content de la page dont l’aperçu est affiché.
-
Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.
Vous avez terminé la deuxième partie de l’exercice Bloc. Veillez à conserver votre travail à titre de référence.
Partie 3 : mettre à jour le bloc dynamique
Dans cette dernière partie de l’exercice, vous modifiez un bloc dynamique pendant que la page est active dans votre magasin. Ensuite, connectez-vous au magasin en tant que membre du segment client pour faire apparaître le bloc.
Etape 1 : Editer le bloc dynamique
-
Dans la barre latérale Admin, accédez à Content > Elements>Dynamic Blocks.
-
Recherchez votre bloc dynamique Tee Shirt Promo dans la grille et ouvrez-le en mode d'édition.
-
Développez de la section Content et cliquez sur Edit with Page Builder.
-
Modifiez la largeur de la colonne :
-
Pointez sur la bordure entre les deux colonnes.
-
Maintenez le bouton de la souris enfoncé et faites glisser les deux divisions de la bordure vers la gauche.
{width="600" modal="regular"}
La première colonne est maintenant composée de quatre des 12 (4/12) divisions de grille larges et la seconde de huit des 12 (8/12) divisions larges.
{width="600" modal="regular"}
-
-
Modifiez la couleur du texte :
-
Sélectionnez les deux premières lignes de texte.
-
Dans la barre d’outils de l’éditeur, choisissez Text Color et cliquez sur l’échantillon White.
{width="600" modal="regular"}
-
-
Dans le coin supérieur droit de l’étape, cliquez sur l’icône Fermer le plein écran ( ).
Cliquez sur cette icône pour revenir à la section Content du bloc dynamique dont l'aperçu est affiché.
-
Dans le coin supérieur droit, cliquez sur Save.
Étape 2 : affichage du bloc dynamique
Ce bloc dynamique n’étant visible que par les membres d’un segment de client spécifique, vous devez vous connecter en tant que client qui est membre du segment de client pour afficher la promotion. Dans cet exemple, le bloc ne s'affiche que pour les clientes féminines.
-
Ouvrez une fenêtre de navigateur sur votre vitrine.
-
Pour afficher votre exemple de page, modifiez l’URL dans la barre d’adresse comme suit :
mystore.com/sample-page
Si votre magasin est configuré pour inclure le suffixe html, incluez le suffixe comme suit :
mystore.com/sample-page.html
-
Se connecter en tant que cliente féminine :
-
Dans le coin supérieur droit de votre page d’accueil, cliquez sur Sign In.
-
Si les exemples de données Luma sont installés sur votre système, utilisez les informations d’identification suivantes :
Email -
roni_cost@example.com
Password -
roni_cost3@example.com
-
Cliquez sur Sign In.
-
Revenez à la page d'exemple pour voir le bloc dynamique que vous avez créé avec la Promotion de la Tee Shirt.
{width="700" modal="regular"}
-
Vous avez terminé l’exercice Bloc . Veillez à conserver votre travail à titre de référence.
Lorsque vous êtes prêt, passez à la Partie 3 : contenu du catalogue