HCL Commerce Developer

Définition des ressources de vitrine pour un widget Commerce Composer

Créez les fichiers JSP, les fichiers du fournisseur de l'interface utilisateur et les fichiers du fournisseur de données pour votre widget Commerce Composer. Ces ressources de vitrine définissent l'apparence et le contenu de votre widget.

Avant de commencer

Procédure

Partie A : Déplacez les fichiers de code source générés pour les ressources de vitrine de votre widget dans un package de code dans la structure de fichiers de l'espace de travail HCL Commerce Developer par défaut.
  1. Dans la vue Explorateur d'entreprise, créez un répertoire pour contenir les packages de code pour les widgets personnalisés.
    Dans ce répertoire, créez le package de code qui doit contenir tous les actifs de votre widget personnalisé qui ne sont pas partagés entre plusieurs widgets. Si votre site dispose de plusieurs widgets personnalisés, assurez-vous que les actifs de chaque widget personnalisé se trouvent dans des packages de code distincts.
    Les packages de code qui définissent les widgets de niveau site par défaut se trouvent dans le répertoire suivant :
    • workspace_dir\crs-web\WebContent\widgetdir
    Les fichiers JSP et les fragments JSP partagés entre plusieurs widgets sont stockés dans le répertoire Common du répertoire widgetdir.
    Si vous créez un widget personnalisé de niveau site, créez le répertoire suivant, si le répertoire n'existe pas :
    • workspace_dir\crs-web\WebContent\Widgets-vendor
    Si vous créez un widget personnalisé de niveau magasin, créez un répertoire spécifique au magasin qui contient le répertoire Widgets-vendor, si le répertoire n'existe pas :
    • workspace_dir\crs-web\WebContent\store\Widgets-vendor
    Où store est le nom du répertoire de votre magasin, par exemple, aurora.

    Si votre widget personnalisé contient des actifs courants sur plusieurs widgets, mais que les actifs ne sont pas déjà inclus dans le répertoire Widgets\Common par défaut, incluez ces actifs dans un répertoire Common du répertoire Widgets-vendor. Si ce répertoire Common n'existe pas, créez-le.

  2. Copiez les fichiers de code source générés pour vos ressources de vitrine de widget depuis le dossier cible dans la structure de fichiers de l'espace de travail HCL Commerce Developer par défaut.
    1. Accédez au projet où la transformation JET a généré les fichiers de code source dans la tâche précédente. Copiez la structure de fichier et les fichiers suivants qui se trouvent dans le dossier cible :
      • target_folder\crs-web\WebContent\Widgets-vendor\Common
      • target_folder\crs-web\WebContent\Widgets-vendor\images
      • target_folder\crs-web\WebContent\Widgets-vendor\Properties
      • target_folder\crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\javascript
      • target_folder\crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\identifier.jsp
      • target_folder\crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\identifier_Data.jspf
      • target_folder\crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\identifier_UI.jspf
      • target_folder\crs-web\WebContent\Widgets-vendor\Properties\MyWidgetText_en_US.properties
      • target_folder\crs-web\WebContent\Widgets-vendor\Properties\MyWidgetText.properties
      Où
      vendor
      La valeur du paramètre vendor dans le fichier XML d'entrée du modèle.
      identifier
      La valeur du paramètre identifier dans le fichier XML d'entrée de modèle.
      target_folder
      Le dossier ou le projet que vous avez spécifié comme valeur pour le paramètre targetFolder dans le fichier XML d'entrée du modèle. Si vous n'avez pas spécifié de valeur pour le paramètre targetFolder, il s'agit du dossier ou du projet target_folder où se trouve le fichier XML d'entrée du modèle.
    2. Fusionnez les fichiers et la structure de fichiers copiés dans la structure de fichiers de l'espace de travail HCL Commerce Developer par défaut. Ne remplacez pas les fichiers ou les dossiers.
      Si vous créez un widget de niveau magasin, ajoutez le répertoire Widgets-vendor et le contenu du répertoire dans votre répertoire crs-web\WebContent\store. Où store est le nom du répertoire de votre magasin.
