Architecture de widget Commerce Composer

Les widgets sont les éléments structurels interchangeables qu'un utilisateur Management Center peut utiliser pour composer des agencements pour les pages de magasin. Les widgets sont des modules d'interface utilisateur indépendants qui récupèrent et affichent un type spécifique de données sur une page de magasin.

Exemple de page avec des widgets — Figure 1. Agencement contenant plusieurs widgets. L'image suivante illustre un agencement qui est créé à l'aide d'une sélection de widgets.

Un widget comporte deux composants :

Composants de vitrine, qui incluent une unité JSP autonome et compilable qui récupère et affiche des données sur une page de magasin. Les fichiers JSP peuvent être personnalisés pour s'afficher différemment et afficher différents contenus basés sur les propriétés configurables sélectionnées par les utilisateurs professionnels. Si les fichiers JSP widget suivent des modèles de conception Web réactifs, le widget peut également être utilisé sur les pages de magasin qui s'affichent pour n'importe quelle classe d'unités (mobile, tablette, bureau). L'agencement et les performances du widget dans la vitrine doivent également être pris en compte lors de la personnalisation des composants de la vitrine pour un widget.
Management Center composants, qui fournissent une vue des propriétés aux utilisateurs professionnels. Les utilisateurs peuvent sélectionner toutes les propriétés configurables dans cette vue pour spécifier comment le widget s'affiche et quelles données il affiche. L'outil Commerce Composer, qui est utilisé pour gérer les widgets, permet d'enregistrer et de récupérer facilement les informations de propriété de widget. Les propriétés et les contrôles de widget configurés par les utilisateurs professionnels sont récupérés par les composants de la vitrine du widget pour déterminer l'affichage de la vitrine du widget.

Pour des informations générales sur les widgets, voir

Widgets de niveau site et de niveau magasin

Pour qu'un widget puisse être utilisé avec l'outil Commerce Composer, il doit être enregistré dans la base de données pour la structure Commerce Composer. Les widgets peuvent être enregistrés pour une utilisation de niveau site ou magasin.

Widgets de niveau de site: Les widgets de niveau site peuvent être partagés entre les magasins. Un widget peut être enregistré au niveau site pour être utilisé par tous les magasins. Par défaut, tous les widgets Commerce Composer sont enregistrés au niveau site. Un magasin doit s'abonner à un widget au niveau site avant que le widget puisse être inclus sur une page de ce magasin.
Widgets de niveau de magasin: Les widgets de niveau magasin sont enregistrés pour être utilisés par un seul magasin. Le magasin doit toujours s'abonner à un widget au niveau magasin pour utiliser le widget.
Les widgets de niveau magasin peuvent être enregistrés pour être utilisés par un groupe de magasins lorsque le widget est enregistré pour un magasin de ressources. En enregistrant un widget pour un magasin de ressources, le widget est enregistré pour tous les sites étendus qui utilisent ce magasin de ressources. En outre, si le magasin de ressources s'abonne au widget, le widget peut être utilisé par tous les magasins de site étendu. Le widget n'est pas disponible pour les magasins qui appartiennent à un magasin de ressources différent.

Développement de widgets personnalisés

Les widgets sont composés de plusieurs composants, y compris la vitrine et les composants Management Center. Votre entreprise peut créer des widgets personnalisés à ajouter à la bibliothèque de widgets en définissant la vitrine, Management Center et les informations de données pour le widget. Vous devez également utiliser l'utilitaire de chargement de données pour charger les données d'enregistrement et d'abonnement pour un widget. Pour plus d'informations sur la création de widgets, voir Création de widgets Commerce Composer.

Votre entreprise peut utiliser des widgets créés par des fournisseurs tiers s'ils ont été conçus pour fonctionner avec l'outil Commerce Composer. Pour utiliser un widget tiers, le widget doit toujours être enregistré dans la structure Commerce Composer et le magasin doit s'y abonner.

Composants de vitrine

