Architecture de modèle d'agencement Commerce Composer

Un modèle d'agencement est le point de départ qu'un utilisateur Management Center peut utiliser pour composer un agencement pour une page de magasin. Chaque modèle est une grille contenant une disposition spécifique d'emplacements.

Par défaut, le magasin type Aurora est fourni avec un certain nombre de modèles d'agencement à utiliser avec l'outil Commerce Composer. Les utilisateurs Management Center peuvent utiliser ces modèles pour composer des agencements de page. Voici des exemples des modèles disponibles en publiant le magasin type Aurora ; les nombres représentent les emplacements de modèle dans lesquels les utilisateurs peuvent inclure des widgets :

Un modèle d'agencement se compose d'un conteneur divisé en une grille d'emplacements configurables.

Conteneur: Un conteneur est un widget spécialisé conçu pour contenir widget à l'intérieur des emplacements. Les conteneurs et les widgets sont définis et enregistrés dans les mêmes tables de base de données. Le JSP d'un conteneur définit une grille HTML simple avec des délimiteurs d'emplacements. Cette définition d'un conteneur inclut les propriétés configurables des emplacements et le nombre d'emplacements inclus dans le conteneur.
Les conteneurs ne s'affichent pas à l'intérieur de Management Center pour leur sélection ou leur modification par un utilisateur professionnel. Seule la maquette fonctionnelle de site Web associée à un modèle d'agencement s'affiche dans Management Center pour la sélection ou la modification du modèle par un utilisateur professionnel afin de composer un agencement de page.
Logements: Un emplacement est un espace réservé conceptuel dans un conteneur. Les positions des emplacements sont définies avec des coordonnées x et y pour représenter les emplacements rectangulaires. Les propriétés de position sont utilisées pour afficher les emplacements dans la grille qui s'affichent dans Management Center. Les widgets sont ajoutés dans les emplacements pour créer un agencement. Un agencement peut comporter plusieurs widgets empilés verticalement. La commande des widgets empilés est basée sur une zone de séquence. Les propriétés de position et les informations de définition des emplacements configurables sont enregistrées à l'aide de l'utilitaire de chargement de données. Vous pouvez également spécifier des widgets à prédéfinir pour un emplacement à l'aide de l'utilitaire de chargement de données. Vous pouvez également configurer chaque emplacement d'un modèle pour limiter l'inclusion aux widgets qui se trouvent dans les groupes de widgets spécifiés.
Vous pouvez définir des emplacements vides dans un modèle pour définir des zones sur une page où un widget ne peut pas être placé. Vous pouvez définir un emplacement pour inclure du contenu à partir d'un autre fichier JSP ou inclure un widget prédéfini. Vous pouvez configurer ces emplacements afin que les utilisateurs professionnels ne puissent pas modifier l'emplacement pour ajouter ou supprimer le contenu défini pour cet emplacement. Lorsqu'un utilisateur Management Center affiche le modèle d'agencement dans l'outil Commerce Composer, l'emplacement de modèle n'affiche pas le contenu prédéfini pour cet emplacement. La couleur de l'emplacement s'affiche en jaune au lieu du gris pour identifier que l'emplacement est rempli. Vous pouvez définir un emplacement de modèle pour qu'il soit en lecture seule lorsque vous chargez les informations du modèle à l'aide de l'utilitaire de chargement de données.

Création de modèles d'agencement

Vous pouvez personnaliser la structure Commerce Composer pour inclure de nouveaux modèles à utiliser dans l'outil Commerce Composer. Les modèles sont spécifiques à l'appareil. Votre définition de modèle doit définir si le modèle peut être utilisé pour créer des agencements à utiliser sur un appareil mobile ou de bureau. La définition peut également définir si un modèle et un agencement doivent être réactifs.

