Adición de opciones de ordenación personalizadas para listas de productos y resultados de búsqueda

En el widget de Lista de entradas de catálogo, puede añadir opciones de ordenación personalizadas a la lista SORT BY para listas de productos que aparecen en las páginas de subcategoría y páginas de resultados de búsqueda. Esta personalización implica definir las nuevas opciones de ordenación en un archivo de configuración de búsqueda de HCL Commerce ampliado y en los archivos JSP de widget.

Cuando se publica la tienda de inicio Aurora, los diseños para las páginas de subcategoría y la página de resultados de búsqueda utilizan el widget de Lista de entradas de catálogo de la biblioteca de widgets de Commerce Composer. Este widget visualiza una lista de productos (consulte Opciones de ordenación en el widget de lista de entrada de catálogo). En el widget, la lista SORT BY tiene cuatro opciones de ordenación que están definidas, además de la opción predeterminada, Relevancia. Las opciones son Marcas, Nombre, Precio (ascendente) y Precio (descendente):

Ordenar por lista para listas de productos y resultados de búsqueda — Figura 1. Opciones de ordenación en el widget de lista de entrada de catálogo

Puede añadir una opción de ordenación personalizada, como una opción Número de pieza, para ayudar a los compradores a buscar un producto específico con mayor rapidez.

Parte 1. Añadir la opción de ordenación personalizada a los perfiles de búsqueda relevantes

Before you begin

Para familiarizarse con los perfiles de búsqueda, lea HCL Commerce Search archivo de configuración (wc-search.xml). En concreto, revise la información para la propiedad sort de un perfil de búsqueda. Esta parte de la tarea de personalización que requiere que se añada un campo de ordenación a la propiedad de ordenación para varios perfiles de búsqueda en la versión ampliada del archivo de configuración de HCL Commerce Search (wc-search.xml).

Procedure

Abra el archivo de configuración predeterminado de HCL Commerce Search (wc-search.xml) en la siguiente ruta:

Search_eardir/xml/config/com.ibm.commerce.catalog/wc-search.xml
Revise los perfiles de búsqueda existentes que especifican las cuatro opciones de ordenación predeterminadas que se ilustran en la Opciones de ordenación en el widget de lista de entrada de catálogo.
Los siguientes fragmentos de código muestran dos de los perfiles de búsqueda predeterminados del archivo de configuración de búsqueda de HCL Commerce:
- El perfil que tiene la etiqueta 1 encuentra productos por una categoría cuando los compradores examinan el catálogo.
- El perfil que tiene la etiqueta 2 encuentra productos por un término de búsqueda cuando los compradores realizan una búsqueda en el catálogo.
Estos perfiles contienen los cuatro campos de propiedades de ordenación predeterminados que se ofrecen en el widget de Lista de entradas de catálogo. En cada fragmento de código, los campos que se denominan 1, 2, 3 y 4 definen las opciones Marcas, Nombre, Precio (ascendente) y Precio (descendente):
```
...
1
<_config:profile name="IBM_findProductsByCategory" indexName="CatalogEntry">
...
  <_config:sort>
   <_config:field name="1" value="mfName_ntk_cs asc"/>
   <_config:field name="2" value="name_ntk asc"/>
   <_config:field name="3" value="price_* asc"/>
   <_config:field name="4" value="price_* desc"/>
  </_config:sort>
...
2
<_config:profile name="IBM_findProductsBySearchTerm" indexName="CatalogEntry">
...
 <_config:sort>
   <_config:field name="1" value="mfName_ntk_cs asc"/>
   <_config:field name="2" value="name_ntk asc"/>
   <_config:field name="3" value="price_* asc"/>
   <_config:field name="4" value="price_* desc"/>
 </_config:sort>
```
Important: Puede que la tienda utilice perfiles de búsqueda diferentes. Asegúrese de que sabe qué perfiles de búsqueda utiliza la tienda antes de continuar.
Para añadir una opción de ordenación personalizada, abra la versión ampliada del archivo de configuración de HCL Commerce Search (wc-search.xml) en la vía de acceso siguiente:

Search_eardir/xml/config/com.ibm.commerce.catalog-ext/wc-search.xml

