Page Builder Présentation de la partie 2 : blocs

L’exercice suivant illustre la différence entre blocs simples et blocs dynamiqueset comment utiliser Page Builder pour créer chaque type de bloc.

NOTE
Page Builder possède un nouveau type de contenu appelé Bannière, qui apparaît dans le premier exercice pas à pas et n’est pas lié à la fonctionnalité de bannière précédente. Quelle était auparavant l’option Bannière dans Menu Contenu, est maintenant Bloc dynamique.

Bloc dynamique dans la vitrine {width="700" modal="regular"}

Cet exercice suppose que vous avez terminé Partie 1 : page simple, y compris les conditions préalables et fichiers d’exemple téléchargés. Suivez les parties de cet exercice pas à pas dans l’ordre.

NOTE
Ces exercices pratiques sont mis à jour pour prendre en compte les modifications récentes apportées à la variable Page Builder dans la version 2.4.1. Si vous utilisez une version antérieure d’Adobe Commerce, utilisez la variable Page Builder exercices inclus dans la variable Commerce 2.3 Guide de l’utilisateur.

Partie 1 : créer un bloc simple

Dans cet exercice de présentation, vous créez un bloc simple avec du contenu provenant de Google Maps. Les blocs simples sont parfois appelés Blocs CMS ou bloc statique, 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

  1. Sur le Administration barre latérale, accédez à Content > Elements>Blocks.

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

  3. Pour Block Title, saisissez Google Map.

  4. Pour Identifier, saisissez google-map.

  5. Choisissez la Store View où le bloc doit être disponible.

    Informations sur le bloc {width="600" modal="regular"}

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

Étape 2 : Ajout d’une Google Map

  1. Faites défiler l’écran vers le bas jusqu’à Page Builder aperçu du contenu (actuellement vide) et cliquez sur Edit with Page Builder.

  2. Dans le Page Builder panneau, développer Media et faites glisser un Map espace réservé sur la scène.

    Faire glisser une carte 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 boutique.

    Carte Google configurée pour votre magasin {width="600" modal="regular"}

    Un mappage d’espace réservé apparaît si Google Maps n’est pas encore configuré pour votre magasin.

    Google Maps espace réservé {width="600" modal="regular"}

  3. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour le bloc dont l'aperçu est affiché.

  4. Dans le coin supérieur droit, cliquez sur le bouton Save flèche et choisissez Save & Close.

Étape 3 : Configuration Google Maps

If Google Maps est déjà configuré pour votre magasin, vous pouvez ignorer cette étape et passer à l’étape suivante.

  1. Accédez au Console Google Cloud Platform.

  2. Cliquez sur la liste déroulante du projet et sélectionnez ou créez le projet pour lequel vous souhaitez ajouter une clé API.

  3. Pour configurer vos informations d’identification d’API, suivez les instructions dans le Google Maps la documentation.

  4. Copiez votre clé API dans le Presse-papiers.

  5. Revenez au Commerce Admin et accédez à Stores > Settings>Configuration.

  6. Dans le panneau de gauche, sous General, choisissez Content Management.

  7. Développer Sélecteur d’extension Advanced Content Tools.

    Outils de contenu avancé {width="600" modal="regular"}

    Pour plus d’informations sur la variable Content Management Advanced Tools options de configuration, voir Guide de référence de configuration.

  8. Pour Google Maps API Key, collez la clé que vous avez copiée.

  9. Cliquez sur Test Key.

    En cas de problème avec votre clé, revenez à la variable Google Maps Plateforme pour résoudre le problème. Ensuite, réessayez.

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