Les composants de vitrine d'un widget se composent du fichier JSP de niveau supérieur pour le widget, les fournisseurs d'interface utilisateur et un fournisseur de données. En définissant les fournisseurs d'interface utilisateur et le fournisseur de données dans des fichiers distincts, il existe une séparation claire des données et des composants de présentation pour le widget. Par conséquent, la personnalisation ou la mise à niveau d'un widget est plus facile et le code est réutilisé.

Espace réservé de diagramme — Figure 2. Composants de vitrine de widget. Le diagramme suivant illustre comment les principaux composants de la vitrine d'un widget interagissent.

1 Sur la vitrine, le fichier JSP de niveau supérieur est appelé et s'exécute. La définition du widget dans le fichier JSP de niveau supérieur identifie le fournisseur de données et les fournisseurs d'interface utilisateur pour le widget.
2 Le fichier JSP de niveau supérieur utilise le fragment JSP du fournisseur de données pour récupérer des données de la base de données à l'aide d'appels REST, de contenu et de service.
3 Le fichier JSP de niveau supérieur est utilisé pour déterminer le fragment JSP du fournisseur d'interface utilisateur approprié afin de générer les données récupérées avec le fournisseur de données. La définition de widget peut définir un fournisseur d'interface utilisateur ou inclure une logique afin que les utilisateurs Management Center puissent sélectionner le fournisseur d'interface utilisateur.
4 Le widget est généré sur la page du magasin à l'aide du fournisseur d'interface utilisateur sélectionné.

JSP de niveau supérieur

Le JSP de niveau supérieur est appelé par la structure Commerce Composer pour récupérer le contenu et les fonctionnalités du widget lorsque le widget est inclus sur une page de magasin. Le fichier JSP définit les composants et propriétés suivants pour un widget :

Fichier de configuration de l'environnement
Fournisseur de données
Fournisseurs d'interface utilisateur et logique que la structure Commerce Composer utilise pour sélectionner le fournisseur d'interface utilisateur
Propriétés prédéfinies
Propriétés configurables qu'un utilisateur Management Center peut définir
Valeurs par défaut pour les propriétés

Lorsqu'une page de magasin est générée, le fichier JSP de niveau supérieur du widget est récupéré et utilisé par une balise wcpgl:widgetImport incluse dans la page du magasin. Le JSP de niveau supérieur pour un widget est enregistré dans le cadre de la définition du widget avec la base de données HCL Commerce.

Fournisseur de données

Un fichier de fournisseur de données est un fragment JSP qui définit comment récupérer les données requises pour le widget. Chaque widget ne doit comporter qu'un seul fichier fournisseur de données. Le fichier de fournisseur de données unique du widget est utilisé avec tous les fichiers de fournisseur d'interface utilisateur qui sont définis pour le widget. L'utilisation d'un fichier de fournisseur de données unique permet à plusieurs instances d'un widget de contenir les mêmes données mais d'être générées différemment.

Fournisseur d'interface utilisateur

Le fichier de fournisseur d'interface utilisateur est un fragment JSP qui définit comment générer les données récupérées pour un widget. Un widget peut prendre en charge plusieurs fichiers de fournisseur d'interface utilisateur afin que les données du widget puissent être générées de différentes manières. Chaque façon de générer un widget doit être définie dans un fichier de fournisseur d'interface utilisateur distinct. Par exemple, vous pouvez créer un widget de recommandation de produit personnalisé qui possède deux fournisseurs d'interface utilisateur :

Fournisseur d'interface utilisateur horizontal pour la génération du widget horizontalement
Fournisseur d'interface utilisateur vertical pour la génération du widget verticalement

Si plusieurs fournisseurs d'interface utilisateur existent pour un widget, la structure Commerce Composer sélectionne le fournisseur d'interface utilisateur correct à utiliser. La structure sélectionne le widget en fonction des propriétés configurables qu'un utilisateur Management Center définit et de la logique dans le fichier JSP de niveau supérieur.

Composants de vitrine supplémentaires