Si aún no tiene una versión ampliada de este archivo, debe crear una utilizando las instrucciones del apartado Cambio de propiedades en el archivo de configuración de HCL Commerce Search (wc-search.xml)
Dentro del elemento <config:search, añada código para ampliar los perfiles de búsqueda existente para añadir la opción de ordenación personalizada.
Los fragmentos de código siguientes muestran cómo ampliar los dos perfiles de búsqueda del paso 2 para añadir un campo 5 como una opción de ordenación para Número de pieza. El valor partNumber_ntk es el nombre exacto de la columna de índice de búsqueda, en este caso, una columna no simbolizada (ntk). Para este ejemplo, los números de pieza se ordenan en orden ascendente (asc).
```
1
<_config:profile name="IBM_findProductsByCategory" indexName="CatalogEntry">    	   	        
   <_config:sort>       
      <_config:field name="5" value="partNumber_ntk asc"/>
   </_config:sort>
</_config:profile>


2
<_config:profile name="IBM_findProductsBySearchTerm" indexName="CatalogEntry">    	   	        
   <_config:sort>       
      <_config:field name="5" value="partNumber_ntk asc"/>
   </_config:sort>
</_config:profile>
```
Guarde y cierre el archivo wc-search.xml actualizado.

Parte 2: Personalizar los archivos JSP para el widget de Lista de entradas de catálogo para añadir la opción de ordenación personalizada

About this task

Lea la visión general del Widget de Lista de entradas de catálogo que contiene la lista SORTBY.
Familiarícese con los componentes de escaparate de un widget de Commerce Composer en Arquitectura de widgets de Commerce Composer.

Procedure

Cree una versión personalizada del widget de Lista de entradas de catálogo, si no tiene ninguna. Al crear una versión personalizada, puede evitar sobrescribir potencialmente la personalización con las futuras actualizaciones de HCL Commerce.
Siga las instrucciones del apartado Copia de widgets a nivel de sitio de HCL Commerce.
Abra el fragmento de JSP de proveedor de IU personalizado para el widget de Lista de entradas de catálogo.
Tip: Para el widget de Lista de entradas de catálogo predeterminado, este fragmento de JSP está en la vía de acceso siguiente:
- workspace_dir\Stores\WebContent\widgetdir\com.ibm.commerce.store.widgets.CatalogEntryList\CatalogEntryList_UI.jspf

Busque las líneas de código que definen las opciones de ordenación existentes en la lista SORT BY del widget.

Para el widget de Lista de entradas de catálogo predeterminado, se muestran aquí las líneas de código:


<div class="sorting_view_controls_container">
  <div class="sorting_controls">
    <span class="order_by_label"><label for="orderBy${widgetSuffix}">
        <fmt:message key="SN_SORT_BY" bundle="${widgetText}"/></label>:</span>
    <div id="orderByDropdown${widgetSuffix}" class="orderByDropdown selectWrapper">
        <select data-dojo-type="dijit/form/Select" title="<fmt:message key='SN_SORT_BY_USAGE' bundle='${widgetText}'/>" 
                id="orderBy${widgetSuffix}" baseClass="dijitSelect dijitValidationTextBox orderBySelect" name="orderBy" 
                onChange="javaScript:setCurrentId('orderBy${widgetSuffix}');SearchBasedNavigationDisplayJS.sortResults(this.value)">
          <option <c:if test="${sortBy == ''}">selected="selected"</c:if> value = "0"><fmt:message key="SN_NO_SORT" bundle="${widgetText}"/></option>
          <option <c:if test="${sortBy == '1'}">selected="selected"</c:if> value = "1"><fmt:message key="SN_SORT_BY_BRANDS" bundle="${widgetText}"/></option>
          <option <c:if test="${sortBy == '2'}">selected="selected"</c:if> value = "2"><fmt:message key="SN_SORT_BY_NAME" bundle="${widgetText}"/></option>
          <c:if test="${globalpricemode == 1}">
            <option <c:if test="${sortBy == '3'}">selected="selected"</c:if> value = "3"><fmt:message key="SN_SORT_LOW_TO_HIGH" bundle="${widgetText}"/></option>
            <option <c:if test="${sortBy == '4'}">selected="selected"</c:if> value = "4"><fmt:message key="SN_SORT_HIGH_TO_LOW" bundle="${widgetText}"/></option>
          </c:if>
        </select>
    </div>