Modèles d'agencement pour ordinateurs de bureau: Ces modèles sont utilisés pour construire des pages qui seront affichées sur des ordinateurs de bureau, des ordinateurs portables et des tablettes.
Modèles d'agencement pour périphériques mobiles: Ces modèles sont utilisés pour construire des pages qui seront affichées sur des périphériques mobiles.
Modèles d'agencement adaptatifs: Ces modèles sont utilisés pour construire des pages pouvant être affichées sur n'importe quel type de périphérique. Les pages qui reposent sur ces modèles sont adaptées à tout un éventail de tailles d'écran grâce à des grilles et des images souples ainsi qu'à d'autres techniques de conception réactives. Ces modèles ont été conçus pour être utilisés avec des widgets réactifs. Par défaut, tous les modèles fournis avec l'outil Commerce Composer sont réactifs. Pour en savoir plus sur les modèles réactifs, voir Modèles d'agencement adaptatifs.

Pour créer un modèle d'agencement, vous devez définir le fichier JSP du conteneur pour le modèle et charger les informations de données du modèle à l'aide de l'utilitaire de chargement de données. En chargeant ces informations, vous pouvez enregistrer et définir le modèle et abonner un magasin au modèle. Pour plus d'informations, voir Création de modèles d'agencement.

Composants de vitrine

Les composants de vitrine du modèle se composent simplement d'un widget de conteneur pour définir le modèle. Un widget de conteneur est un type de widget utilisé pour générer la grille HTML qui crée les emplacements configurables dans un modèle. Pour chaque emplacement configurable, le code du widget de conteneur utilise la balise d'importation du widget Commerce Composer pour rechercher et importer les widgets qu'un utilisateur professionnel inclut dans l'emplacement. Un widget de conteneur peut également coder en dur un widget ou prédéfinir un widget à inclure dans le modèle.

Figure 1. Diagramme de présentation d'un modèle d'agencement. Le diagramme suivant illustre comment les principaux composants de vitrine d'un modèle interagissent.

1 Le fichier JSP du conteneur est utilisé pour identifier les emplacements configurables qui doivent être inclus dans le modèle. Le fichier JSP du conteneur est également utilisé pour identifier le fichier de configuration de l'environnement et tous les widgets prédéfinis.
2 Le fichier de configuration de l'environnement est utilisé pour identifier les valeurs de toutes les variables de préfixe et les chemins de fichiers contextuels courants. Le fichier inclut également le paramètre de codage de page et une page à afficher comme page d'erreur. Ces informations sont nécessaires pour récupérer et générer du contenu sur la page de magasin appropriée.
3 La grille HTML du conteneur et les emplacements fournissent la conception visuelle du modèle. Cette présentation est définie par les propriétés de l'emplacement. Cette conception inclut l'emplacement des espaces réservés à l'emplacement (5) dans le conteneur (4) dans lequel un widget peut être inclus. Les emplacements vides de l'image précédente sont inclus pour montrer la conception visuelle d'un modèle. Dans la vitrine, la page ne génère aucun espace blanc pour un emplacement vide.