Partie B : Modifiez les fichiers de code source générés pour compléter la définition des ressources de vitrine de votre widget personnalisé.
  1. Remplissez le fichier JSP de niveau supérieur du point d'entrée pour votre widget personnalisé.
    Ce fichier JSP identifie le fichier d'installation de l'environnement, le fournisseur de données et le fournisseur d'interface utilisateur à importer pour l'affichage du widget. Si votre widget nécessite plusieurs fournisseurs d'interface utilisateur, le fichier JSP de niveau supérieur inclut le code qui spécifie les conditions lorsque chaque fournisseur d'interface utilisateur est utilisé pour rendre le widget.

    Le chemin d'accès au fichier de ce fichier JSP de niveau supérieur doit être enregistré avec l'identificateur widget dans la structure Commerce Composer. Le fichier JSP de niveau supérieur est importé dans les présentations de Commerce Composer lorsqu'un widget est affecté à une présentation. Lorsqu'une présentation qui inclut le widget est affectée à une page de magasin, le fichier JSP de niveau supérieur est utilisé pour appeler les composants afin de fournir la fonction widget.

    1. Accédez au répertoire fusionné suivant :
      • Pour les widgets de niveau site - crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
      • Pour les widgets de niveau magasin - crs-web\WebContent\store\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
    2. Ouvrez le fichier identifier.jsp pour l'éditer.
      Par défaut, le fichier de code source généré inclut le code suivant pour vous aider à définir le fichier JSP de niveau supérieur de votre widget : 
      <%--  The following code is created as an example. Modify the generated code and add any additional required code.  --%>
<%-- BEGIN identifier.jsp --%>
1
<%@include file="/Widgets/Common/EnvironmentSetup.jspf"%>
2
<fmt:setBundle basename="/Widgets-vendor/Properties/mywidgettext" var="mywidgettext" />
<c:set var="widgetPreviewText" value="${mywidgettext}"/>
<c:set var="emptyWidget" value="false"/>
3
<%@include file="identifier_Data.jspf"%>
4
<c:if test="${env_inPreview && !env_storePreviewLink}">	
 	<jsp:useBean id="previewWidgetProperties" class="java.util.LinkedHashMap" scope="page" />
 	<c:set target="${previewWidgetProperties}" property="name" value="${param.name}" />
 	<c:set target="${previewWidgetProperties}" property="name" value="${param.name}" />
</c:if>
5
<%@ include file="/Widgets/Common/StorePreviewShowInfo_Start.jspf" %>
6
<%@ include file="identifier_UI.jspf"%>
5
<%@ include file="/Widgets/Common/StorePreviewShowInfo_End.jspf" %>
<%-- END identifier.jsp --%>
      • 1 Fichier de configuration de l'environnement. Ce fichier de configuration est utilisé au moment de l'exécution. Ce fichier récupère et prépare le chemin d'accès de la page JSP, le chemin d'accès de fichier et le regroupement de ressources pour le widget. Ce fichier est appelé par de nombreux fichiers JSP dans un magasin et est partagé par plusieurs widgets. Par défaut, le fichier /Widgets/Common/EnvironmentSetup.jspf est spécifié.
      • 2 Le regroupement de ressources de propriété pour votre widget. Un fichier de propriétés est un groupe de ressources contenant du texte traduisible à afficher dans le widget. Par défaut, le fichier \Widgets-vendor\Properties\MyWidgetText.properties généré est spécifié.
      • 3 Identifie le fournisseur de données à utiliser pour récupérer le contenu destiné à être utilisé dans le widget. Le fournisseur de données identifier_Data.jspf généré est défini par défaut.
      • 4 L'instruction conditionnelle détermine si le widget est affiché dans l'aperçu du magasin. Si le widget est affiché dans l'aperçu du magasin, ce code ajoute la logique pour s'assurer que les propriétés du widget sont utilisées afin de rendre le widget pendant l'aperçu du magasin. La zone name identifie la propriété configurable.
      • 5 Les fichiers StorePreviewShowInfo_Start.jspf et StorePreviewShowInfo_End.jspf ajoutent du support pour afficher des informations sur le widget lorsque le widget s'affiche dans l'aperçu de magasin. Les instructions Inclure pour ces fichiers doivent comprendre l'instruction Inclure et la logique qui définissent les informations d'affichage pour le widget.
      • 6 Identifie le fournisseur d'interface utilisateur à utiliser pour rendre le widget sur une page de magasin. Le fournisseur d'interface utilisateur identifier_UI.jspf généré est défini par défaut.

      Modifiez le fichier JSP de niveau supérieur généré. Modifiez l'un des paramètres par défaut ou spécifiez d'autres propriétés pour répondre aux exigences de votre widget personnalisé.

    3. Facultatif : Si votre widget nécessite plusieurs fournisseurs d'interface utilisateur, incluez des instructions conditionnelles pour définir les conditions d'utilisation de chaque fournisseur d'interface utilisateur.
      Vous pouvez définir des propriétés configurables pour permettre aux utilisateurs Management Center de sélectionner le style d'affichage. Utilisez les valeurs des propriétés configurables comme conditions dans les instructions conditionnelles. Par exemple, le code suivant définit les conditions dans lesquelles chaque fournisseur d'interface utilisateur doit être utilisé pour afficher le widget Recommandation d'entrée de catalogue. 
      1
