Page Builder Partie 3 de la présentation : contenu du catalogue

Cet exercice montre à quel point il est facile d’ajouter une liste de produits à une page, de personnaliser les pages de produits et de créer un attribut personnalisé qui ajoute l’espace de travail Page Builder à un jeu d’attributs de produit.

Liste de produits

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

Partie 1 : Ajouter une liste de produits

Page Builder facilite l’ajout d’une liste de produits à l’étape. Dans cet exemple, la liste de produits est ajoutée directement à une page.

Étape 1 : Ajout d’une liste de produits à l’étape

  1. Sur la barre latérale Admin, accédez à Content > Elements>Pages.

  2. Recherchez la page simple que vous avez créée lors du premier exercice et que vous avez modifiée dans le second, puis sélectionnez Edit dans la colonne Action.

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

  4. Dans le panneau Page Builder sous Layout, faites glisser un Row ​jusqu’en haut de l’étape.

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

    Faire glisser un espace réservé de produits sur la ligne {width="600" modal="regular"}

Étape 2 : Composer la condition

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

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

  2. Pour Select Products By, choisissez Condition.

  3. Ajoutez une condition :

    • Cliquez sur l'icône Ajouter ( Ajouter une icône ).

    • Sous Product Attribute, choisissez Category.

      Choix de l’attribut de catégorie pour la condition {width="600" modal="regular"}

    • Complétez la partie Category is… de la condition en cliquant sur l’icône Plus (…), puis sur l’icône Sélecteur ( Icône Sélecteur ).

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

    • Dans l’arborescence des catégories, accédez à la catégorie Femmes > Principaux et cochez la case Tees .

      Choix de la catégorie dans l’arborescence {width="600" modal="regular"}

    • Cliquez sur l’icône Coche ( Icône Coche ) .

      L’ID de catégorie correspondant apparaît dans le champ pour remplir la condition.

Étape 3 : Paramètres

  1. Saisissez le Number of Products to Display.

    Par défaut, la liste affiche cinq produits.

  2. Définissez les paramètres restants si nécessaire.

    Si nécessaire, utilisez les descriptions de champ à la fin de la page Ajouter du contenu - Produits à titre de référence.

  3. Une fois l’opération terminée, cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.

    Liste de produits dans l’étape {width="600" modal="regular"}

  4. Dans le coin supérieur droit de l’étape, cliquez sur l’icône Fermer le plein écran ( Icône Fermer le plein écran {width="20"} ).

    Cliquez sur cette icône pour revenir à la section Content ​de la page dont l’aperçu est affiché.

  5. Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.

Partie 2 : personnalisation de la page de produits

NOTE
Un utilisateur administrateur doit disposer de Content autorisations pour sa portée de rôle pour afficher les boutons Edit with Page Builder et pouvoir utiliser le générateur de pages.

Dans cette partie de l’exercice, vous découvrez à quel point il est facile de personnaliser une page de produit en plaçant une vidéo sous l’ensemble des onglets de la page de produit. Le processus de mise à jour du contenu page de catégorie est essentiellement le même.

  1. Sur la barre latérale Admin, accédez à Catalog > Products.

  2. Recherchez un produit simple que vous pouvez utiliser pour cet exemple et ouvrez-le en mode d’édition.

  3. Faites défiler l’écran vers le bas et développez la section Sélecteur d’extension sur Content .

  4. En regard de Description, cliquez sur Edit with Page Builder.

    Contenu de description de produit {width="600" modal="regular"}

    Si la description du produit a été précédemment saisie sans Page Builder, la description actuelle s’affiche comme HTML dans un conteneur Code HTML. Avec le thème Luma, la description du produit s’affiche dans l’onglet Détails .

  5. Dans le panneau Page Builder situé sous Layout, faites glisser un Row ​jusqu’à l’étape, le plaçant sous le conteneur de code d’HTML.

    Recherchez la ligne guide rouge qui s’affiche lorsque la ligne est à la bonne position.

    Faire glisser une ligne vers l’étape {width="600" modal="regular"}

  6. Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Video sur la nouvelle ligne.

    Espace réservé vidéo dans la ligne {width="600" modal="regular"}

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

    Boîte à outils vidéo {width="500" modal="regular"}

  8. Saisissez le Video URL.

    La vidéo peut être hébergée sur YouTube ou Vimeo. La vidéo de cet exemple se trouve sur YouTube à l’adresse URL suivante :

    https://www.youtube.com/watch?v=ZpFrNyD4100

    Modification de la vidéo {width="500" modal="regular"}

  9. Saisissez le Maximum Width en pixels pour l’affichage de la vidéo.

    Si vous laissez cette option vide, la vidéo remplit l’espace disponible.

  10. Cliquez sur Save pour enregistrer les paramètres et revenir à l’espace de travail Page Builder.

    Vidéo à l'étape du contenu {width="600" modal="regular"}

  11. Dans le coin supérieur droit de l’étape, cliquez sur l’icône Fermer le plein écran ( Icône Fermer le plein écran {width="20"} ).

    Cliquez sur cette icône pour revenir à la section Content ​de la page dont l’aperçu est affiché.

  12. Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.