Vous pouvez utiliser une feuille CSS, des images et des éléments JavaScript pour personnaliser la fonctionnalité d'un widget personnalisé. La feuille CSS et les images sont spécifiées avec des instructions include dans le fichier JSP de niveau supérieur, tandis que tous les fichiers JavaScript sont identifiés dans la définition XML.

Les fichiers JavaScript définissent les actions utilisateur incluses dans le widget
La feuille CSS définit tous les boutons, zones de texte ou boutons radio qui doivent s'afficher

Tous les composants de la vitrine d'un widget sont inclus dans le même package de code. Si une feuille CSS, une image ou une ressource JavaScript est partagée par plusieurs widgets, l'actif est stocké dans un répertoire commun.

Composants Management Center

Lorsqu'un utilisateur Management Center ajoute un widget à un emplacement de modèle d'agencement, les propriétés d'un widget s'affichent pour être configurées par l'utilisateur Management Center.

Figure 3. Vue de propriétés de widget. Exemple de vue de propriétés d'un widget

La vue de propriétés affiche les informations suivantes :

Nom du widget qui identifie le widget dans l'agencement actuel et explique comment le widget est utilisé. Par exemple, vous pouvez utiliser un widget pour afficher une image de bannière de page, une zone de produits en promotion, et plus encore.
Les propriétés du widget sont des propriétés de paire nom-valeur facultatives qui sont stockées par la structure Commerce Composer dans la table de base de données PLWIDGETNVP. Lorsqu'un widget est généré dans un agencement, la valeur des propriétés est transmise aux fichiers JSP du magasin pour aider à déterminer comment le widget s'affiche.
Le contenu du widget contient les propriétés facultatives du widget, qui sont stockées à l'extérieur à partir de la structure Commerce Composer. Par exemple, certains widgets fournis par défaut créent un emplacement e-marketing qui affiche du contenu par défaut ou une activité Web. Ces propriétés ne sont pas stockées dans la structure Commerce Composer, mais la structure fournit des classes de gestionnaire de widgets (médiateurs) qui sont utilisées pour enregistrer certaines données liées au marketing.

Lorsqu'un utilisateur enregistre les paramètres de propriété, les valeurs de la propriété ainsi que les informations sur le modèle d'emplacement et d'agencement sont enregistrées dans la table de base de données PLWIDGETNVP. Si un widget possède des propriétés définies qui doivent être enregistrées dans une table différente de PLWIDGETNVP, la classe du gestionnaire de widget est utilisée pour déterminer comment enregistrer la valeur de la propriété. La classe de gestionnaire de widgets est également utilisée pour récupérer les informations de valeur de propriété enregistrées à partir de la base de données.

Pour plus d'informations sur les propriétés disponibles et utilisées pour les widgets qui sont fournies par défaut, voir Propriétés de widget Commerce Composer.

Pour qu'un widget soit pris en charge pour une utilisation dans le centre de gestion, une définition d'objet, une définition de vue des propriétés et tout texte traduisible pour le widget doivent être définis :

Définition d'objet de widget: Définition d'objet pour le widget. La définition d'objet de widget est basée sur la classe wcfWidgetObjectDefinition, qui est une extension de la classe wcfChildObjectDefinition. wcfWidgetObjectDefinition étend la classe wcfChildObjectDefinition pour inclure les propriétés WidgetDisplayGroups et helpLink. La classe wcfChildObjectDefinition est une sous-classe directe de la classe wcfObjectDefinition. La classe wcfWidgetObjectDefinition, tout comme la classe wcfChildObjectDefinition, décrit un objet métier. La définition d'objet de widget décrit un objet métier de widget et contient les métadonnées sur le widget requis par Management Center.
Définition de vue des propriétés: Ce fichier définit les propriétés du widget qu'un utilisateur Management Center peut définir. Une propriété peut être utilisée pour récupérer des données, déterminer le style de rendu ou fournir une configuration générale du widget.
Fichier de propriétés de l'agencement de la page: Le fichier PageLayoutLOB.properties définit les chaînes de texte affichées dans la vue des propriétés. Tout texte traduisible pour le widget est défini dans des fichiers de propriétés de texte spécifiques à la langue de magasin distincts. Le fichier de propriétés est enregistré dans le regroupement de ressources PageLayoutResourceBundle.lzx. Ce regroupement de ressources est inclus dans la bibliothèque de regroupements de ressources PageLayoutExtensionsLibrary.lzx.