Etape 4 : Ajouter le bloc à une page

  1. Sur le Administration barre latérale, accédez à Content > Elements>Pages.

  2. Dans la grille, recherchez le Simple Page ​que vous avez créé dans le premier tutoriel et sélectionnez Edit ​dans le​ Action colonne .

  3. Développer Sélecteur d’extension la valeur Content et cliquez sur Edit with Page Builder ou dans la zone d’aperçu du contenu.

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

    Ajout de la rangée en haut de l’étape {width="600" modal="regular"}

  5. Dans le Page Builder panneau, développer Add Content et faites glisser un Block balise d’emplacement de la nouvelle ligne.

  6. Passez la souris sur le conteneur de blocs vide pour afficher la boîte à outils et sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} ).

    Blocage d’outil {width="600" modal="regular"}

  7. Sur la page Modifier le bloc , cliquez sur Select Block.

    Sélectionner un bloc {width="600" modal="regular"}

  8. Dans la zone de recherche, saisissez map et appuyez sur la touche Entrée/Retour pour trouver le bloc que vous avez créé.

    Rechercher un bloc dans la liste {width="600" modal="regular"}

  9. Dans la grille, cliquez sur Select pour choisir la variable Google Maps bloque.

  10. Dans le coin supérieur droit, cliquez sur Save pour enregistrer les paramètres et revenir au Page Builder workspace.

  11. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour la page avec l’aperçu affiché.

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

Exemple de promotion de tee Luma {width="600" modal="regular"}