...

Como elemento hijo del elemento <select>, añada el código para definir la opción de ordenación personalizada.
Por ejemplo, esta línea de código hace referencia a un campo de ordenación personalizado que se ha definido en el archivo wc-search.xml ampliado con un nombre de 5:
```
<option <c:if test="${sortBy == '5'}">selected="selected"</c:if> value = "5"><fmt:message key="SN_SORT_BY_PARTNUMBER" bundle="${widgetText}"/></option>
```
Si prefiere no utilizar un paquete compuesto de recursos para el widget, puede proteger el texto de la opción de ordenación, tal como se muestra aquí:
```
<option <c:if test="${sortBy == '5'}">selected="selected"</c:if> value = "5">Part Number</option>
```
Guarde y cierre el fragmento de JSP de proveedor de interfaz de usuario.
Si ha hecho referencia a un paquete compuesto de recursos en el paso 4, añada la clave de mensaje para el texto para la opción de ordenación en el escaparate al paquete compuesto de recursos para el widget.
Por ejemplo, si desea mostrar las palabras Número de pieza en la lista SORT BY, debe añadir una línea similar a la del ejemplo siguiente al archivo de propiedades:
```
SN_SORT_BY_PART_NUMBER = Part Number
```
Tip: Para el widget de Lista de entradas de catálogo predeterminado, el archivo de propiedades inglés que define el texto de widget está en la vía de acceso siguiente:
- workspace_dir\Stores\WebContent\widgetdir\properties\widgettext_en_US.properties
Abra el fragmento JSP de proveedor de datos personalizados para el widget de Lista de entradas de catálogo.
Tip: Para el widget de Lista de entradas de catálogo predeterminado, este fragmento de JSP está en la vía de acceso siguiente:
- workspace_dir\Stores\WebContent\widgetdir\com.ibm.commerce.store.widgets.CatalogEntryList\CatalogEntryList_Data.jspf

Busque las siguientes líneas de código:

<c:choose>
<%-- param.sortBy is from widget property --%>
<c:when test="${not empty param.sortBy}" >
  <c:if test="${(globalpricemode == 1 && param.sortBy != '0') || param.sortBy == '1' || param.sortBy == '2' || param.sortBy == '3' || param.sortBy == '4'}">
    <c:set var="sortBy" value="${param.sortBy}" scope="request"/> 1
  </c:if >
</c:when>
<c:when test="${not empty param.orderBy}" >
  <c:if test="${(globalpricemode == 1 && param.orderBy != '0') || param.orderBy == '1' || param.orderBy == '2' || param.orderBy == '3' || param.orderBy == '4'}">
    <c:set var="sortBy" value="${param.orderBy}" scope="request"/> 2
  </c:if >
</c:when>
</c:choose>

La línea con la etiqueta 1 establece la opción de ordenación en la página de tienda de acuerdo con el campo Orden de clasificación inicial para el widget de Lista de entrada de catálogo. Los usuarios del Centro de gestión configuran este campo cuando añaden el widget a un diseño en la herramienta Commerce Composer.

La línea que tiene la etiqueta 2 establece la opción de ordenación en la página de tienda cuando el comprador selecciona en la lista SORT BY.

Añada el parámetro para la opción de ordenación personalizada a la lista de parámetros.

En el fragmento de código siguiente, se añade || param.sortBy == '5' a ambas condiciones:

<c:choose>
<%-- param.sortBy is from widget property --%>
<c:when test="${not empty param.sortBy}" >
  <c:if test="${(globalpricemode == 1 && param.sortBy != '0') || param.sortBy == '1' || param.sortBy == '2' || param.sortBy == '3' || param.sortBy == '4' || param.sortBy == '5'}">
    <c:set var="sortBy" value="${param.sortBy}" scope="request"/>
  </c:if >
