Personalización del widget Commerce Composer para incluir información adicional

En esta lección, personalizará el widget mediante HCL Commerce Developer.

Procedimiento

En el proyecto crs-web, vaya al directorio WebContent y cree un nuevo directorio denominado microwidgets.
Copie el directorio crs-web > Widgets_801 > com.IBM.Commerce.Store.widgets.CatalogEntryList en el nuevo directorio MyWidgets que ha creado en el paso anterior.
En la vista Explorador de empresa, Haga clic en el botón derecho del ratón en crs-web y seleccione Renovar. El nuevo Directorio MyWidgets y su contenido ahora deben estar visibles en el proyecto.

El directorio y su contenido deben parecerse a la siguiente captura de pantalla dentro del proyecto:
Expanda crs-web > WebContent > MyWidgets > com.ibm.commerce.store.widgets.CatalogEntryList
Abra el archivo CatalogEntryList_UI.jspf y cambie a la vista Origen.

Tenga en cuenta que este widget contiene muchas dependencias en otros archivos que se encuentran en el directorio crs-web > WebContent > Widgets_801. En los pasos siguientes, se resuelven las dependencias.
Resuelva las dependencias copiando los archivos que necesita y actualizándolos en consecuencia.
Hay dos principios básicos a seguir al realizar la personalización:
- Si desea reutilizar las dependencias para los archivos predeterminados, debe asegurarse de que la vía de acceso de referencia sea correcta en el widget.
- Si desea modificar los archivos de dependencia que se encuentran en crs-web > WebContent > Widgets_801, debe copiarlos en la carpeta personalizada equivalente, crs-web > WebContent > MyWidgets.
1. Localice y copie los archivos siguientes en un directorio de trabajo: crs-web > WebContent > Widgets_801 > Common > CatalogEntry.
2. Pegue el directorio y los archivos en la carpeta personalizada equivalente: crs-web > WebContent > MyWidgets > Common
El directorio y su contenido deben parecerse a la siguiente captura de pantalla dentro del proyecto:
Actualice los archivos JSP para incluir la nueva información en el escaparate. Es decir, el nombre del fabricante de los productos.

Cada widget tiene archivos de proveedor de interfaz de usuario y archivos de proveedor de datos distintos. Los archivos del proveedor de datos contienen un sufijo _Data, por ejemplo, CatalogEntryList_Data.jspf. Los archivos del proveedor de interfaz de usuario contienen un sufijo _UI, por ejemplo, CatalogEntryList _UI.jspf.

Esta separación le permite modificar la interfaz de usuario sin tener en cuenta los datos. Puede tener varios archivos de proveedor de interfaz de usuario que comparten el mismo archivo de datos.
1. Expanda crs-web > WebContent > microwidgets > com.ibm.commerce.store.widgets.CatalogEntryList.
  
  Los archivos se muestran en la vista Explorador de empresa:
2. Abra el archivo CatalogEntryList_UI.jspf.
3. Localice las tres instancias de la línea siguiente:
```
<c:import url="${env_siteWidgetsDir}Common/CatalogEntry/CatalogEntryDisplay.jsp"> 
```
4. Cambie las líneas por:
```
<c:import url="/MyWidgets/Common/CatalogEntry/CatalogEntryDisplay.jsp">
```
5. Guarde los cambios y cierre el archivo.
6. Abra el archivo CatalogEntryList.jsp.
7. Localice la línea siguiente:
```
<jsp:include page="../com.ibm.commerce.store.widgets.PDP_AddToRequisitionLists/AddToRequisitionLists.jsp" flush="true">
```
8. Cámbiela por:
```
<jsp:include page="/Widgets_801/com.ibm.commerce.store.widgets.PDP_AddToRequisitionLists/AddToRequisitionLists.jsp" flush="true">
```
9. Guarde los cambios y cierre el archivo.
10. Abra el archivo AdditionalContents_UI.jspf.
11. Localice la línea siguiente:
```
<%@ include file="../Common/ESpot/ESpotTitle_UI.jspf"%>
```
12. Cámbiela por:
```
<%@ include file="/Widgets_801/Common/ESpot/ESpotTitle_UI.jspf"%>
```
13. Guarde los cambios y cierre el archivo.
14. Abra el archivo AdditionalContents_Data.jspf.
15. Localice la línea siguiente:
```
<%@ include file="../Common/ESpot/ESpotTitle_Data.jspf"%>
```
16. Cámbiela por:
```
<%@ include file="/Widgets_801/Common/ESpot/ESpotTitle_Data.jspf"%>
```
17. Guarde los cambios y cierre el archivo.

Actualice los archivos JSP para incluir la nueva información en el escaparate. Es decir, el nombre del fabricante de los productos.

Expanda crs-web > WebContent > MyWidgets > Common > CatalogEntry

Los archivos se muestran en la vista Explorador de empresa:
Abra el archivo CatalogEntryDisplay.jsp.

Localice el bloque de código siguiente:


   <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>

Tenga en cuenta lo siguiente: Cuando no se utiliza ningún parámetro adicional (la condición c:otherwise), el archivo CatalogEntryDisplay_GridView_UI.jspf es el archivo de interfaz de usuario que se utiliza para mostrar la lista de entradas de catálogo de forma predeterminada. Por lo tanto, el paso siguiente actualizará ese archivo.

Abra el archivo CatalogEntryDisplay_GridView_UI.jspf.
Localice la línea siguiente:
```
<div class="product_info">
```
Tenga en cuenta lo siguiente: Este es el principio del bloque que muestra la información de una entrada de catálogo. Es decir, el div muestra en la siguiente captura de pantalla que está rodeado por un recuadro rojo:

Añada el fragmento de código siguiente inmediatamente después de esta línea:


<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>

Inmediatamente encima de la sentencia </div> de cierre del div product_info, añada el fragmento de código siguiente:


<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>

Abra el archivo CatalogEntryDisplay_ListView_UI.jspf.

Localice el bloque de código siguiente:


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

Cámbiela por:


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

Guarde y cierre el archivo.

Actualice la definición del widget en la base de datos para que apunte al archivo JSP personalizado.
1. Cree un archivo CSV con la palabra clave de RegisterWidgetDef para cargar las definiciones de widget.
  
  En esta guía de aprendizaje, descargue y revise el siguiente archivo CSV: registerWidgetdef.zip.
2. Guarde el archivo en una carpeta en WCDE_installdir/transaction-dataload/data/.
  Por ejemplo, WCDE_installdir/transaction-dataload/data/Widget/registerWidgetdef.csv
3. Cargue el archivo CSV en la base de datos al realizar una de las tareas siguientes: Cargue el widget en la base de datos mediante el programa de utilidad de carga de datos o Configuración del trabajo del planificador del programa de utilidad de carga de datos de la tienda remota.
Reinicie el servidor de prueba de la tienda e inicie el servidor de prueba de personalización y el contenedor de servidor de pruebas de búsqueda, si el servidor y el contenedor no están ya en ejecución. Para obtener más información, consulte la vista Servidores:

Resultados

Ha actualizado los archivos JSP para incluir las vías de acceso de archivo y las dependencias correctas y ha añadido un nuevo div para visualizar el nombre de fabricante de cada entrada de catálogo, que muestra un enlace para buscar en el catálogo de la tienda todos los productos con el mismo fabricante.