Añadir soporte para recomendaciones dinámicas de entrada de catálogo en una zona de e-Marketing

Antes de que un Director de marketing o un usuario de empresa pueda utilizar la acción dinámica Recomendar entrada de catálogo en una actividad web, puede ser necesaria una personalización de las páginas JSP de tienda. Como desarrollador de páginas de tienda, puede añadir soporte para utilizar la acción dinámica Recomendar entrada de catálogo en una zona de e-Marketing. El soporte para esta acción debe añadirse al archivo JSP en el que se va a ejecutar la actividad.

Antes de empezar

Antes de comenzar esta tarea, asegúrese de completar los siguientes requisitos previos:
  • Publicar una tienda que se basa en el modelo de tienda de inicio Aurora.
  • Identificar el archivo JSP que desea utilizar para mostrar recomendaciones dinámicas de entrada de catálogo.

Por qué y cuándo se efectúa esta tarea

De forma predeterminada, hay dos páginas JSP de ejemplo disponibles en la tienda de inicio Aurora que están actualizadas para dar soporte a la visualización de recomendaciones dinámicas de entrada de catálogo. Para añadir este soporte, puede personalizar uno de los siguientes archivos JSP y el siguiente archivo JavaScript, que proporcionan el soporte predeterminado para una nueva tienda que se despliega y que se basa en el modelo de tienda de inicio Aurora:
Archivo JSP Finalidad
CategoryNavigationDisplay.jsp El archivo JSP que se utiliza cuando un cliente está examinando categorías en un catálogo de la tienda.
SearchResultsDisplay.jsp El archivo JSP que se utiliza cuando se lleva a cabo una búsqueda de palabra clave que utiliza términos de búsqueda.
Estos archivos JSP están en el directorio siguiente:
  • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\Layouts
  • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Layouts
donde store_dir es el nombre del directorio para la tienda.
También debe añadir soporte al archivo JavaScript siguiente:
JavaScript Finalidad
ProductRecommendation.js El archivo JavaScript que define la función de las recomendaciones de entrada de catálogo.
Este archivo JavaScript está en el directorio siguiente:
  • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\javascript\widgets
  • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\javascript\widgets
donde store_dir es el nombre del directorio para la tienda.

Procedimiento

  1. Defina el URL de Ajax para renovar las recomendaciones de entrada de catálogo. Al renovar las recomendaciones, las entradas de catálogo que se muestran se renuevan continuamente. Estas se renuevan basándose en las opciones de examen o navegación realizadas por el cliente que está viendo la tienda.
    1. En su programa de gestión de archivos, vaya al directorio que contiene la página JSP de tienda a la que va a añadir soporte.
      Por ejemplo,
      • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\Layouts
      • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Layouts
      donde store_dir es el nombre del directorio para la tienda.
    2. Localice el archivo JSP al que desea añadir soporte y abra el archivo para editarlo.
    3. Localice en el archivo la sección de código que define la ubicación donde en la que desea incluir una zona de e-Marketing que muestre recomendaciones dinámicas de entrada de catálogo. Defina cómo se han de manejar las recomendaciones dinámicas.
    4. Añada el código para definir el URL de Ajax.
      El código siguiente define este URL de Ajax en el archivo JSP:
      <wcf:url var="ProdRecommendationRefreshViewURL" value="ProductRecommendationView" type="Ajax">
  <wcf:param name="emsName" value="${emsNameTemp}Row4_CatEntries" />
  <wcf:param name="pageSize" value="4" />
  <wcf:param name="commandName" value="CategoryDisplay" /> 
  <wcf:param name="langId" value="${langId}" />
  <wcf:param name="storeId" value="${storeId}" />
  <wcf:param name="catalogId" value="${catalogId}" />
  <wcf:param name="categoryId" value="${WCParam.categoryId}" />
  <wcf:param name="urlLangId" value="${urlLangId}" />
