Page Builder Présentation de la partie 3 : contenu du catalogue

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

Recherchez la Page simple que vous avez créée dans le premier exercice et modifiée dans le second, puis 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 Row​vers le haut de la scène.

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

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

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

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

Par Select Products By, choisissez Condition.

Ajoutez une condition :

• Cliquez sur l’icône Ajouter ( ).

• Sous Product Attribute, choisissez Category.

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

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

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

• Dans l’arborescence des catégories, descendez jusqu’à la catégorie Femmes > Tops et cochez la case Tees.

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

• Cliquez sur l’icône en forme de coche ( ).

  L’identifiant de catégorie correspondant s’affiche dans le champ pour remplir la condition.

Saisissez le Number of Products to Display.

Par défaut, la liste affiche cinq produits.

Renseignez les paramètres restants selon vos besoins.

Si nécessaire, utilisez les descriptions des champs à la fin de la page Ajouter du contenu - Produits pour vous y référer.

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 ( {width="20"} ).

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 à Catalog > Products.

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

Faites défiler vers le bas et développez la section Content .

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

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

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

Dans le panneau Page Builder sous Layout, faites glisser un Row​vers la scène, en le plaçant sous le conteneur de code HTML.

Recherchez l'indicateur rouge qui doit apparaître lorsque la ligne se trouve à la bonne position.

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

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

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

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

{width="500" modal="regular"}

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

{width="500" modal="regular"}

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

Si vous ne renseignez pas cette option, la vidéo remplit l’espace disponible.

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 ( {width="20"} ).

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 à Catalog > Products.

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

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 > Tops > Tees

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

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

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

Saisissez un Default Label pour l’attribut.

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

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 le plus adapté à l’application comme Page Builder ou Text Editor WYSIWYG standard.

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

Développez la section Advanced Attribute Properties et définissez les paramètres suivants :

• Attribute Code : saisissez un code d’attribut en minuscules, en utilisant 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 : saisissez une valeur par défaut pour l’attribut.
• ​
  Unique Value: No
• ​
  Add to Column Options: No
• ​
  Use in Filter Options: Yes

Dans le panneau Attribute Information​à gauche, choisissez Storefront Properties​et effectuez les paramètres suivants :

• ​
  Use for Promo Rule Conditions: Yes
• ​
  Visible on Catalog Pages on Storefront: Yes
• ​
  Used in Product Listing: Yes

Cliquez ensuite sur Save Attribute.

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 : Mon attribut d’éditeur de texte
• Catalog Input Type for Store Owner : éditeur de texte
• ​
  Code d'attribut: my_text_editor_attribute

Dans 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 du jeu d’attributs sans affecter votre catalogue.

Recherchez le jeu d’attributs Default​dans la liste et double-cliquez dessus pour l’ouvrir en mode d’édition.

Dans la liste Attributs non affecté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 son emplacement sur la page.

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

Cliquez sur Save pour revenir à la liste Jeux d’attributs .

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

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

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

Faites défiler vers le bas et développez la section Content .

En haut de la section, vous trouverez deux attributs standard pour le contenu du produit :

• Description courte, qui utilise l’éditeur ​ WYSIWYG standard.
• Description, qui affiche l’aperçu Page Builder.

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

Lorsque vous faites défiler la page jusqu’à la moitié inférieure de la section, vous accédez aux deux attributs que vous avez créés et affectés :

• Mon attribut de Page Builder, qui affiche l’aperçu Page Builder.
• Mon attribut d’éditeur de texte, qui utilise l’éditeur WYSIWYG standard.

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

Dans l’éditeur Mon attribut d’éditeur de texte, saisissez Text Editor Attribute placeholder text.

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

Pour Mon attribut Page Builder, 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 la scène, cliquez sur l’icône Fermer le plein écran ( {width="20"} ).

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

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

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

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

Accédez à l’exemple de page de produit dans le storefront.

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

Faites défiler l’écran jusqu’aux informations Mon attribut Page Builder.

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 se trouvent juste après la description du produit.

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