Guía de aprendizaje: Personalizar el escaparate

En esta guía de aprendizaje, aprenderá a personalizar el escaparate para una tienda personalizada al acortar el URL de tienda y al añadir una vista al escaparate mediante la actualización de la raíz de contexto y añadirá una vista para mostrar el página de inicio.

Before you begin

Asegúrese de que tiene una tienda con elementos de escaparate personalizada y una tienda de sitios ampliados personalizados publicada dentro del entorno de desarrollo y el entorno de ejecución. Esta guía de aprendizaje utiliza una tienda con elementos de escaparate personalizada que se denomina MytoyStorefrontAssetStore y una tienda de sitio ampliado que se denomina MytoyESite como ejemplos.

About this task

El servidor de tienda es independiente del servidor de transacciones y. Funciona como una aplicación remota al enviar llamadas salientes para interactuar con los servidores de transacciones y de búsqueda. El desarrollo del escaparate para este entorno es diferente del de versiones anteriores de HCL Commerce.

Esta guía de aprendizaje le guiará en el flujo final de la personalización del escaparate en el entorno de desarrollo. A continuación, despliegue el paquete recién creado en el entorno de ejecución para su verificación.

Este procedimiento tiene dos partes:
  • Acorte el URL de SEO al actualizar la raíz de contexto de /wcs/shop a /myshop. El nuevo URL será: https://hostname:port/myshop/en/storename
  • Añada una vista nueva para visualizar la página de inicio.
    • Personalice una clase Java para mostrar un saludo según la hora, que será utilizado por un archivo JSP.
    • Personalice un archivo JSP a nivel de tienda, al añadir un saludo encima del logotipo.
    • Añada un nuevo bean de vista en el archivo de configuración de Spring para establecer el JSP personalizado como la página de Inicio del sitio.
Realice estos pasos en el entorno de desarrollo.