Fichier JSP du conteneur: Le fichier JSP du conteneur définit le modèle, qui est un widget vide divisé en emplacements configurables. La définition de conteneur est similaire à la définition d'un widget, hormis le fait qu'aucune fonctionnalité et aucun contenu n'est défini pour une utilisation sur la vitrine. La définition de conteneur identifie le fichier d'installation de l'environnement à utiliser pour le modèle. Le conteneur identifie les emplacements configurables où un widget peut être ajouté et marque ces emplacements avec la balise wcpgl:widgetImport. Chaque emplacement est défini par un ID d'emplacement interne, qui doit être unique dans le conteneur.
En plus de l'identificateur du conteneur et des informations sur l'emplacement configurable, la définition doit également identifier les widgets prédéfinis pour n'importe quel emplacement. Si des widgets prédéfinis sont inclus, le fichier JSP du conteneur doit pointer vers le fichier JSP de niveau supérieur pour les widgets prédéfinis. Les métadonnées permettant de lier un widget prédéfini à un emplacement doivent être enregistrées avec les informations du conteneur. Si les widgets sont prédéfinis pour des emplacements, la définition des widgets doit également être enregistrée et faire l'objet d'un abonnement par un magasin avant que le widget puisse s'afficher dans un agencement de page qui utilise le modèle d'agencement. Toutes les valeurs des propriétés configurables des widgets doivent être associées au modèle et à l'emplacement appropriés dans la base de données. Lorsqu'un widget est prédéfini pour un modèle, les utilisateurs ne peuvent pas modifier ou supprimer le widget dans l'outil Commerce Composer. Toutes les propriétés du widget doivent être définies à l'aide de l'utilitaire de chargement de données.
Fichier de configuration de l'environnement: Le fichier de configuration est utilisé pour identifier les valeurs des configurations d'environnement pour la structure Commerce Composer. Le fichier identifie les valeurs de toutes les variables de préfixe, les chemins de fichiers contextuels courants, le paramètre de codage de page et la page à afficher comme page d'erreur.
Composants de vitrine supplémentaires: Si un modèle inclut des widgets prédéfinis, le fichier JSP de niveau supérieur pour les widgets peut être défini dans le fichier JSP du conteneur pour un emplacement de modèle.

Pour plus d'informations sur la définition du fichier JSP de conteneur pour un modèle d'agencement, voir Création de modèles d'agencement Commerce Composer.

Enregistrement, abonnement et définition de modèle

La définition de vitrine d'un modèle est enregistrée dans la structure Commerce Composer à l'aide de l'utilitaire de chargement de données. Avant qu'un modèle d'agencement puisse être utilisé dans l'outil Commerce Composer ou dans la vitrine, les informations relatives au modèle d'agencement doivent être enregistrées dans la structure Commerce Composer. Chaque magasin qui doit héberger des pages basées sur le modèle d'agencement doit être abonné au modèle avant que le modèle puisse être utilisé. L'enregistrement et l'abonnement d'un modèle se font à l'aide de l'utilitaire de chargement de données. Vous devez utiliser l'utilitaire de chargement de données pour charger des définitions d'emplacement pour définir la grille HTML et les emplacements d'un modèle. Pour plus d'informations, voir :

Modèles dans Management Center

Pour que la maquette fonctionnelle de site Web associée à un modèle s'affiche dans l'outil Commerce Composer, les définitions de vitrine du conteneur de modèles, de la grille et des emplacements doivent être enregistrées dans la base de données. Cette structure de maquette fonctionnelle de site Web de la grille de modèle et des emplacements doit être enregistrée dans la table de base de données PLWIDGETSLOT. Cette représentation visuelle inclut les propriétés de position des emplacements pour créer la présentation de la grille qui s'affiche dans l'outil Commerce Composer.

Dans l'outil Commerce Composer, les utilisateurs du centre de gestion peuvent utiliser la maquette fonctionnelle de site Web pour identifier les emplacements disponibles dans un modèle pour y inclure les widgets. La maquette fonctionnelle de site Web n'est toutefois qu'une représentation abstraite de l'agencement des lignes et des emplacements dans un modèle. La maquette fonctionnelle de site Web ne représente pas la taille réelle ou proportionnelle et la position des emplacements sur une page de magasin générée. La taille et la position des emplacements dans les modèles fournis par défaut avec HCL Commerce sont réactives et ajustées en fonction du contenu des widgets inclus dans les emplacements.

Si un emplacement est configuré pour être en lecture seule avec l'utilitaire de chargement de données, la couleur de l'emplacement est jaune au lieu de gris dans la maquette fonctionnelle de site Web pour identifier qu'il ne peut pas être modifié. Si un emplacement inclut un widget prédéfini, les utilisateurs ne peuvent pas modifier les propriétés du widget ou supprimer le widget dans l'outil Commerce Composer.

Lorsqu'un modèle d'agencement est enregistré et que votre magasin s'abonne au modèle, vous pouvez composer des agencements basés sur le modèle. Pour plus d'informations, voir :