<c:if test="${!empty catentryIdList}">
  <c:choose>
2
    <c:when test="${param.widgetOrientation eq 'vertical'}">
      <%@include file="CatalogEntryRecommendation_Vertical_UI.jspf"%>
    </c:when>
3
    <c:otherwise>
     <%@include file="CatalogEntryRecommendation_Horizontal_UI.jspf"%>
    </c:otherwise>
  </c:choose>
</c:if>
      Le fichier JSP de niveau supérieur CatalogEntryRecommendation.jsp spécifie que le widget Recommandation d'entrée de catalogue peut s'afficher différemment selon le fournisseur d'interface utilisateur utilisé pour afficher le widget.
      • 1 Instruction conditionnelle pour vérifier qu'une vue personnalisée n'est pas définie pour le widget et qu'il y a des recommandations à récupérer pour l'affichage dans le widget. Si la condition est remplie, le fichier JSP de niveau supérieur utilise les instructions conditionnelles à vérifier pour sélectionner le fournisseur d'interface utilisateur approprié pour afficher le widget.
      • 2 Instruction conditionnelle pour tester si le paramètre d'orientation du widget est défini sur 'vertical'. Si la valeur est définie sur 'vertical', CatalogEntryRecommendation_Vertical_UI.jspf est utilisé pour afficher le widget. Les utilisateurs professionnels peuvent définir la valeur du paramètre d'orientation du widget dans Management Center.
      • 3 Si le paramètre d'orientation du widget n'est pas défini 'vertical', CatalogEntryRecommendation_Horizontal_UI.jspf est utilisé pour afficher le widget.
      Si aucune liste d'entrées de catalogue n'est spécifiée, les recommandations récupérées s'affichent avec le fournisseur d'interface utilisateur CatalogEntryRecommendation_Horizontal_UI.jspf. Si une liste d'entrées de catalogue est spécifiée pour s'afficher dans le widget, les recommandations peuvent s'afficher avec le fournisseur d'interface utilisateur CatalogEntryRecommendation_Vertical_UI.jspf ou CatalogEntryRecommendation_Horizontal_UI.jspf.
    4. Facultatif : Si vous définissez des propriétés pour votre widget, définissez une mappe previewWidgetProperties pour afficher les propriétés dans la fenêtre Informations sur le widget pour votre widget dans l'aperçu du magasin.
      Utilisez le format suivant pour définir la mappe previewWidgetProperties :
      <c:if test="${env_inPreview && !env_storePreviewLink}">
  <jsp:useBean id="previewWidgetProperties" class="java.util.LinkedHashMap" scope="page" />
  <c:set target="${previewWidgetProperties}" property="name" value="${param.name}" />
  <c:set target="${previewWidgetProperties}" property="name" value="${param.name}" />
