Personnalisation du widget Commerce Composer pour inclure des informations supplémentaires

Dans cette leçon, vous personnalisez le widget à l'aide de HCL Commerce Developer.

Procédure

Dans le projet crs-web, accédez au répertoire WebContent et créez un nouveau répertoire appelé MyWidgets.
Copiez le répertoire crs-web > Widgets_801 > com.ibm.commerce.store.widgets.CatalogEntryList dans le nouveau répertoire MyWidgets que vous avez créé à l'étape précédente.
Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit sur crs-web et sélectionnez Actualiser. Le nouveau répertoire MyWidgets et son contenu doivent maintenant être visibles dans le projet.

Le répertoire et son contenu doivent ressembler à la capture d'écran suivante dans le projet :
Développez crs-web > WebContent > MyWidgets > com.ibm.commerce.store.widgets.CatalogEntryList.
Ouvrez le fichier CatalogEntryList_UI.jspf et passez à la vue Source.

Notez que ce widget contient de nombreuses dépendances sur d'autres fichiers qui sont situés dans le répertoire crs-web > WebContent > Widgets_801. Dans les étapes suivantes, les dépendances sont résolues.
Résolvez les dépendances en copiant les fichiers dont vous avez besoin et en les mettant à jour en conséquence.
Il y a deux principes de base à suivre lors de l'exécution de votre personnalisation :
- Si vous souhaitez réutiliser les dépendances pour les fichiers par défaut, vous devez vous vérifier que le chemin de référence est correct dans votre widget.
- Si vous souhaitez modifier les fichiers de dépendance situés dans crs-web > WebContent > Widgets_801, vous devez les copier dans votre dossier personnalisé équivalent, crs-web > WebContent > MyWidgets.
1. Localisez et copiez le répertoire suivant et ses fichiers : crs-web > WebContent > Widgets_801 > Common > CatalogEntry.
2. Collez le répertoire et les fichiers dans votre dossier personnalisé équivalent : crs-web > WebContent > MyWidgets > Common
Le répertoire et son contenu doivent ressembler à la capture d'écran suivante dans le projet :
Mettez à jour les fichiers JSP pour inclure les nouvelles informations dans la vitrine. C'est-à-dire le nom du fabricant des produits.

Chaque widget comporte des fichiers de fournisseur d'interface utilisateur et des fichiers de fournisseur de données distincts. Les fichiers de fournisseur de données contiennent un suffixe _Data, par exemple, CatalogEntryList_Data.jspf. Les fichiers de fournisseur d'interface utilisateur contiennent un suffixe _UI, par exemple, CatalogEntryList _UI.jspf.

Cette séparation vous permet de modifier l'interface utilisateur sans tenir compte des données. Vous pouvez disposer de plusieurs fichiers de fournisseurs d'interface utilisateur qui partagent le même fichier de données.
1. Développez crs-web > WebContent > MyWidgets > com.ibm.commerce.store.widgets.CatalogEntryList.
  
  Les fichiers sont affichés dans la vue Explorateur d'entreprise :
2. Ouvrez le fichier CatalogEntryList_UI.jspf.
3. Localisez les 3 instances de la ligne suivante :
```
<c:import url="${env_siteWidgetsDir}Common/CatalogEntry/CatalogEntryDisplay.jsp"> 
```
4. Remplacez les lignes par :
```
<c:import url="/MyWidgets/Common/CatalogEntry/CatalogEntryDisplay.jsp">
```
5. Enregistrez vos modifications et fermez le fichier.
6. Ouvrez le fichier CatalogEntryList.jsp.
7. Repérez la ligne suivante :
```
<jsp:include page="../com.ibm.commerce.store.widgets.PDP_AddToRequisitionLists/AddToRequisitionLists.jsp" flush="true">
```
8. Remplacez par :
```
<jsp:include page="/Widgets_801/com.ibm.commerce.store.widgets.PDP_AddToRequisitionLists/AddToRequisitionLists.jsp" flush="true">
```
9. Enregistrez vos modifications et fermez le fichier.
10. Ouvrez le fichier AdditionalContents_UI.jspf.
11. Repérez la ligne suivante :
```
<%@ include file="../Common/ESpot/ESpotTitle_UI.jspf"%>
```
12. Remplacez par :
```
<%@ include file="/Widgets_801/Common/ESpot/ESpotTitle_UI.jspf"%>
```
13. Enregistrez vos modifications et fermez le fichier.
14. Ouvrez le fichier AdditionalContents_Data.jspf.
15. Repérez la ligne suivante :
```
<%@ include file="../Common/ESpot/ESpotTitle_Data.jspf"%>
```
16. Remplacez par :
```
<%@ include file="/Widgets_801/Common/ESpot/ESpotTitle_Data.jspf"%>
```
17. Enregistrez vos modifications et fermez le fichier.