Etape 1 : créer un bloc dynamique

  1. Sur le Administration barre latérale, accédez à Content > Elements>Dynamic Blocks.

    Liste Blocs dynamiques {width="700" modal="regular"}

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

    Nouvelle page de bloc dynamique {width="600" modal="regular"}

  3. Renseignez les paramètres de base du nouveau bloc dynamique :

    • Définir Enable Dynamic Block to Yes.

    • Pour Dynamic Block Name, saisissez Tee Shirt Promo.

    • Définir Dynamic Block Type to Content Area et cliquez sur Done.

      Le type de bloc dynamique détermine où dans mise en page que le bloc est placé. Lors de la configuration d’un bloc dynamique pour votre magasin, tenez compte de la mise en page et de la variable thème, afin que vous puissiez utiliser l’espace disponible. 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.

      Paramètre Type de bloc dynamique {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.

      Dans l’exemple suivant, il existe deux segments client 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.

      Choix des segments client {width="600" modal="regular"}

Étape 2 : Définition des paramètres

Faites défiler l’écran vers le bas jusqu’à Content, qui affiche une valeur vide Page Builder prévisualisation du contenu, puis cliquez sur Edit with Page Builder. Ensuite, effectuez les tâches suivantes :

Tâche 1 : Ajout d’une image d’arrière-plan

  1. Passez la souris sur le conteneur de rangées pour afficher la boîte à outils et sélectionnez l’option Paramètres ( Icône Paramètres {width="20"} ).

  2. Sous Appearance, choisissez Full Bleed.

  3. Pour Minimum Height, saisissez 400px.

  4. Faites défiler l’écran jusqu’à Background ​et définissez la variable Background Image ​en cliquant Select from Gallery ​et le choix de la variable wide-banner-background.png image téléchargée dans le premier tutoriel.

  5. Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

    Rangée avec l’image {width="600" modal="regular"}

Tâche 2 : Ajouter des colonnes

Dans le Page Builder panneau sous Layout, faites glisser un Column ​espace réservé sur la ligne.

Faire glisser le type de colonne sur la ligne {width="600" modal="regular"}

La ligne est maintenant divisée en deux colonnes de largeur égale.

Tâche 3 : Ajouter du texte

  1. Dans le Page Builder panneau, développer Elements et faites glisser un Texte balise d’emplacement de la seconde colonne.

    Faire glisser une zone de texte dans la seconde colonne {width="600" modal="regular"}

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

    Saisie de texte pour la colonne {width="600" modal="regular"}

  3. Sélectionnez les trois lignes de texte et utilisez la barre d’outils pour définir la variable Hauteur de ligne to 40px.

    Définition de la hauteur de ligne {width="600" modal="regular"}

  4. Définissez la variable 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.

    Texte formaté {width="600" modal="regular"}

Tâche 4 : Ajout d’un lien

Lors du premier exercice, vous avez appris à utiliser le Bouton type de contenu pour créer un lien. Cet exemple montre comment insérer un lien à partir de la barre d'outils de l'éditeur.

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

  2. Revenez au Page Builder l’onglet espace de travail et l’éditeur de texte, sélectionnez Shop Tees > texte sur la troisième ligne, puis choisissez Gras ( Bouton Gras ) dans la barre d’outils de l’éditeur.

  3. Avec la variable Shop Tees > texte de la troisième ligne toujours sélectionnée, choisissez Lien d’insertion/de modification ( Bouton Insérer/Modifier un lien ) dans la barre d’outils de l’éditeur.

    Insérer un lien {width="600" modal="regular"}

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

  5. Définir Target to 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.

  6. Pour Title, saisissez Shop Tees.

    L’attribut de lien Titre est utilisé par certains navigateurs comme info-bulle.

  7. Pour enregistrer le lien et revenir au Page Builder espace de travail, cliquez sur OK.

    Détails du lien {width="600" modal="regular"}

  8. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour le bloc dynamique avec l'aperçu affiché.

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

Étape 3 : Ajouter une règle de prix

  1. Ouvrez le Promo de la chemise bloc dynamique en mode édition à nouveau.

  2. Développer Sélecteur d’extension la valeur Related Promotions et cliquez sur Add Cart Price Rules.

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

  3. Sur le Ajout de règles de prix de panier connexes , cochez la case correspondant au Achetez 3 t-shirts et obtenez la 4ème offre gratuite règle de prix et cliquez sur Add Selected.

    Ajout d’une règle de prix de panier associée {width="600" modal="regular"}

    La règle de prix apparaît dans la variable Promotions connexes sous 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.

    Règle de prix du panier sélectionnée {width="600" modal="regular"}

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

Etape 4 : Ajouter le bloc dynamique à une page

  1. Dans le Administration barre latérale, accédez à Content > Elements>Pages

  2. Recherchez le Page simple que vous avez créé dans le premier exercice pas à pas et ouvrez-la en mode d’édition.

  3. Développer Sélecteur d’extension la valeur Content et cliquez sur Edit with Page Builder.

  4. Passez la souris sur la rangée supérieure avec la même image que le bloc dynamique pour afficher la boîte à outils et le Supprimer ( Icône Supprimer {width="20"} ).

    Pour confirmer la suppression de la ligne de la page, cliquez sur OK .

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

  6. Dans le Page Builder panneau, développer Add Content et faites glisser un Dynamic Block balise d’emplacement de la nouvelle ligne.

    Faire glisser un bloc dynamique sur la ligne {width="600" modal="regular"}

  7. Passez la souris sur le conteneur de blocs dynamiques pour afficher la boîte à outils et sélectionner l’option Paramètres ( Icône Paramètres {width="20"} ).

    Boîte à outils de bloc dynamique {width="600" modal="regular"}

  8. Sur le Edit Dynamic Block ​page, cliquez sur Select Dynamic Block.

    Sélectionner un bloc dynamique {width="600" modal="regular"}

  9. Recherchez le Tee Shirt Promo ​bloc dynamique que vous avez créé et cliquez sur Select.

    Un résumé des informations du bloc dynamique apparaît ci-dessous.

    Informations sur les blocs dynamiques {width="600" modal="regular"}

  10. Acceptation de la valeur par défaut Template, Dynamic Block Block Template.

  11. Lorsque vous avez terminé, cliquez sur Save pour enregistrer les paramètres et revenir au Page Builder workspace.

    Bloc dynamique dans l’aperçu de la page {width="600" modal="regular"}

  12. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour la page avec l’aperçu affiché.

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

Exemple de bloc dynamique dans le storefront {width="600" modal="regular"}

Etape 1 : Editer le bloc dynamique

  1. Dans le Administration barre latérale, accédez à Content > Elements>Dynamic Blocks.

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

  3. Développer Sélecteur d’extension la valeur Content et cliquez sur Edit with Page Builder.

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

      Divisions de grille {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.

      Deux colonnes inégales {width="600" modal="regular"}

  5. 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 le bouton White échantillon.

    Couleur du texte {width="600" modal="regular"}

  6. Dans le coin supérieur droit de l’étape, cliquez sur le bouton Fermer le plein écran ( Icône Fermer le plein écran ).

    Cliquez sur cette icône pour revenir au Content ​pour le bloc dynamique avec l'aperçu affiché.

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

  1. Ouvrez une fenêtre de navigateur sur votre vitrine.

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

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

    Bloc dynamique affiché pour un segment de client {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 à Partie 3 : contenu du catalogue

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d