</c:if>
      Où
      name
      Le nom de la propriété pour votre widget personnalisé. Par exemple, widgetOrientation. Ce nom de propriété correspond à une clé du regroupement de ressources des propriétés. Si la clé est introuvable, le nom fourni s'affiche dans la fenêtre Informations sur le widget.
      value
      La valeur de chaque propriété peut correspondre à une clé du regroupement de ressources des propriétés avec le format name_value. Si la clé est introuvable dans le regroupement de ressources des propriétés, la valeur fournie s'affiche dans la fenêtre Informations sur le widget.
      Assurez-vous d'inclure les propriétés correspondantes dans le regroupement de ressources des propriétés lorsque vous ajoutez le support Management Center pour votre widget.
    5. Facultatif : Si votre widget personnalisé doit utiliser des données générées par un autre widget, vous pouvez utiliser un événement wcTopic pour récupérer les informations de votre widget personnalisé.
      Si un widget publie un événement wcTopic qui contient toutes les données requises pour votre widget, vous pouvez demander à votre widget personnalisé de s'abonner à l'événement wcTopic pour récupérer les données. Pour plus d'informations, voir Publication et récupération d'informations avec des événements wcTopic pour widgets.
    6. Facultatif : Si votre widget personnalisé doit générer des données pour d'autres widgets à utiliser, vous pouvez utiliser un événement wcTopic pour publier les données.
      Les autres widgets peuvent ensuite s'abonner à l'événement wcTopic publié. Pour plus d'informations, voir Publication et récupération d'informations avec des événements wcTopic pour widgets.
    7. Sauvegardez le fichier.
      A titre d'exemple de fichier JSP de niveau supérieur, le code suivant définit le fichier JSP de niveau supérieur, Heading.jsp, pour le widget Titre :
      <!-- BEGIN Heading.jsp -->

<%@ include file="/Widgets/Common/EnvironmentSetup.jspf" %>

<c:set var="emptyWidget" value="false"/>

<%@include file="Heading_Data.jspf"%>

<%@ include file="/Widgets/Common/StorePreviewShowInfo_Start.jspf" %>

<%@include file="Heading_UI.jspf"%>

<%@ include file="/Widgets/Common/StorePreviewShowInfo_End.jspf" %>

<wcpgl:pageLayoutWidgetCache/>
<!-- END Heading.jsp -->
      Remarque : Le fichier JSP de niveau supérieur précédent pour le widget Titre inclut le code <wcpgl:pageLayoutWidgetCache/>. Cette balise est utilisée pour mettre en cache le widget. Pour plus d'informations sur la mise en cache des widgets, voir Mise en cache et invalidation des widgets Commerce Composer.
      Pour obtenir un exemple de fichier JSP de niveau supérieur pour un widget qui utilise des activités de marketing, voir le fichier JSP du widget Recommandation de contenu de niveau supérieur
      • crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation.jsp
  2. Définissez le fragment JSP du fournisseur de données pour votre widget personnalisé.
    Le fichier JSP de niveau supérieur appelle le fichier du fournisseur de données pour récupérer les données nécessaires afin d'afficher le widget. Un widget ne peut avoir qu'un seul fournisseur de données, qui est modélisé comme une page JSP indépendante.
    1. Accédez au répertoire fusionné suivant :
      • Pour un widget de niveau site - crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
      • Pour les widgets de niveau magasin - crs-web\WebContent\store\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
    2. Ouvrez le fichier identifier_Data.jspf pour l'éditer.

      Par défaut, le fichier de code source généré est vide. Ajoutez le code pour définir les données à récupérer pour votre widget personnalisé. Si votre widget personnalisé utilise les mêmes données qu'un widget existant, utilisez le fichier du fournisseur de données pour le widget existant afin de vous aider à définir le fichier de votre widget personnalisé.

      Pour localiser le fichier du fournisseur de données d'un widget existant, accédez au répertoire crs-web\WebContent\widgetdir. Développez le répertoire et le package de code pour un widget existant. Ouvrez le widget identifier_Data.jspf pour le widget existant.

      Si vous convertissez un fichier JSP de magasin existant en widget, utilisez le contenu de votre fichier JSP pour vous aider à définir les informations du fournisseur de données pour le widget. Examinez votre JSP et identifiez le code lié aux données. Modifiez et incluez ce code lié aux données dans le fichier du fournisseur de données de votre widget. Si le fichier JSP que vous convertissez contient des instructions d'inclusion ou d'importation, déplacez les fichiers JSP référencés dans le répertoire crs-web\WebContent\Widgets-vendor\Common. Mettez à jour les références dans votre fichier du fournisseur de données pour faire référence aux nouveaux chemins d'accès des fichiers.

    3. Sauvegardez le fichier.
      A titre d'exemple d'un fragment JSP du fournisseur de données, le code suivant définit le fichier du fournisseur de données, Heading_Data.jspf, pour le widget Titre :
      <%-- BEGIN Heading_Data.jsp --%>
