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

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

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.

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 Row ​jusqu’en haut de l’étape.

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

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

Passez la souris 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"}

Pour Select Products By, choisissez Condition.

Ajoutez une condition :

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

• Sous Product Attribute, choisissez Category.

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

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

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

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

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

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

Saisissez le Number of Products to Display.

Par défaut, la liste affiche cinq produits.

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.

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

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

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

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

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

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

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.

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

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

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

Passez la souris 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 pour l’affichage de la vidéo.

Si vous laissez cette option vide, 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 l’étape, cliquez sur l’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é.

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 à 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 > Trops > Tees

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 à 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 pour le 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 qui convient le mieux à l’application en tant que Page Builder ou la norme WYSIWYG Text Editor.

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

Développez la section 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

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

Une fois l’opération terminée, cliquez 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 : attribut de l’éditeur de texte

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

• ​

  Attribute Code: my_text_editor_attribute

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.

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

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.

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

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

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

Sur 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 l’écran vers le bas et développez la section 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.

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

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

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.

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

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

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.

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

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.

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.

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.

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