Personalización del escaparate para enlazar a la nueva página de tienda

En esta lección, personalizará el escaparate, incluido el widget de navegación de Mi cuenta para enlazar a la nueva página.

Procedimiento

Lleve a cabo estos pasos en HCL Commerce Developer.

Identifique los archivos que requieren actualizaciones en esta lección.
1. Abra un navegador web y vaya a la tienda personalizada en el URL siguiente:
  - https://localhost:8443/shop/en/myesite
2. Haga clic en Mi cuenta en la cabecera e inicie la sesión.
3. Revise el flujo siguiente:
  En la página Mi cuenta, el nombre de vista (AjaxLogonForm) se puede ver en el URL:
  La correlación de controlador de vista de AjaxLogonForm se define en el archivo crs-web\WebContent\WEB-INF\spring\member-views.xml:
```
<bean id="AjaxLogonForm"
class="com.ibm.commerce.store.mvc.view.spring.StoreInternalResourceView"
>
<property name="url"
value="/UserArea/AccountSection/LogonSubsection/LogonSetup.jsp"/>
<property name="https" value="1"/>
<property name="generic" value="1"/>
</bean>
```
  Tal como se muestra, AjaxLogonForm se correlaciona con el archivo LogonSetup.jsp.
  A continuación, el archivo LogonSetup.jsp importa el archivo MyAccountDisplay.jsp cuando un usuario inicia sesión:
```
<c:set var="incfile"
value="${env_jspStoreDir}/UserArea/AccountSection/MyAccountDisplay.
jsp"/>
```
  A continuación, el archivo MyAccountDisplay.jsp importa el widget MyAccountNavigation:
```
<wcpgl:widgetImport useIBMContextInSeparatedEnv="${isStoreServer}"
url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.MyAccountNav
igation/MyAccountNavigation.jsp"/>
```
  Por lo tanto, el widget MyAccountNavigation muestra la navegación del lado izquierdo en la página mi cuenta:
  
  Este es el widget que personalizará para incluir un enlace a la nueva página que va a crear más adelante en esta guía de aprendizaje.
  
  El widget MyAccountNavigation reside en el archivador web de tiendas proporcionado por IBM (crs-web.war) para utilizarlo como plantilla. Para personalizarlo en esta guía de aprendizaje, lo copiará en su propia carpeta personalizada.
Actualice los archivos de widget de tienda para que se adapten a su escenario.

Consejo: Todos los cambios de código que se realizan en esta guía de aprendizaje están disponibles como ejemplos en los recursos de la guía (StoreLab1.zip) que ha descargado al principio de esta guía de aprendizaje. En lugar de realizar manualmente los cambios, puede copiar los archivos del ejemplo en el espacio de trabajo.
1. En el proyecto crs-web, vaya al directorio WebContent y cree un nuevo directorio denominado Widgets_S0126i.
2. Copie el directorio crs-web > WebContent > Widgets_801 > com.ibm.commerce.store.widgets.MyAccountNavigation al nuevo directorio Widgets_S0126i que ha creado en el paso anterior.
3. En el Explorador de empresa, Haga clic en el botón derecho del ratón en crs-web y seleccione Renovar. El nuevo directorio Widgets_S0126i 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:
Tenga en cuenta la siguiente regla al copiar archivos JSP del archivador web proporcionado por IBM en su propia carpeta personalizada: las referencias a los archivos JSP existentes que se encuentran en los archivos JSP copiados deben actualizarse para que se utilice la vía de acceso correcta.
Por ejemplo:
```
<c:import
url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.CategoryReco
mmendation/CategoryRecommendation.jsp">
```
Cambiaría a:
```
<c:import context="${staticIBMAssetContextRoot}"
url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.CategoryReco
mmendation/CategoryRecommendation.jsp”>
```
Este cambio garantiza que los archivos de la carpeta personalizada continúan apuntando correctamente a archivos desde el archivador web proporcionado por IBM.

Sin embargo, puesto que ninguno de los archivos que ha copiado en esta guía de aprendizaje contiene una etiqueta <c:import>, no es necesaria ninguna actualización.
Las inclusiones de JSP estático solamente pueden incluir archivos que están situados en el mismo archivador web. Por lo tanto, copie las dependencias del archivo y actualice los archivos JSP de widget personalizados para que apunten a las ubicaciones correctas dentro del mismo archivador web.
1. En crs-web > WebContent > Widgets_S0126i, cree un directorio denominado Common.
2. Copie los siguientes archivos y estructuras de directorios de crs-web > WebContent > Widgets_801 > Common en el nuevo directorio Common que ha creado en el paso anterior:
  En la raíz del nuevo directorio Common, pegue los archivos siguientes:
  - EnvironmentSetup.jspf
  - JSTLEnvironmentSetup.jspf
  - nocache.jspf
  - SterlingConfiguratorIntegrationSetup.jspf
3. En el Explorador de empresa, Haga clic en el botón derecho del ratón en crs-web y seleccione Renovar. Los nuevos directorios y su contenido deben estar ahora visibles en el proyecto.
Actualice las vías de acceso de archivo en los archivos JSP para que apunten a las ubicaciones correctas dentro del directorio com.ibm.commerce.store.widgets.MyAccountNavigation.
1. Expanda crs-web > WebContent > Widgets_S0126i > com.ibm.commerce.store.widgets.MyAccountNavigation.
  
  Los archivos se muestran en el Explorador de empresa:
2. Abra el archivo MyAccountNavigation.jsp para editarlo y cambie a la vista de Origen.
3. Cambie la línea siguiente:
```
<%@ include file="/Widgets_801/Common/EnvironmentSetup.jspf" %>
```
  A:
```
<%@ include file="../Common/EnvironmentSetup.jspf" %>
```
  Guarde y cierre el archivo.