Procedure

  1. Acorte el URL de SEO.
    1. Abra el archivo de configuración WCDE_installdir\workspace\crs\META-INT\application.xml para su edición. Cambie el elemento siguiente: 
      <context-root>/</context-root>
    2. Abra el archivo de configuración WCDE_installdir\workspace\crs\xml\config\wc-store.xml para su edición. Actualice el elemento siguiente: 
      <WebModule> ... <Module contextPath="/" name="Stores" urlMappingPath="/myshop" webAlias="/wcsstore"> ... </WebModule>
    3. Abra el archivo de configuración WCDE_installdir\workspace\crs-web\WebContent\WEB-INF\web.xml para su edición. Actualice el elemento siguiente: 
      <servlet-mapping> <servlet-name>Stores</servlet-name> <url-pattern>/myshop/*</url-pattern> </servlet-mapping>
  2. Cree el archivo Java.
    1. Cree un paquete Java bajo el proyecto src-extensions-logic. En el recuadro de diálogo, escriba src en el campo Carpeta de origen y com.mycompany en el campo Nombre.
    2. Añada una clase Java bajo el paquete. En este ejemplo, establezca la carpeta de Origen como crs-extensions-logic/src y el Paquete como com.mycompany. El Nombre de este ejemplo es Welcome.
    3. Edite el código Java para la nueva clase: 
      package com.mycompany; import java.util.Calendar; public class Welcome { public String outputWelcome(){ String output = ""; Calendar rightNow = Calendar.getInstance(); int hour = rightNow.get(Calendar.HOUR_OF_DAY); if(5<hour && hour<=12){ output = "Good morning!"; }else if(12<hour && hour<17){ output = "Good afternoon!"; }else{ output = "Good evening!"; } return output; } }
  3. Cree una página JavaServer.
    1. Cambie los directorios al proyecto crs-web. Copie el archivo /WebContent/MytoyStorefrontAssetStore/ShoppingArea/CatalogSection/CategorySubsection/TopCategoriesDisplay.jsp a TopCategoriesDisplay1.jsp.
    2. Abra el TopCategoriesDisplay1.jsp para editarlo. Añada el código siguiente debajo del comentario <!-- BEGIN TopCategoriesDisplay.jsp -->. 
      <%@ page import="com.mycompany.Welcome" %> <% Welcome welcomeClass=new Welcome(); String output=welcomeClass.outputWelcome(); request.setAttribute("welcome", output); %>
      Añada el código siguiente debajo de la etiqueta <div id="grayOut"></div>.
      <div><c:out value = "${welcome}"/></div>
  4. Actualice la vista.
    1. Abra el archivo de configuración /WebContent/WEB-INF/spring/MytoyStorefrontAssetStore/views-ext.xml para su edición. Añada el siguiente código después de la sección beans del archivo. 
      <bean id="TopCategoriesDisplay/MytoyStorefrontAssetStore" class="com.ibm.commerce.store.mvc.view.spring.StoreInternalResourceView"> <property name="url" value="/ShoppingArea/CatalogSection/CategorySubsection/TopCategoriesDisplay1.jsp"/> <property name="https" value="1"/> <property name="credentialsAccepted" value="P"/> <property name="generic" value="1"/> </bean>
      Para obtener más información, consulte Personalización de la configuración MVC Spring de la tienda.
  5. Ejecute el programa de utilidad de HCL Commerce build (WCB) en modalidad de código local para desplegar el paquete.

    El código de ejemplo está disponible en el archivo comprimido quick-start-for-toolkit.zip. Extraiga este archivo en la carpeta WCDE_installdir\wcbd\ para referenciarlo.

    1. Cree un repositorio personalizado local y copie o descargue los recursos personalizados en una carpeta local.
      Por ejemplo, cree y utilice un directorio local denominado repo.
      Note: Para crs-web, crs-preview-web y crs-alias-proxy-web, incluye todos los recursos.
       repo/ |----workspace/ |----crs/ | |----META-INF/ | |----properties/ | |----xml/ | |----config/ | |----crs-extensions-logic | |----src/ | |----com/ | |----mycompany/ | |----crs-web/ |----src/ |----WebContent/ |----ExtendedSitesCatalogAssetStore/ |----images/ |----JQuery/ |----META-INF/ |----MytoyStorefrontAssetStore/ |----qrcode/ |----tools/ |----WEB-INF/ |----Widgets_801/
    2. Copie el archivo WCDE_installdir\wcbd\wcbd-setenv.bat.template a setenv.bat.
    3. Abra setenv.bat para su edición y establezca las variables de entorno ANT_HOME, WAS_HOME y WC_HOME. Por ejemplo: 
      set ANT_HOME=W:\WCDE_V9\wcbd\apache-ant-1.10.1 set WAS_HOME=W:\IBM\WebSphere\AppServer set WC_HOME=W:\WCDE_V9
    4. Copie el archivo WCDE_installdir\wcbd\extract\wcbd-sample-extract-local.xml a WCDE_installdir\wcbd\extract-local.xml.
    5. Abra el extract-local.xml para su edición. Cambie <project name="wcbd-sample-extract-local" default="all"> por <project name="extract-local" default="all">.
    6. Copie el archivo de propiedades WCDE_installdir\wcbd\extract\wcbd-sample-extract-local.properties en WCDE_installdir\wcbd\extract-local-crs.properties.
    7. Abra extract-local-crs.properties para su edición y establezca la variable local.extract.dir en el directorio de extracción local que ha creado o designado. En este ejemplo, utilice local.extract.dir=D:/repo.
    8. Opcional: Copie el archivo de plantilla WCDE_installdir\wcbd\wcbd-build.private.properties.template a build-local-crs.private.properties y establezca las variables mail.user y mail.password.
    9. Copie el archivo de plantilla WCDE_installdir\wcbd\wcbd-build.properties.template a build-local-crs.properties.
    10. Establezca las propiedades y los valores en build-local-crs.properties. 
      java.module.list=crs-extensions-logic web.module.list=crs-web wc.home=W:/WCDE_V9 was.home=W:/IBM/WebSphere/AppServer
    11. Ejecute el mandato wcb cmd: wcbd-ant -buildfile wcbd-build.xml -Dbuild.type=local -Dapp.type=crs -Dbuild.label=sampleCus
    12. Vaya al directorio WCDE_installdir\wcbd\dist\server\ para comprobar el resultado de la compilación.

    Para obtener más información acerca de WCB, consulte Empaquetado del código personalizado para el despliegue.

    Para obtener más información sobre la infraestructura de salida de WCB de tienda, consulte Estructura de repositorio para la creación de paquetes de tiendas remotas (crs).

  6. Cree una nueva imagen con el paquete personalizado.
    1. Extraiga wcbd-deploy-server-local-crs-sampleCus.zip en el directorio CusDeploy.
    2. Despliegue el código en el entorno de ejecución.
    3. Cree un Dockerfile en /opt/bvt/store/. El contenido del archivo es el siguiente: 
      FROM crs-app:latest # Using yum in RHEL/CentOS for package installation # RUN yum install -y nc && yum clean all COPY CusDeploy /SETUP/Cus RUN /SETUP/bin/applyCustomization.sh
    4. Cambie los directorios a /opt/bvt/store. Cree una imagen de Docker que utilice el mandato docker build -f Dockerfile -t crs-app:cus.
  7. Ejecute un nuevo contenedor basado en la nueva imagen.
    1. Cambie el valor de la tienda de docker-compose.yml a store: image: crs-app:cus.
    2. Ejecute el mandato docker para iniciar el nuevo contenedor: docker-compose up -d .
  8. Verifique los cambios en el escaparate para asegurarse de que las dos personalizaciones entran en vigor después de desplegar la imagen de Docker personalizada.
    El escaparate antes de que las personalizaciones muestren el banner de la tienda de inicio Aurora predeterminado.
    Después de los cambios, el texto del banner dependiente del tiempo que ha añadido a la clase Java Welcome aparece ahora encima del banner de Aurora.