Dans le storefront, la vidéo apparaît sous l’ensemble d’onglets. Pour voir à quoi ressemble la page sur un appareil mobile, vous pouvez redimensionner la fenêtre.

Vidéo affichée sur la page du produit

Félicitations ! Vous avez terminé la deuxième partie du tutoriel Contenu du catalogue. Conservez le travail que vous avez créé afin que vous puissiez y faire référence ultérieurement.

Partie 3 : Ajout d’attributs personnalisés

Utilisez l’attribut personnalisé Page Builder pour ajouter un espace de travail Page Builder entièrement fonctionnel à une page de produit, que vous pouvez utiliser pour créer du contenu engageant. Dans cette partie de l’exercice, vous apprenez à créer un attribut personnalisé à l’aide du type d’entrée Page Builder et à l’appliquer aux pages de produits de votre catalogue. Pour plus d’informations sur ces attributs, voir Attributs de produit.

Étape 1 : créer un produit

Pour éviter toute modification de votre boutique en ligne, créez un produit à l’aide des propriétés décrites.

  1. Sur la barre latérale Admin, accédez à Catalog > Products.

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

  3. Créez le produit avec les propriétés suivantes :

    • Jeu d’attributs: Default

    • Product Name : Mon produit

    • SKU: Tutorial

    • Price: 75.00

    • Quantity: 100

    • Stock Status : En Stock

    • Weight: 1

    • Categories : Femmes > Trops > Tees

  4. Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.

Étape 2 : Création d’attributs personnalisés

Au cours de cette étape, vous créez deux nouveaux attributs personnalisés pour montrer comment les types d’entrée Page Builder et l’éditeur de texte peuvent être utilisés.

  1. Sur la barre latérale Admin, accédez à Stores > Attributes>Product.

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

  3. Saisissez un Default Label pour l’attribut .

    Pour cet exemple, utilisez My Page Builder Attribute pour le libellé.

  4. Définissez Catalog Input Type for Store Owner sur Page Builder.

    Lors de la création d’un attribut personnalisé, vous pouvez spécifier l’éditeur qui convient le mieux à l’application en tant que Page Builder ou la norme WYSIWYG Text Editor.

    Page Builder Type d’entrée {width="600" modal="regular"}

  5. Développez la section Sélecteur d’extension et définissez les paramètres suivants :Advanced Attribute Properties

    • Attribute Code : saisissez un code d’attribut en minuscules avec des tirets au lieu d’espaces. Pour cet exemple, utilisez my_page_builder_attribute.

    • Scope : acceptez la valeur par défaut, Store View.

    • Default Value : entrez une valeur par défaut pour l’attribut .

    • Unique Value: No

    • Add to Column Options: No

    • Use in Filter Options: Yes

  6. Dans le panneau Attribute Information ​à gauche, sélectionnez Storefront Properties ​et définissez les paramètres suivants :

    • Use for Promo Rule Conditions: Yes

    • Visible on Catalog Pages on Storefront: Yes

    • Used in Product Listing: Yes

  7. Une fois l’opération terminée, cliquez sur Save Attribute.

  8. Répétez les étapes précédentes pour créer un second attribut avec les mêmes propriétés de base, mais avec le type d’entrée Éditeur de texte comme suit :

    • Default Label : attribut de l’éditeur de texte

    • Catalog Input Type for Store Owner : Éditeur de texte

    • Attribute Code: my_text_editor_attribute

