Page Builder Présentation de la partie 3 : 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 la variable Page Builder workspace à un jeu d’attributs de produit.

Liste de produits {width="600" modal="regular"}

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 le Administration barre latérale, accédez à Content > Elements>Pages.

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

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

    Glissement d’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’option Paramètres ( Icône Paramètres {width="20"} ).

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

  2. Pour Select Products By, choisissez Condition.

  3. Ajoutez une condition :

    • Cliquez sur le bouton Ajouter ( Icône Ajouter ).

    • Sous Product Attribute, choisissez Category.

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

    • Procédez comme suit : Category is… d’une partie de la condition en cliquant sur l’icône Plus (…), puis sur la fonction Sélecteur ( Icône Sélecteur ).

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

    • Dans l’arborescence des catégories, accédez au Femmes > Principaux et sélectionnez la catégorie  Tees .

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

    • Cliquez sur la coche ( Icône de 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 variable Ajouter du contenu - Produits à titre de référence.

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

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

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

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

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

Partie 2 : personnalisation de la page de produits

NOTE
Un utilisateur administrateur doit disposer des Content autorisations pour leurs portée du rôle pour voir Edit with Page Builder et de pouvoir utiliser le Créateur 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. Processus de mise à jour page de catégorie le contenu est fondamentalement le même.

  1. Sur le Administration barre latérale, accédez à Catalog > Products.

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

  3. Faire défiler vers le bas et développer Sélecteur d’extension la valeur Content .

  4. Suivant Description, cliquez sur Edit with Page Builder.

    Contenu de description du produit {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’un HTML dans une Code HTML conteneur. Avec le thème Luma, la description du produit s’affiche dans l’onglet Détails .

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

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

    Glissement d’une ligne vers la scène {width="600" modal="regular"}

  6. Dans le Page Builder panneau, développer Media et faites glisser un Video balise d’emplacement de la nouvelle ligne.

    Espace réservé de la 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’option 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 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 au Page Builder workspace.

    Vidéo dans l’étape du contenu {width="600" modal="regular"}

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

    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.

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 {width="600" modal="regular"}

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 la variable Page Builder attribut personnalisé pour ajouter un fonctionnement complet Page Builder espace de travail vers une page de produit, que vous pouvez utiliser pour créer du contenu attrayant. Dans cette partie de l’exercice, vous apprenez à créer un attribut personnalisé à l’aide de la méthode Page Builder type d’entrée et appliquez-le 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 le Administration barre latérale, 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 > Teies

  4. Dans le coin supérieur droit, cliquez sur le bouton Save flèche et choisissez 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 la variable Page Builder Les types d’entrée et Éditeur de texte peuvent être utilisés.

  1. Sur le Administration barre latérale, 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éfinir Catalog Input Type for Store Owner to Page Builder.

    Lors de la création d’un attribut personnalisé, vous pouvez spécifier l’éditeur le plus adapté à 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évelopper Sélecteur d’extension la valeur Advanced Attribute Properties et définissez les paramètres suivants :

    • Attribute Code: saisissez un code d’attribut dans des caractères 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: saisissez une valeur par défaut pour l’attribut .

    • Unique Value: No

    • Add to Column Options: No

    • Use in Filter Options: Yes

  6. Dans le Attribute Information ​sur la gauche, choisissez 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. Lorsque vous avez terminé, 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: mon 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 le Administration barre latérale, accédez à Stores > Attributes>Attribute Set.

    Dans cet exemple, vous ajoutez temporairement les nouveaux attributs au default ensemble d’attributs. À 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 le Default ​défini dans la liste et double-cliquez dessus pour l’ouvrir en mode d’édition.

  3. Dans le Attributs non attribués recherchez les nouveaux attributs que vous avez créés et faites-les glisser sur la liste Groups ​colonne, sous Content.

    L’emplacement de l’attribut dans la variable Groups détermine l’emplacement d’affichage sur la page.

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

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

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

Étape 4 : Mettre à jour le produit

  1. Sur le Administration barre latérale, accédez à Catalog > Products.

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

  3. Faire défiler vers le bas et développer Sélecteur d’extension la valeur Content .

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

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

    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 Attribut, qui affiche le Page Builder aperçu.
    • Mon attribut Éditeur de texte, qui utilise l’éditeur WYSIWYG standard.

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

  4. Dans le Mon attribut Éditeur de texte éditeur, saisissez Text Editor Attribute placeholder text.

    • Dans le coin supérieur droit, cliquez sur le bouton Save flèche et choisissez Save & Close.
  5. Pour Mon attribut Page Builder, cliquez sur Edit with Page Builder et ajoutez le texte de description :

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

    • Entrée Page Builder attribute placeholder text.

    • Dans le coin supérieur droit de l’étape, cliquez sur le bouton 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 jusqu’à Description, cliquez sur Edit with Page Builder, puis ajoutez tout texte que vous souhaitez en appliquant 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 Save flèche et choisissez Save & Close.

  8. Si vous y êtes invité, cliquez sur le bouton 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 vers le bas jusqu’à Mon attribut Page Builder informations.

    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 Attributs et de l’éditeur de texte dans le storefront {width="600" modal="regular"}

Vous avez terminé la Page Builder exercice 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