Ajout d'un widget Trajet de navigation à l'agencement de page d'arrivée

Dans cette leçon, vous allez commencer à construire l'agencement en ajoutant le premier widget à un emplacement dans le modèle.

Pourquoi et quand exécuter cette tâche

Les widgets constituent les blocs de construction de votre agencement. Chaque widget peut afficher un type spécifique de contenu de magasin, comme des recommandations de produit, des annonces marketing ou des éléments de navigation. L'outil Commerce Composer met à disposition plus de deux douzaines de widgets que vous pouvez utiliser dans les agencements.

Pour en savoir plus sur les widgets, lisez les rubriques suivantes :

Dans cette leçon, vous allez utiliser un widget Trajet de navigation pour ajouter des éléments de navigation dans la partie supérieure de l'agencement, comme illustré par la capture d'écran suivante :


Exemple d'agencement pour le tutoriel

Procédure

  1. Dans la page Agencement Designers femmes pour l'été, cliquez sur l'onglet Conception d'agencement.
    La section Contenu de l'agencement affiche une maquette fonctionnelle qui représente le modèle que vous avez sélectionné pour cet agencement.
    Chaque modèle d'agencement contient un ou plusieurs emplacements numérotés. Ce modèle contient cinq emplacements. Les modèles d'agencement présentent les caractéristiques suivantes :
    • Vous pouvez ajouter plusieurs widgets à un même emplacement. Les widgets qui partagent un emplacement peuvent être du même type ou d'un type différent.
    • Si vous ajoutez plusieurs widgets à un emplacement, les widgets s'empilent toujours verticalement dans l'emplacement.
    • Dans la plupart des cas, si vous n'avez pas besoin de l'un des emplacements du modèle, vous pouvez le laisser vide. Lors de l'affichage de la page de magasin, la zone représentant l'emplacement ne prend pas de place verticalement dans la page.

    Maquette fonctionnelle de modèle
  2. Dans l'image Maquette fonctionnelle, cliquez sur l'emplacement 1.
    La fenêtre Ajout de widgets dans des emplacements affiche tous les widgets disponibles.
    Maquette fonctionnelle de modèle
    La fenêtre Ajout de widgets dans des emplacements propose plusieurs fonctions permettant de comprendre et de rechercher des widgets :
    • Entrez le nom du widget dans la zone Filtrer par pour afficher les widgets correspondants.
    • Utilisez le filtre Tous les widgets pour afficher le sous-ensemble des widgets adaptés à des types de page spécifiques. Par exemple, si vous sélectionnez Widgets de page de catégorie, la liste est filtrée pour afficher le sous-ensemble des widgets qui sont adaptés aux pages de catégories.
    • Utilisez la case à cocher Afficher les descriptions pour activer ou désactiver les descriptions de widget.
  3. Dans la zone Filtrer par, entrez Trajet. La liste des widgets est filtrée pour n'afficher que le widget Trajet de navigation.
  4. Cliquez sur Widget Trajet de navigation, puis cliquez sur OK.
    Les propriétés du widget s'ouvrent.
  5. Dans la zone Nom du widget, entrez Elément de navigation pour la page d'accueil.
    De nombreux widgets, comme le widget Trajet de navigation, peuvent extraire et afficher le contenu automatiquement. Il n'est pas nécessaire de spécifier le trajet de navigation dans le widget.

    Votre agencement contient un widget seulement. Toutefois, si vous ne connaissez pas l'outil Commerce Composer, il est recommandé de prévisualiser votre page après chaque ajout de widget.

  6. Cliquez sur Enregistrer et prévisualiser.
    Dans l'outil Commerce Composer, le bouton Sauvegarder et prévisualiser ouvre l'aperçu du magasin directement sur la page à laquelle l'agencement est attribué. Si la date de début de l'agencement se situe dans le futur, la date dans l'aperçu du magasin est la date de début plutôt que la date courante.
    Remarque : Si l'agencement est affecté à plusieurs pages ou hérité par plusieurs pages, l'aperçu du magasin ne s'ouvre pas directement sur une page. A la place, la fenêtre Options de prévisualisation du magasin s'ouvre et vous pouvez sélectionner la page à afficher dans une liste. Dans ce cas, si la date de début se situe dans le futur, vous devez spécifier la date de début dans la fenêtre Options de prévisualisation du magasin.

    Votre agencement contient désormais le widget Trajet de navigation. Le titre de la page, Designer Fashions for Women | Aurora, s'affiche dans le trajet de navigation.


    Prévisualisation du magasin
  7. Familiarisez-vous avec les fenêtres d'information dans l'aperçu du magasin, qui peuvent être utiles lors de l'identification et de la résolution de problèmes liés aux widgets et aux affectations d'agencement :
    1. En haut de la fenêtre d'aperçu, cliquez sur Afficher les informations sur la page.
    2. Au-dessus du trajet de navigation, cliquez sur Afficher les informations.

      La fenêtre Informations sur le widget s'ouvre.


      Fenêtre Informations sur le widget
      Utilisez la fenêtre Informations sur le widget pour obtenir des informations sur le widget que vous avez affiché dans l'aperçu du magasin. La fenêtre affiche les informations suivantes :
      • Le nom et le type du widget.
      • L'emplacement auquel se trouve le widget et sa position relativement aux autres widgets de l'emplacement.
      • Les paramètres de propriété du widget.
      • La source du contenu du widget.

      Vous pouvez cliquer sur le lien Editer pour revenir à l'outil Commerce Composer et changer l'agencement contenant le widget.

    3. Fermez la fenêtre Informations sur le widget.
    4. Cliquez sur Masquer les informations sur la page.
    5. En haut de la fenêtre d'aperçu, cliquez sur Afficher les informations sur l'agencement.

      La fenêtre Informations sur la page et l'agencement s'ouvre.


      Fenêtre Informations sur la page et la présentation
      Utilisez la fenêtre Informations sur la page et l'agencement pour obtenir les informations suivantes sur la page que vous affichez dans l'aperçu du magasin :
      • Le nom et le type de la page.
      • Le nom de l'agencement appliqué à la page. Si aucun agencement n'est affecté à la page ou hérité par la page, la fenêtre indique que l'agencement par défaut est appliqué.
      • Des détails sur les agencements qui ont été évalués afin de déterminer l'agencement approprié à appliquer. Ces détails peuvent s'avérer utiles lorsque plusieurs agencements sont affectés à une page ou hérités d'une page.

      Vous pouvez cliquer sur le lien Editer pour revenir à l'outil Commerce Composer et changer la page ou l'agencement. Vous pouvez cliquer sur le lien Créer pour créer un agencement pour la page.

    6. Fermez la fenêtre Informations sur la page et l'agencement.
    7. Revenez à l'outil Commerce Composer.

Résultats

Dans cette leçon, vous avez ajouté le premier widget à l'agencement, puis prévisualisé l'agencement dans l'aperçu du magasin. Dans la leçon suivante, vous allez activer dans Management Center un éditeur qui propose des capacités d'édition améliorées.