Gestionnaire de widgets

Lorsque l'utilisateur ajoute un widget dans un emplacement, il peut alors définir les valeurs des propriétés configurables du widget. Lorsque l'utilisateur enregistre les paramètres de propriété, les valeurs sont enregistrées avec des informations permettant d'associer le widget et l'agencement à la valeur de la propriété dans la table de base de données PLWIDGETNVP. Certaines propriétés configurables doivent être enregistrées dans différentes tables de base de données. Une classe de gestionnaire de widgets est utilisée pour déterminer comment enregistrer les paramètres de propriété. Le gestionnaire de widgets est également utilisé pour valider les paramètres et récupérer les paramètres lorsque le widget est généré dans la vitrine. Lorsqu'un utilisateur choisit de modifier un widget dans un agencement, ReadWidgetManager récupère les informations d'identificateur du widget. Ensuite, le gestionnaire de widgets récupère les paramètres de propriété de widget spécifiques à l'agencement. La classe de gestionnaire de widgets est spécifiée dans la définition XML d'un widget.

Si vous créez des widgets personnalisés qui utilisent des données liées au marketing, vous pouvez utiliser une classe de gestionnaire de widgets fournie pour enregistrer les données. Si les classes de gestionnaire de widgets fournies n'enregistrent pas les données dont votre widget a besoin, vous pouvez créer une classe de gestionnaire de widgets personnalisée (mediator) pour gérer les données. Pour plus d'informations sur la classe de gestionnaire de widgets, voir Définition d'une classe de gestionnaire de widgets Commerce Composer.

Groupes de widgets

Les groupes de widgets sont des ensembles de widgets dans lesquels vous pouvez classer vos widgets personnalisés à deux fins :

Groupes d'affichage de widgets

Utilisé pour organiser des widgets dans l'outil Commerce Composer pour aider les utilisateurs Management Center à filtrer la liste des widgets. Dans Management Center, les widgets s'affichent dans la fenêtre Ajouter des widgets aux emplacements dans l'outil Commerce Composer. Les utilisateurs Management Center peuvent sélectionner un widget dans la fenêtre Ajouter des widgets aux emplacements pour ajouter le widget à un emplacement de modèle d'agencement. La fenêtre Ajouter des widgets aux emplacements inclut tous les widgets auxquels un magasin est abonné et qui sont enregistrés dans la structure Commerce Composer. Les widgets de cette fenêtre sont également regroupés en groupes d'affichage de widgets afin d'améliorer le filtrage pour localiser un widget. Lorsque vous créez des widgets personnalisés, vous pouvez les inclure dans ces groupes par défaut ou créer vos propres groupes. Par exemple, si vous ajoutez un type de page à l'outil Commerce Composer, vous pouvez créer un groupe pour ce type de page. Votre nouveau groupe peut inclure tous les widgets qu'un utilisateur du centre de gestion peut ajouter aux emplacements de modèle d'agencement pour ce nouveau type de page.

Un widget peut être inclus dans plusieurs groupes d'affichage de widgets. Par défaut, les groupes de widgets suivants sont disponibles :

AnyPage: Ensemble de widgets à utiliser sur n'importe quelle page.
CategoryPage: Ensemble de widgets à utiliser sur les pages de catégorie.
CatalogEntryPage: Ensemble de widgets à utiliser sur les pages d'entrée de catalogue.
SearchPage: Ensemble de widgets à utiliser sur une page de résultats de recherche.

Pour plus d'informations sur la création d'un groupe de widgets, voir Création de groupes de widgets Commerce Composer.