</wcf:url>

      Por ejemplo, en el archivo SearchResultsDisplay.jsp, el código anterior se incluye después del código que define la visualización de resultados de búsqueda para productos y contenido.

      El URL type es Ajax. Todos los parámetros incluidos en el código anterior son parámetros obligatorios:
      Parámetro Descripción:
      pageSize Este parámetro indica el número de entradas de catálogo que se devolverán para mostrar una página.
      emsName El nombre de la zona de e-Marketing.
      commandName El nombre del mandato.
      langId El identificador de idioma. Este identificador se utiliza para delimitar los resultados de las recomendaciones de entrada de catálogo por el idioma que están examinando.
      storeId El identificador de la tienda. Este identificador se utiliza para delimitar los resultados de las recomendaciones de entrada de catálogo por la tienda que están examinando.
      catalogId El identificador de catálogo. Este identificador se utiliza para delimitar los resultados de las recomendaciones de entrada de catálogo por el catálogo que están examinando.
      categoryId El identificador de categoría. Este identificador se utiliza para delimitar los resultados de las recomendaciones de entrada de catálogo por la categoría que están examinando.
      urlLangId El identificador de idioma del URL. Este identificador se utiliza para delimitar los resultados de las recomendaciones de entrada de catálogo por el idioma que están examinando.
    5. Guarde los cambios. Mantenga abierto el archivo para editarlo.
  2. Incluya el archivo JavaScript para recomendaciones de entrada de catálogo en el archivo JSP para mostrar las recomendaciones dinámicas. Para incluir este archivo JavaScript, añada el código siguiente para definir el URL de Ajax: 
    <script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/ESpot/ProductRecommendation.js"></script>
    Guarde los cambios. Mantenga abierto el archivo para editarlo.
  3. Defina un controlador de renovación en el archivo JavaScript que define la función de recomendaciones de entrada de catálogo. Este nuevo controlador de renovación se utilizará para renovar las recomendaciones de entrada de catálogo. Vaya al directorio que contiene la página JSP de tienda a la que va a añadir soporte.
    1. Navegue hasta el directorio que contiene el archivo JavaScript:
      Por ejemplo,
      • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\Layouts
      • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Layouts
      donde store_dir es el nombre del directorio para la tienda.
    2. Abra el archivo ProductRecommendation.js para editarlo.
    3. Después del código que define la función de recomendaciones de entrada de catálogo, añada el código siguiente que define el controlador de renovación: 
      // Declare refresh controller
wc.render.declareRefreshController({
  id: "prodRecommendationRefresh_controller",
  renderContext: wc.render.getContextById("searchBasedNavigation_context"),
  url: "",
  formId: ""
  
  ,renderContextChangedHandler: function(message, widget) {
    var controller = this;
    var renderContext = this.renderContext;
    var resultType = renderContext.properties["resultType"];
    if(resultType == "products" || resultType == "both"){
      widget.refresh(renderContext.properties);
      console.log("espot refreshing");
    }
  }
});

      Este código llama a la función Ajax wc.render.declareRefreshController y define el controlador de renovación como prodRecommendationRefresh_controller.

    4. Guarde y cierre el archivo.
  4. En el archivo JSP, añada código para utilizar el nuevo controlador de renovación para recomendaciones de entrada de catálogo. Para utilizar este controlador en el archivo JSP, añada el código siguiente después del código para definir el URL de Ajax: 
    <script type="text/javascript"> 
  dojo.addOnLoad(function(){
  wc.render.getRefreshControllerById('prodRecommendationRefresh_controller').url = '${ProdRecommendationRefreshViewURL}';
  });