Mettez à jour les fichiers JSP pour inclure les nouvelles informations dans la vitrine. C'est-à-dire le nom du fabricant des produits.

Développez crs-web > WebContent > MyWidgets > Common > CatalogEntry.

Les fichiers sont affichés dans la vue Explorateur d'entreprise :

.
Ouvrez le fichier CatalogEntryDisplay.jsp.

Localisez le bloc de code suivant :


   <c:choose>
      <c:when test="${param.pageView == 'list'}">
         <%@ include file="CatalogEntryDisplay_ListView_UI.jspf" %>
      </c:when>
      <c:when test="${param.pageView == 'miniList'}">
         <%@ include file="CatalogEntryDisplay_MiniListView_UI.jspf" %>
      </c:when>
      <c:otherwise>
         <%@ include file="CatalogEntryDisplay_GridView_UI.jspf" %>
      </c:otherwise>
</c:choose>

Prenez connaissance des informations suivantes : Lorsqu'aucun paramètre supplémentaire n'est utilisé (la condition c:otherwise), le fichier CatalogEntryDisplay_GridView_UI.jspf est le fichier d'interface utilisateur utilisé pour afficher par défaut la liste d'entrées de catalogue. Par conséquent, la prochaine étape mettra à jour ce fichier.

Ouvrez le fichier CatalogEntryDisplay_GridView_UI.jspf.
Repérez la ligne suivante :
```
<div class="product_info">
```
Prenez connaissance des informations suivantes : C'est le début du bloc qui affiche les informations d'une entrée de catalogue. Il s'agit de l'élément div qui s'affiche dans la capture d'écran suivante et qui est entouré d'un cadre rouge :

.

Ajoutez le fragment de code suivant Immédiatement au-dessus de cette ligne :


<wcf:url var="manufacturerSearchDisplayViewURL" value="SearchDisplay">
   <wcf:param name="langId" value="${langId}"/>
   <wcf:param name="storeId" value="${WCParam.storeId}"/>
   <wcf:param name="catalogId" value="${WCParam.catalogId}"/>
   <wcf:param name="pageView" value="${pageView}"/>
   <wcf:param name="beginIndex" value="0"/>
   <wcf:param name="pageSize" value="${WCParam.pageSize}"/>
   <wcf:param name="manufacturer" value="${catalogEntryDetails.manufacturer}"/>
   <wcf:param name="sType" value="SimpleSearch"/>
   <wcf:param name="showResultsPage" value="true"/>
</wcf:url>

Immédiatement au-dessus de l'instruction </div> de clôture de l'élément div product_info, ajoutez le fragment de code suivant :


<div id="mfname_<c:out value='${catalogEntryID}'/>" style="font-size:12px; padding-left:15px">
<a href='<c:out value="${manufacturerSearchDisplayViewURL}" />'>
<c:out value="${catalogEntryDetails.manufacturer}" escapeXml="${env_escapeXmlFlag}"/></a></div>

Ouvrez le fichier CatalogEntryDisplay_ListView_UI.jspf.

Localisez le bloc de code suivant :


<jsp:include page="../../com.ibm.commerce.store.widgets.PDP_SKUList/SKUList.jsp" flush="true">

Rmplacez par :


<jsp:include page="/Widgets_801/com.ibm.commerce.store.widgets.PDP_SKUList/SKUList.jsp" flush="true">

Enregistrez et fermez le fichier.

Mettez à jour la définition du widget dans la base de données pour pointer vers votre fichier JSP personnalisé.
1. Créez un fichier CSV à l'aide du mot clé RegisterWidgetDef pour charger les définitions du widget.
  
  Dans ce tutoriel, téléchargez et passez en revue le fichier CSV suivant : registerWidgetdef.zip.
2. Enregistrez le fichier dans un dossier sous WCDE_installdir/transaction-dataload/data/.
  Par exemple : WCDE_installdir/transaction-dataload/data/Widget/registerWidgetdef.csv
3. Chargez le fichier CSV dans la base de données en effectuant l'une des tâches suivantes : Chargez votre widget dans la base de données à l'aide de l'utilitaire Chargement des données. ou Configuration du travail du planificateur de l'utilitaire de chargement de données du magasin distant.
Redémarrez le serveur de test de magasin et démarrez le serveur de test de personnalisation et le conteneur de serveur de test de recherche, si le serveur et le conteneur ne sont pas déjà en cours d'exécution. Pour plus d'informations, voir la vue Serveurs :

Résultats

Vous avez mis à jour les fichiers JSP pour inclure les chemins d'accès et les dépendances de fichiers corrects, et avez ajouté un nouvel élément div pour afficher le nom du fabricant de chaque entrée de catalogue, qui montre un lien pour rechercher le catalogue de magasin de tous les produits qui ont le même fabricant.