DocumentationCommercePage Builder

[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

Ajouter du contenu - Recommandations de produits

Last update: Thu Sep 04 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Utilisateur ou utilisatrice

Utilisez le type de contenu Recommandations de produits pour ajouter une unité de recommandation active existante à l’Page Builder étape pour une page, un bloc ou un bloc dynamique CMS.

NOTE
Le type de contenu Page Builder Product Recommendations est pris en charge dans Adobe Commerce version 2.4.4 et ultérieure et disponible dans le métapaquet Product Recommendations version 3.0.x ou ultérieure. Pour ajouter Page Builder prise en charge des recommandations de produits, voir les informations d’installation. Ce type de contenu n’est pas disponible pour Magento Open Source.
NOTE
Si vous apportez des modifications importantes au contenu Page Builder, il est recommandé d’augmenter la durée de vie de la session d’administration afin d’empêcher l’expiration de la session pendant que vous travaillez.

Boîte à outils de recommandations de produits

Outil
Icon
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le conteneur de recommandations de produits et son contenu vers une autre position sur la scène.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier la recommandation de produit, qui vous permet de choisir l’unité de recommandation et de modifier les propriétés du conteneur.
Masquer
Icône Masquer {width="25"}
Masque le conteneur de recommandations de produits actuel et son contenu.
Afficher
Afficher l’icône {width="25"}
Affiche le conteneur de recommandations de produits masqué et son contenu.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie en double du conteneur de recommandations de produits et de son contenu.
Supprimer
Icône Supprimer {width="25"}
Supprime le conteneur de recommandations de produits et son contenu de l’étape.
NOTE
Les éléments masqués sont stockés dans la base de données et invisibles pour les clients. Toutefois, ces éléments sont visibles par les moteurs de recherche et d’autres robots qui analysent votre site. Elles sont également renvoyées dans le cadre du contenu si nécessaire par le biais d’un appel API avec un attribut d’invisibilité, sauf si vous les supprimez de l’étape.

Ajouter une unité de recommandation existante

  1. Assurez-vous d’avoir déjà créé une unité de recommandation pour le type de page Page Builder.
NOTE
Vous ne pouvez créer des unités de recommandation pour le type de page Page Builder que dans la vue de magasin par défaut.

  1. Ouvrez la page, le bloc ou le bloc dynamique en mode d’édition.

  2. Développez la section Content ​et cliquez sur Edit with Page Builder ​ou dans la zone d’aperçu du contenu pour ouvrir l’espace de travail Page Builder.

  3. Dans le panneau Page Builder sous Layout, faites glisser un espace réservé​ Row ​vers la scène.

  4. Dans le panneau Page Builder sous Add Content, faites glisser un espace réservé​ Product Recommendation ​jusqu’à la ligne.

    Ajout du type de contenu de recommandation de produit {width="600" modal="regular"}

  5. Effectuez l’une des opérations suivantes :

    • Cliquez sur Edit Product Recommendation.
    • Pointez sur le conteneur vide pour afficher la boîte à outils et cliquez sur l’icône Paramètres ( icône Paramètres ).

    Modifier la recommandation de produit {width="600" modal="regular"}

  6. Dans la section Selection, cliquez sur Select.

  7. Dans la liste des recommandations de produits actives, recherchez la ligne contenant l’unité de recommandation à ajouter, puis cliquez sur Select dans la dernière colonne.

    Recommandation de produit sélectionnée {width="600" modal="regular"}

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

    Le nom de la recommandation de produit sélectionnée s’affiche dans la section Selection ​de la page​ Edit Product Recommendation.

  9. Apportez les modifications nécessaires aux Paramètres avancés.

    Modifier la recommandation de produit {width="600" modal="regular"}

  10. Une fois l’opération terminée, procédez comme suit :

    • Si vous utilisez une fenêtre de navigateur entièrement agrandie, cliquez sur l’icône Fermer le plein écran ( icône Fermer le plein écran ) dans le coin supérieur droit de l’espace de travail.

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

    Lorsque vous revenez à la phase, des images d’espace réservé de produit apparaissent dans le conteneur.

Modifier les paramètres de l’unité de recommandation

  1. Pointez sur le conteneur d’unité de recommandation pour afficher la boîte à outils et cliquez sur l’icône Paramètres ( icône Paramètres ).

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

  2. Apportez les modifications nécessaires aux Paramètres avancés.

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

Dupliquer une unité de recommandation

  1. Pointez sur le conteneur d’unité de recommandation pour afficher la boîte à outils et cliquez sur l’icône Dupliquer ( icône Dupliquer ) dans la boîte à outils.

    Le duplicata apparaît juste en dessous de l’original.

  2. Pour déplacer l’unité de recommandation dupliquée vers un nouvel emplacement, placez le pointeur de la souris sur le conteneur et cliquez sur l’icône Déplacer ( Icône Déplacer ) de la palette d’outils.

  3. Sélectionnez et faites glisser l’unité de recommandation jusqu’à ce que la ligne directrice rouge s’affiche à la nouvelle position.

    Les bordures supérieure et inférieure de chaque conteneur apparaissent sous forme de lignes en tirets lorsque l’unité de recommandation est déplacée.

Supprimer une unité de recommandation de l’étape

  1. Pointez sur le conteneur d’unité de recommandation et cliquez sur l’icône Supprimer ( Icône Supprimer ) dans la boîte à outils.

  2. Lorsque vous êtes invité à confirmer, cliquez sur OK.

Paramètres avancés

  1. Pour contrôler le positionnement de l’unité de recommandations de produits dans le conteneur parent, choisissez l’Alignment :

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Description
    Default Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif.
    Left Aligne l’unité le long de la bordure gauche du conteneur parent, en tenant compte de la marge intérieure spécifiée.
    Center Aligne l’unité au centre du conteneur parent, en tenant compte de la marge intérieure spécifiée.
    Right Aligne l’unité le long de la bordure droite du conteneur parent, en tenant compte de la marge intérieure spécifiée.

  2. Définissez le style de Border appliqué aux quatre côtés de l’unité de recommandations de produits :

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Option Description
    Default Applique le style de bordure par défaut spécifié par la feuille de style associée.
    None Ne fournit aucune indication visible des bordures de l’unité.
    Dotted La bordure de l'unité apparaît sous la forme d'une ligne pointillée.
    Dashed La bordure de l’unité s’affiche sous la forme d’une ligne en tirets.
    Solid La bordure de l'unité s'affiche sous la forme d'une ligne continue.
    Double La bordure de l'unité s'affiche sous la forme d'une ligne double.
    Groove La bordure de l'unité s'affiche sous la forme d'une ligne rainurée.
    Ridge La bordure de l'unité apparaît sous la forme d'une ligne crantée.
    Inset La bordure de l'unité s'affiche sous la forme d'une ligne insérée.
    Outset La bordure de l'unité apparaît comme une ligne de départ.

  3. Si vous définissez un style de bordure autre que None, renseignez les options d’affichage des bordures :

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Description
    Border Color Spécifiez la couleur en choisissant une nuance, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente.
    Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure.
    Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure.

  4. (Facultatif) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer à l'unité.

    Séparez plusieurs noms de classe par un espace.

  5. Saisissez les valeurs, en pixels, du Margins and Padding pour déterminer les marges extérieures et la marge intérieure de l’unité.

    Saisissez les valeurs correspondantes dans le diagramme.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Zone conteneur Description
    Margins Quantité d'espace vide appliquée au bord extérieur de tous les côtés de l'unité. Options : Top / Right / Bottom / Left
    Padding Quantité d'espace vide appliquée au bord intérieur de tous les côtés de l'unité. Options : Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d