</script>

    Este fragmento de código llama a la función Ajax wc.render.getRefreshControllerById y define el controlador de renovación como ProdRecommendationRefresh_controller en el archivo JSP. Este código también establece el URL para el controlador como un URL previamente definido, como por ejemplo ProdRecommendationRefreshViewURL.

  5. Defina un área de renovación en el archivo JSP para mostrar la recomendación de entrada de catálogo. Para definir esta área, añada las siguientes líneas de código en el archivo después del código para utilizar el controlador de renovación: 
    <div class="widget_product_listing_position">
  <c:if test="${!env_fetchMarketingDetailsOnLoad}">
    <div dojoType="wc.widget.RefreshArea" id="CategoryProductRecommendationESpot_Widget" controllerId="prodRecommendationRefresh_controller">
    <% out.flush(); %>
    <c:import url="${env_jspStoreDir}Widgets/ESpot/ProductRecommendation/ProductRecommendation.jsp">
      <c:param name="pageSize" value="4" />
      <c:param name="emsName" value="${emsNameTemp}Row4_CatEntries" />
      <c:param name="errorViewName" value="AjaxOrderItemDisplayView" />
      <c:param name="pageView" value="miniGrid"/>
    </c:import>
    <% out.flush(); %>
    </div>
  </c:if>
</div>

    Este código define un widget de interfaz de usuario de área de renovación. Por ejemplo, dojoType="wc.widget.RefreshArea". Utilice este widget para renovar las recomendaciones de entrada de catálogo. Este código también define el controlador del área de renovación para convertirlo en el controlador creado previamente controllerId="prodRecommendationRefresh_controller".

  6. Guarde y cierre el archivo.
  7. Modifique el archivo JSP para asegurar que la zona de e-Marketing se muestre correctamente:
    1. En su programa de gestión de archivos, vaya al directorio que contiene el archivo JSP de visualización:
      Por ejemplo,
      • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\Widgets\CatalogEntry\CatalogEntryDisplay.jsp
      • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Widgets\CatalogEntry\CatalogEntryDisplay.jsp
      donde store_dir es el nombre del directorio para la tienda.
    2. Localice el archivo JSP y abra el archivo para editarlo.
    3. Localice el código que determina cómo se muestra el contenido en la zona de e-Marketing: 
      <%@ include file="ext/CatalogEntryDisplay_UI.jsp">
      Añada el código siguiente antes del código que ha localizado:
      <div class="product">
      Añada el código siguiente después del código que determina cómo se muestra el contenido en la zona de e-Marketing.
      </div>
    4. Guarde los cambios y cierre el archivo.
      El código de archivo modificado puede ser similar al código siguiente:
      <div class="product">
  <%@ include file="ext/CatalogEntryDisplay_UI.jsp">
  <c:if test = "${param.custom_view ne 'true'}">
    <c:choose>
      <c:when test = "${param.pageView == 'sidebar'}">
        <%@ include file="CatalogEntryDisplay_SideBarView_UI.jsp" %>
      </c:when>
      <c:when test = "${param.pageView == 'grid'}">
        <%@ include file="CatalogEntryDisplay_GridView_UI.jsp" %>
      </c:when>
      <c:when test = "${param.pageView == 'list'}">
        <%@ include file="CatalogEntryDisplay_ListView_UI.jsp" %>
      </c:when>
      <c:when test = "${param.pageView == 'miniList'}">
        <%@ include file="CatalogEntryDisplay_MiniListView_UI.jsp" %>
      </c:when>
      <c:when test = "${param.pageView == 'miniGrid'}">
        <%@ include file="CatalogEntryDisplay_MiniGridView_UI.jsp" %>
      </c:when>
      <c:otherwise>
        <%-- Default to mini grid view... --%>
        <%@ include file="CatalogEntryDisplay_MiniGridView_UI.jsp" %>
      </c:otherwise>
    </choose>
  </c:if>
</div>

Qué hacer a continuación

Confirme con el Gestor de marketing o el usuario de empresa que pueden incluir la acción para recomendar entradas de catálogo dentro de una actividad web en una zona de e-Marketing de la página de tienda actualizada. Asegúrese de que el Gestor de marketing o el usuario de empresa confirma que las recomendaciones de entrada de catálogo cambian en función de las opciones de navegación que realizan cuando se prueba la actividad.