<%-- Try to get product description --%>
<c:set var="productId" value="${param.productId}" />
<c:if test="${empty productId}">
 <c:set var="productId" value="${WCParam.productId}" />
</c:if>

<c:choose>
 <c:when test="${!empty productId}">
  <%-- Try to get it from our internal hashMap --%>
  <c:set var="key1" value="${productId}+getCatalogEntryViewAllByID"/>
  <c:set var="catalogEntryDetails" value="${cachedCatalogEntryDetailsMap[key1]}"/>
  <c:if test="${empty catalogEntryDetails}">
   <wcf:rest var="catalogNavigationView"
   url="${searchHostNamePath}${searchContextPath}/store/${WCParam.storeId}/productview/byId/${productId}" >
    <wcf:param name="langId" value="${langId}"/>
    <wcf:param name="currency" value="${env_currencyCode}"/>
    <wcf:param name="responseFormat" value="json"/>
    <wcf:param name="catalogId" value="${WCParam.catalogId}"/>
   </wcf:rest>
   <c:set var="catalogEntryDetails" value="${catalogNavigationView.catalogEntryView[0]}"/>
  </c:if>
  <c:if test="${!empty catalogEntryDetails}">
   <c:set var="productName" value="${catalogEntryDetails.name}" />
   <c:set var="catalogEntryID" value="${catalogEntryDetails.uniqueID}" />
  </c:if>
 </c:when>	
 <c:otherwise>
  <%-- Try to get category name --%>
  <c:set var="categoryId" value="${param.categoryId}" />
  <c:if test="${empty categoryId}">
   <c:set var="categoryId" value="${WCParam.categoryId}" />
  </c:if>
  <c:if test="${!empty categoryId}">
   <wcf:rest var="catGroupDetailsView" 
   url="${searchHostNamePath}${searchContextPath}/store/${WCParam.storeId}/categoryview/byId/${categoryId}" >
    <wcf:param name="langId" value="${langId}"/>
    <wcf:param name="currency" value="${env_currencyCode}"/>
    <wcf:param name="responseFormat" value="json"/>
    <wcf:param name="catalogId" value="${WCParam.catalogId}"/>
   </wcf:rest>
  </c:if>
  <c:if test="${!empty catGroupDetailsView}">
   <c:set var="categoryName" value="${catGroupDetailsView.catalogGroupView[0].name}"/>
  </c:if>
 </c:otherwise>
</c:choose>

<c:if test="${empty productId && empty categoryId}">
 <c:set var="emptyWidget" value="true" />
</c:if>
<c:set var="widgetSuffix" value="" />
<c:if test="${(!empty param.pgl_widgetSlotId) && (!empty param.pgl_widgetDefId) && (!empty param.pgl_widgetId)}">
 <c:set var="widgetSuffix" value="_${param.pgl_widgetSlotId}_${param.pgl_widgetDefId}_${param.pgl_widgetId}" />