Figure 4. Fenêtre Ajouter des widgets aux emplacements. L'image suivante fournit une vue d'exemple de la fenêtre Ajouter des widgets aux emplacements avec la liste déroulante des groupes d'affichage de widgets par défaut.

Groupes de restrictions de widgets

Utilisés pour restreindre les emplacements dans les modèles de présentation pour qu'ils n'incluent que des widgets provenant de groupes de widgets définis. Par exemple, dans un modèle d'agencement de page de catégorie, vous pouvez restreindre un emplacement dans la barre latérale gauche pour inclure uniquement les widgets Navigation de catégorie et navigation dans les facettes. Les groupes de widgets qui sont autorisés à être inclus dans un emplacement sont définis dans la colonne PROPERTIES de la table PLWIDGETSLOT. Vous pouvez ajouter un widget à un groupe de restrictions de widgets en mettant à jour le XML de définition du widget. Les administrateurs peuvent utiliser l'utilitaire de chargement de données pour mettre à jour le XML de définition et mettre à jour les groupes auxquels appartient un widget.

Un widget peut être inclus dans plusieurs groupes de restrictions de widgets. Par défaut, toutefois, seul le groupe de widgets suivant est utilisé comme groupe de restrictions :

WidgetForTabTitle: Ensemble de widgets à utiliser comme titre d'onglet dans un modèle d'agencement qui inclut les emplacements à onglets. Ce nom de groupe ne s'affiche pas dans l'outil Commerce Composer. Ce groupe est défini uniquement comme un groupe de restrictions de widgets. Ce nom de groupe est utilisé pour identifier les widgets qui peuvent être inclus comme titre pour un emplacement à onglet de modèle d'agencement. Lorsqu'un utilisateur choisit d'inclure un widget dans un emplacement limité à ce groupe, seuls les widgets de ce groupe s'affichent comme disponibles. Par défaut, seul le widget Editeur de texte est inclus dans ce groupe. Tous les modèles d'agencement qui incluent les emplacements à onglets, tels que Page, huit emplacements, onglets, limitent les titres d'onglets pour inclure uniquement les widgets qui appartiennent à ce groupe.

Vous pouvez définir un groupe de widgets, y compris les groupes d'affichage de widgets fournis par défaut, à utiliser à la fois comme groupe d'affichage de widgets et comme groupe de restrictions de widgets. Pour plus d'informations sur la création d'un groupe de widgets, voir Création de groupes de widgets Commerce Composer.

Widgets adaptatifs

Tous les widgets qui se trouvent par défaut dans la bibliothèque de widgets Commerce Composer sont réactifs. Les widgets réactifs s'affichent en fonction de la taille de l'écran de l'appareil. Par exemple, le widget de navigation à facettes s'étend automatiquement à mesure que la taille de l'affichage augmente.

Un widget réactif n'a pas de largeur fixe. Lorsque vous placez un widget adaptatif dans l'emplacement d'un modèle, la largeur du widget s'ajuste automatiquement pour faire rentrer le contenu à l'intérieur de l'emplacement. La plupart des widgets réactifs n'ont pas de hauteur fixe. Vous pouvez utiliser les widgets réactifs dans des modèles d'agencement réactifs ainsi que dans des modèles d'agencement mobiles ou de bureau à largeurs définies.

Si vous avez créé un widget personnalisé, vous pouvez rendre votre widget réactif. Pour plus d'informations, voir Création d'un widget réactif.

Pour plus d'informations sur les widgets réactifs, voir Widgets adaptatifs.

Mise en cache

Les widgets de votre magasin et de votre site peuvent être mis en cache afin d'améliorer les performances de la vitrine. Chaque widget fourni par défaut a une entrée de fichier cachespec.xml qui définit les paramètres de mise en cache du widget. Toutefois, les widgets ne sont pas tous mis en cache par défaut. La mise en cache d'un widget et la manière dont il l'est dépendent de la fonctionnalité du widget. Pour en savoir plus sur les widgets de mise en cache Commerce Composer, voir Mise en cache et invalidation des widgets Commerce Composer.