Étape 3 : mise à jour du jeu d’attributs de produit

  1. Sur la barre latérale Admin, accédez à Stores > Attributes>Attribute Set.

    Pour cet exemple, vous ajoutez temporairement les nouveaux attributs au jeu d’attributs default. À la fin de cet exercice, supprimez les attributs de l’ensemble d’attributs afin de ne pas affecter votre catalogue.

    note note
    NOTE
    Si vous ne souhaitez pas modifier votre magasin en direct, vous pouvez suivre sans mettre à jour le jeu d’attributs.
  2. Recherchez l’attribut Default ​défini dans la liste et double-cliquez dessus pour l’ouvrir en mode d’édition.

  3. Dans la liste Attributs non attribués, recherchez les nouveaux attributs que vous avez créés et faites glisser chacun d’eux vers la colonne Groups, sous Content.

    L’emplacement de l’attribut dans la colonne Groups détermine l’emplacement où il apparaît sur la page.

    Nouveaux attributs ajoutés au groupe de contenu {width="600" modal="regular"}

  4. Cliquez sur Save pour revenir à la liste des jeux d’attributs.

  5. Lorsque vous y êtes invité, cliquez sur le lien Cache Management situé en haut de la page et actualisez le cache non valide.

Étape 4 : Mettre à jour le produit

  1. Sur la barre latérale Admin, accédez à Catalog > Products.

  2. Dans la grille Produits, recherchez Mon produit et ouvrez-le en mode d’édition.

  3. Faites défiler l’écran vers le bas et développez la section Sélecteur d’extension sur Content .

    En haut de la section , il existe deux attributs standard pour le contenu du produit :

    • Description courte, qui utilise le WYSIWYG editor standard.
    • Description, qui affiche l’aperçu Page Builder.

    Contenu du produit {width="600" modal="regular"}

    Lorsque vous faites défiler l’écran jusqu’à la moitié inférieure de la section, il y a les deux attributs que vous avez créés et attribués :

    • My Page Builder Attribute, qui affiche l’aperçu Page Builder.
    • My Text Editor Attribute, qui utilise l’éditeur WYSIWYG standard.

    {Modification du contenu du produit {width="600" modal="regular"}

  4. Dans l’éditeur My Text Editor Attribute , saisissez Text Editor Attribute placeholder text.

    • Dans le coin supérieur droit, cliquez sur la flèche Save et sélectionnez Save & Close.
  5. Pour My Page Builder Attribute, cliquez sur Edit with Page Builder et ajoutez le texte de description :

    • Dans le panneau Page Builder, développez Elements et faites glisser un Text object sur la scène.

    • Saisissez Page Builder attribute placeholder text.

    • Dans le coin supérieur droit de l’étape, cliquez sur l’icône Fermer le plein écran ( Icône Fermer le plein écran {width="20"} ).

      Attributs personnalisés avec texte d’espace réservé {width="600" modal="regular"}

  6. Faites défiler l’écran jusqu’à Description, cliquez sur Edit with Page Builder et ajoutez le texte de votre choix en utilisant la même méthode que l’étape précédente.

  7. Dans le coin supérieur droit de la page du produit, cliquez sur la flèche Save et choisissez Save & Close.

  8. Si vous y êtes invité, cliquez sur le lien Cache Management dans le message en haut de la page et actualisez le cache non valide.

Etape 5 : Visualiser le résultat

  1. Accédez à votre page d’exemple de produit dans le storefront.

    Dans cet exemple, le produit se trouve dans le volet de navigation supérieur de Women > Tops > Tees.

  2. Faites défiler l’écran jusqu’aux informations My Page Builder Attribute (Mon attribut de créateur de pages).

    La position des attributs sur la page du produit est déterminée par le thème. Dans le thème Luma, les nouveaux attributs sont situés juste après la description du produit.

    Page Builder et attributs de l’éditeur de texte dans le storefront {width="600" modal="regular"}

Vous avez terminé l’exercice Page Builder de contenu du catalogue. Conservez le travail que vous avez créé afin que vous puissiez y faire référence ultérieurement.

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