</c:if>
<%-- END Heading_Data.jsp --%>
      Pour obtenir un exemple de fichier de fournisseur de données pour un widget qui utilise des activités de marketing, reportez-vous au fragment JSP du fournisseur de données Recommandation de contenu :
      • crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_Data.jspf
  3. Définissez le fragment JSP du fournisseur d'interface utilisateur pour votre widget personnalisé.
    Chaque façon d'afficher votre widget personnalisé doit être définie dans un fichier du fournisseur d'interface utilisateur. Par exemple, si votre widget personnalisé peut être affiché avec une orientation horizontale et verticale, vous devez définir deux fichiers du fournisseur d'interface utilisateur. Assurez-vous que la logique qui définit le fournisseur d'interface utilisateur est incluse dans le fichier JSP de niveau supérieur.
    1. Accédez au répertoire fusionné suivant :
      • Pour les widgets de niveau site - crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
      • Pour les widgets de niveau magasin - crs-web\WebContent\store\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
    2. Ouvrez le fichier identifier_UI.jspf pour l'éditer.
      Par défaut, le fichier de code source généré inclut le code suivant pour vous aider à définir le fichier du fournisseur d'interface utilisateur pour votre widget : 
      <%--  Add your UI code here, see example below --%>
1
<div id="widgetExample" >
  <ul style="list-style: none; font-size: 24px">
    <li>${param.name}</li>
  </ul>
</div>
      • 1 Exemple pour démontrer comment structurer le fragment JSP de votre fournisseur d'interface utilisateur.
    3. Modifiez le fragment JSP du fournisseur d'interface utilisateur généré.
      Identifiez les différentes divisions, <div/>, qui doivent être définies pour afficher votre widget. Ajoutez du code pour définir comment chaque division peut être affichée. Assurez-vous d'inclure les effets d'affichage en tant que paramètres d'importation JSP dans votre code. En incluant les effets en tant que paramètres, les utilisateurs Management Center peuvent spécifier quels effets d'affichage doivent être utilisés pour afficher le widget sur la vitrine.

      Si vous convertissez un fichier JSP de magasin existant en widget, utilisez le contenu de votre fichier JSP pour définir les informations du fournisseur d'interface utilisateur pour le widget. Examinez votre fichier JSP et identifiez le code lié à l'affichage du fichier JSP. Modifiez et incluez le code lié à l'affichage du fichier JSP dans le fichier du fournisseur d'interface utilisateur de votre widget. Si le fichier JSP que vous convertissez contient des instructions d'inclusion, déplacez les fichiers JSP référencés dans le répertoire crs-web\WebContent\Widgets-vendor\Common. Mettez à jour les références dans votre fichier du fournisseur de données pour faire référence aux nouveaux chemins d'accès des fichiers.

    4. Sauvegardez le fichier.
      A titre d'exemple d'un fragment JSP du fournisseur d'interface utilisateur, le code suivant définit le fichier du fournisseur d'interface utilisateur, Heading_UI.jspf, pour le widget Titre :
      <%-- BEGIN Heading_UI.jsp --%>
<div id="PageHeading<c:out value="${widgetSuffix}"/>" >
  <h1>
    <c:choose>
      <c:when test="${!empty categoryName}">${categoryName}</c:when>
      <c:when test="${!empty productName}">${productName}</c:when>
    </c:choose>
  </h1>
</div>
<%-- END Heading_UI.jsp --%>
      Pour obtenir un exemple de fichier de fournisseur d'interface utilisateur pour un widget qui utilise des activités de marketing, reportez-vous aux fragments JSP du fournisseur d'interface utilisateur Recommandation de contenu : Le widget Recommandation de contenu utilise quatre fragments JSP du fournisseur d'interface utilisateur pour définir toutes les façons dont le widget peut être affiché.
      • crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_UI.jspf
      • crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_Email_UI.jspf
      • crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_URLLink_UI.jspf
      • crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_Vertical_UI.jspf
  4. Définissez le texte traduisible qui doit s'afficher dans la vitrine pour votre widget personnalisé.
    1. Accédez au répertoire crs-web\WebContent\Widgets-vendor\Properties.
    2. Ouvrez le fichier MyWidgetText.properties généré pour l'éditer. Par défaut, le fichier inclut la propriété suivante : 
      WidgetTypeDisplayText_identifier=displayName
    3. Ajoutez le texte traduisible de votre widget dans le fichier.
    4. Enregistrez votre fichier.
    5. Répétez les étapes précédentes pour modifier le fichier MyWidgetText_en_US.properties afin d'ajouter du texte traduisible pour la langue anglaise des Etats-Unis.
    6. Facultatif : Ajoutez le texte sensible à la langue de votre widget dans les autres langues prises en charge par votre magasin. Créez les fichiers de propriétés pour vos langues supplémentaires avec la convention de nommage. MyWidgetText_language.properties