</c:when>
<c:when test="${not empty param.orderBy}" >
  <c:if test="${(globalpricemode == 1 && param.orderBy != '0') || param.orderBy == '1' || param.orderBy == '2' || param.orderBy == '3' || param.orderBy == '4' || param.sortBy == '5'}">
    <c:set var="sortBy" value="${param.orderBy}" scope="request"/>
  </c:if >
</c:when>
</c:choose>

Guarde y cierre el archivo.

Parte 3: Añadir la opción de ordenación personalizada a la vista de propiedades de widget en el Centro de gestión

Cuando los usuarios del Centro de gestión crean un diseño que utiliza el widget de Lista de entradas de catálogo, pueden establecer determinadas propiedades de visualización para el widget. La propiedad Orden de clasificación inicial controla cómo se ordenan los productos en el widget en la página de tienda antes de que el comprador elija una opción de ordenación diferente. Debe añadir la opción de ordenación personalizada a la definición de objeto para el widget de Lista de entradas de catálogo si desea que los usuarios del Centro de gestión puedan seleccionar la opción en la herramienta Commerce Composer.

Procedure

Abra el archivo de definición de objetos personalizados para el widget de Lista de entradas de catálogo.
Tip: Para el widget de Lista de entradas de catálogo predeterminado, la definición de objeto está en la vía de acceso siguiente:
- workspace_dir\LOBTools\WebContent\WEB-INF\src\xml\commerce\pagelayout\widgetDefinitions\ProductListingWidget\WidgetObjectDefinition.xml

Busque las líneas de código que definen las opciones existentes para la propiedad Orden de clasificación inicial.

Para el widget de Lista de entradas de catálogo predeterminado, se muestran aquí las líneas de código:


<PropertyDefinition propertyName="xWidgetProp_sortBy">
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Relevance}" value="0"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Brands}" value="1"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Name}" value="2"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_LowToHigh}" value="3"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_HighToLow}" value="4"/>
</PropertyDefinition>

Añada un valor de propiedad para la opción de ordenación personalizada.

Por ejemplo, la línea siguiente con la etiqueta 5 añade un valor de propiedad para establecer el orden de clasificación inicial en Número de pieza:


<PropertyDefinition propertyName="xWidgetProp_sortBy">
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Relevance}" value="0"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Brands}" value="1"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Name}" value="2"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_LowToHigh}" value="3"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_HighToLow}" value="4"/>
5 <PropertyValue displayName="${PageLayoutResources.productListingWidgetOrderBy_PartNumber}" value="5" />
</PropertyDefinition>

Si ha hecho referencia a un paquete compuesto de recursos en el paso 3, añada la clave de mensaje para el texto al paquete compuesto de recursos para el widget.
Por ejemplo, si desea mostrar las palabras Número de pieza en la propiedad Orden de clasificación inicial, debe añadir una línea similar a la del ejemplo siguiente al archivo de propiedades:
```
# Product Listing Widget
productListingWidgetOrderBy_PartNumber=Part number
```
Tip: Para el widget de Lista de entradas de catálogo predeterminado, el archivo de propiedades inglés que define el texto de widget está en la vía de acceso siguiente:
- workspace_dir\LOBTools\src\com\ibm\commerce\pagelayout\client\lobtools\properties\PageLayoutLOB_en_US.properties
Si prefiere no utilizar un paquete compuesto de recursos para el widget, puede proteger el texto de la opción de ordenación, tal como se muestra aquí:
```
<PropertyValue displayName="Part number" value="5" />
```
Guarde y cierre el archivo.
Reinicie el servidor.

Parte 4: Probar los resultados de la personalización en el escaparate.

Procedure

En un navegador, vaya a la URL de la tienda.
Realice una búsqueda especificando un término de búsqueda. Cuando se visualice la página de resultados de búsqueda, en el widget de Lista de entradas de catálogo, confirme que la lista SORT BY muestra la opción de ordenación personalizada y que la ordenación funciona como se espera.
Vaya a una subcategoría que contenga productos. En el widget de Lista de entradas de catálogo, confirme que la lista de SORT BY muestra la opción de ordenación personalizada y que la ordenación funciona como se espera.