4. Abra el archivo MyAccountNavigation_Data.jspf.
  
  Todos los URL que corresponden a los enlaces que se visualizan en la navegación Mi cuenta se definen en este archivo. Añadirá un URL a la nueva página de datos estadísticos que se creará más adelante en esta guía de aprendizaje.
5. Localice la etiqueta <wcf:url> que define la variable profileFormViewURL:
```
<wcf:url var="profileFormViewURL" value="ProfileFormView">
<wcf:param name="storeId" value="${WCParam.storeId}" />
<wcf:param name="catalogId" value="${WCParam.catalogId}"/>
<wcf:param name="langId" value="${langId}" />
<wcf:param name="profileFormStyle" value="strong"/>
</wcf:url>
```
6. Inmediatamente debajo de esta línea, inserte el fragmento de código siguiente:
```
<wcf:url var="extProfileFormViewURL" value="ExtProfileFormView">
<wcf:param name="storeId" value="${WCParam.storeId}" />
<wcf:param name="catalogId" value="${WCParam.catalogId}"/>
<wcf:param name="langId" value="${langId}" />
</wcf:url>
```
  Se ha definido una nueva variable denominada extProfileFormViewURL, que corresponde a la vista ExtProfileFormView. Esta vista se creará más adelante en esta guía de aprendizaje. Esta vista se correlacionará con el nuevo archivo JSP que crearemos para capturar la información demográfica adicional del cliente.
7. Abra el archivo MyAccountNavigation_UI.jspf. Todos los enlaces que se muestran en la página Mi cuenta se definen en este archivo.
8. Localice la sección siguiente:
```
<flow:ifEnabled feature="quickCheckout">
   <li>
      <a href="<c:out value='${profileFormViewURL}'/>" id="WC_MyAccountSidebarDisplayf_links_3"><wcst:message key="MA_QUICK_CHECKOUT" bundle="${widgetText}"/></a>
   </li>
</flow:ifEnabled>
```
9. Inmediatamente después de la etiqueta </flow:ifEnabled>, inserte el fragmento de código siguiente:
```
<li>
   <a href="<c:out value='${extProfileFormViewURL}'/>" id="WC_MyAccountSidebarDisplayf_links_3a"><wcst:message key="MA_EXT_PROFILE_INFO" bundle="${widgetText}"/></a>
</li>
```
  Guarde y cierre el archivo.
10. Expanda el directorio pendingApprovals.
11. Abra el archivo AjaxNumberOfBuyerPendingApprovals.jsp para editarlo.
12. Localice las líneas siguientes:
```
<%@ include file="/Widgets_801/Common/EnvironmentSetup.jspf" %>
<%@ include file="/Widgets_801/Common/nocache.jspf" %>
```
  Cámbielos por:
```
<%@ include file="../Common/EnvironmentSetup.jspf" %>
<%@ include file="../Common/nocache.jspf" %>
```
  Guarde y cierre el archivo.
13. Abra el archivo AjaxNumberOfOrderPendingApprovals.jsp para editarlo.
14. Localice las líneas siguientes:
```
<%@ include file="/Widgets_801/Common/EnvironmentSetup.jspf" %>
<%@ include file="/Widgets_801/Common/nocache.jspf" %>
```
  Cámbielos por:
```
<%@ include file="../Common/EnvironmentSetup.jspf" %>
<%@ include file="../Common/nocache.jspf" %>
```
  Guarde y cierre el archivo.
Actualice el widget MyAccountNavigation. El archivo MyAccountDisplay.jsp lo importará.
1. Expanda crs-web > WebContent > MyStoreSAS > UserArea > AccountSection.
  
  Los archivos se muestran en el Explorador de empresa:
2. Abra el archivo MyAccountDisplay.jsp.
3. Localice la línea siguiente:
```
<wcpgl:widgetImport useIBMContextInSeparatedEnv="${isStoreServer}" url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.MyAccountNavigation/MyAccountNavigation.jsp"/>
```
4. Sustituya la versión predeterminada de MyAccountNavigation por la copia que ha creado. Es decir, sustituya la línea anterior por:
```
<c:import url="/Widgets_S0126i/com.ibm.commerce.store.widgets.MyAccountNavigation/MyAccountNavigation.jsp"/>
```
  La etiqueta <wcpgl:widgetImport> es un wrapper alrededor de la etiqueta <c:import>. La etiqueta <wcpgl:widgetImport> se utiliza normalmente para importar widgets cuando sus vías de acceso de archivo JSP no son conocidas, cuando solo se conoce el identificador de widget o el ID de ranura. Cuando se conoce la vía de acceso del archivo JSP, como en el caso de MyAccountNavigation, <c:import> se puede utilizar.
  
  Para obtener más información sobre la etiqueta <wcpgl:widgetImport>, consulte Etiqueta: widgetImport.
Defina la clave de propiedades MA_EXT_PROFILE_INFO que se indica en los fragmentos de código anteriores en el archivo de propiedades de texto widget.
1. Expanda crs-web > Java Resources > src/main/resources > com.ibm.commerce.stores.widget.properties.
  
  Los archivos se muestran en el Explorador de empresa:
2. Abra el archivo widgettext.properties.
3. Añada las líneas siguientes al archivo de propiedades:
```
MA_EXT_PROFILE_INFO=Additional Profile Information
```
  A continuación, guarde y cierre el archivo.
  La cadena Additional Profile Information se utilizará en el escaparate como el texto del enlace a la nueva página.
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

En esta lección, ha utilizado HCL Commerce Developer para actualizar el widget de navegación de Mi cuenta y enlazar a la nueva página.

En la siguiente lección, examinará el escaparate personalizado y se asegurará de que el enlace a la nueva página existe en Mi cuenta.