Incluez tous les actifs qui ne sont pas partagés entre plusieurs widgets dans le package de code de votre widget. Cela inclut tous les fichiers JSP, JavaScript et CSS.
  1. Créez ou déplacez les fichiers CSS pour votre widget.
    Si votre widget utilise un fichier CSS existant, assurez-vous que le fichier se trouve dans le répertoire approprié pour votre magasin. Pour plus d'informations sur la structure de fichiers CSS pour les widgets Commerce Composer, voir Structure de fichiers de magasin type Aurora adaptatif.

    Si vous devez créer un fichier CSS pour votre widget, envisagez de définir le CSS pour suivre les pratiques de conception Web réactives. Pour en savoir plus sur la définition de CSS pour rendre un widget réactif, voir Création de widgets adaptatifs.

  2. Facultatif : Si une image est requise par votre widget personnalisé pour l'affichage dans la vitrine, ajoutez l'image dans le répertoire crs-web\WebContent\Widgets-vendor\images.
  3. Facultatif : Créez toutes les fonctions JavaScript requises pour votre widget personnalisé.
    Par exemple, l'ajout de prise en charge pour ajouter des produits au panier. Si votre widget a besoin de fonctions JavaScript, vous pouvez créer un nouveau fichier pour inclure tous les JavaScript requis. Créez votre fichier JavaScript dans le répertoire suivant :
    • Pour les widgets de niveau site - crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\javascript
    • Pour les widgets de niveau magasin - crs-web\WebContent\store\Widgets-vendor\om.vendor.commerce.store.widgets.identifier\javascript
    Si le fichier JavaScript est partagé par plusieurs widgets personnalisés, ajoutez le fichier dans le répertoire suivant :
    • Pour les widgets de niveau site - crs-web\WebContent\Widgets-vendor\Common
    • Pour les widgets de niveau magasin - crs-web\WebContent\store\Widgets-vendor\Common
    Si votre widget est un widget de niveau site, déplacez les actifs vers le répertoire Common au niveau du site.

    Pour récupérer et utiliser JavaScript pour votre widget, vérifiez que la définition de widget XML de votre widget fait référence au fichier JavaScript.

    Pour un exemple d'un actif JavaScript pour un widget, reportez-vous au fichier JavaScript du widget Recommandation d'entrée de catalogue.
    • crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.CatalogEntryRecommendation\javascript\CatalogEntryRecommendation.js
  4. Facultatif : Si votre widget personnalisé utilise un fichier JSP, un fragment ou un autre actif, déplacez l'actif dans le répertoire commun. Assurez-vous que votre widget fait référence au nouveau chemin d'accès du fichier.
    • Pour les widgets de niveau site - crs-web\WebContent\Widgets-vendor\Common
    • Pour les widgets de niveau magasin - crs-web\WebContent\store\Widgets-vendor\Common
    Si votre widget est un widget de niveau site, déplacez les ressources vers le répertoire Common au niveau du site.
  5. Facultatif : Si vous convertissez un fichier JSP de magasin existant en widget, modifiez le magasin JSP existant pour supprimer le code que vous avez converti en widget. Mettez à jour le fichier JSP pour appeler l'outil Commerce Composer afin de fournir du contenu pour la page de magasin en incluant votre widget personnalisé dans la page avec le code suivant : 
    <c:import url= "${path to the widget top-level JSP file}"/>