Page Builder Présentation de la partie 2 : blocs

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.

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.

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.

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.

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"}

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"}

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 :

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"}

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.

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.

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.

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.

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"}