Page Builder Présentation de la partie 2 : blocs

Dans la barre latérale Admin, accédez à Content > Elements>Blocks.

Dans le coin supérieur droit, cliquez sur Add New Block.

Par Block Title, saisissez Google Map.

Par Identifier, saisissez google-map.

Choisissez le 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 vers la scène.

{width="600" modal="regular"}

Un mappage vers l’emplacement de votre boutique s’affiche si Google Maps est configuré pour cette dernière.

{width="600" modal="regular"}

Un espace réservé s’affiche si Google Maps n’est pas encore configuré pour votre boutique.

{width="600" modal="regular"}

Dans le coin supérieur droit de la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à la section Content​du bloc dont l’aperçu est affiché.

Dans le coin supérieur droit, cliquez sur la flèche Save et choisissez 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’administration 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.

Par 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 sur le site Google Maps Platform pour résoudre le problème. Réessayez ensuite.

Une fois votre clé vérifiée, cliquez sur Save Config.

Dans 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 la section Content, puis cliquez sur Edit with Page Builder ou dans la zone de prévisualisation du contenu.

Dans le panneau Page Builder sous Layout, faites glisser un espace réservé​ Row ​en haut de la scène.

{width="600" modal="regular"}

Dans le panneau Page Builder, développez Add Content et faites glisser un espace réservé Block vers la nouvelle ligne.

Pointez sur le conteneur de blocs vide pour afficher la boîte à outils et choisissez 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 de 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 la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à 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 choisissez Save & Close.

Dans 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.

• Par Dynamic Block Name, saisissez Tee Shirt Promo.

• Définissez Dynamic Block Type sur Content Area, puis cliquez sur Done.

  Le type de bloc dynamique détermine l’emplacement du bloc dans la mise en page. Lors de la configuration d’un bloc dynamique pour votre boutique, tenez compte à la fois de la mise en page et du thème afin de pouvoir utiliser au mieux l’espace disponible. Certains magasins ont une zone de contenu actif limitée à une largeur fixe, tandis que d’autres étendent la largeur totale de l’écran.

  {width="600" modal="regular"}

• Par Customer Segment, cochez la case de chaque segment à appliquer au bloc dynamique et cliquez sur Terminé pour enregistrer la liste des segments.

  Dans l’exemple suivant, deux segments de clients identifient les clients enregistrés par genre. Ce bloc dynamique s’affiche uniquement pour les clientes enregistrées qui sont connectées à leurs comptes lorsqu’elles font leurs achats dans votre magasin .

  {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.

Par Minimum Height, saisissez 400px.

Faites défiler jusqu’à la section Background​et définissez les 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 la ligne sur 40px.

{width="600" modal="regular"}

Définissez la Font Size de chaque ligne comme suit :

Étant donné que 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. Ne vous inquiétez pas non plus si le texte n’est 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 boutique.

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 choisissez Gras ( ) 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"}

Par URL, saisissez le lien relatif que vous avez préparé.

Définissez Target sur None.

Ce paramètre ouvre la page dans la même fenêtre du navigateur, plutôt que d’ouvrir un nouvel onglet.

Par Title, saisissez Shop Tees.

L’attribut Lien du 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 la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à la section Content​du bloc dynamique avec l’aperçu affiché.

Dans le coin supérieur droit, cliquez sur Save.

Ouvrez à nouveau le bloc dynamique Promo Tee Shirt en mode d’édition.

Développez 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 associées, cochez la case correspondant au Acheter 3 t-shirts et obtenez la 4e règle de prix gratuite puis cliquez sur Add Selected.

{width="600" modal="regular"}

La règle de prix apparaît dans la section Promotions liées sous Règle de prix de panier liée. 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 dans le premier exercice de présentation et ouvrez-la en mode d’édition.

Développez la section Content et cliquez sur Edit with Page Builder.

Pointez sur la ligne supérieure contenant 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 la scène.

Dans le panneau Page Builder, développez Add Content et faites glisser un espace réservé Dynamic Block vers la nouvelle ligne.

{width="600" modal="regular"}

Pointez sur le conteneur de blocs dynamiques pour afficher la boîte à outils et choisissez 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éé, puis cliquez sur Select.

Un résumé des informations sur les blocs dynamiques s’affiche ci-dessous.

{width="600" modal="regular"}

Acceptez le Template par défaut, 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 la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à 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 choisissez Save & Close.

Dans la barre latérale Admin, accédez à Content > Elements>Dynamic Blocks.

Recherchez le bloc dynamique Tee Shirt Promo​dans la grille et ouvrez-le en mode d’édition.

Développez la section Content et cliquez sur Edit with Page Builder.

Modifiez la largeur de la colonne :

• Survolez la bordure entre les deux colonnes.

• Maintenez le bouton de la souris enfoncé et faites glisser la bordure des deux divisions vers la gauche.

  {width="600" modal="regular"}

  La première colonne a maintenant quatre divisions de grille sur 12 (4/12) et la deuxième colonne a huit divisions sur 12 (8/12).

  {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 la scène, cliquez sur l’icône Fermer le plein écran ( ).

Cliquer sur cette icône vous renvoie à la section Content​du bloc dynamique avec l’aperçu affiché.

Dans le coin supérieur droit, cliquez sur Save.

Ouvrez une fenêtre de navigateur sur votre storefront.

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

Connectez-vous en tant que cliente :

• 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 à l’exemple de page pour afficher le bloc dynamique que vous avez créé avec la promotion du t-shirt.

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