Definir los elementos de escaparate para las plantillas de diseño Commerce Composer

Debe definir los elementos de escaparate para una plantilla de diseño antes de que se pueda utilizar la plantilla personalizada en el escaparate. Los componentes del escaparate para la plantilla definen el contenedor para el widget y las ranuras configurables dentro del contenedor. Los componentes del escaparate constan de la definición del contenedor de plantilla, la colocación de las ranuras de plantilla, y el archivo de configuración del entorno.

Para obtener más información sobre la creación general de una plantilla de diseño, consulte Creación de plantillas de diseño de Commerce Composer.

Procedimiento

Cree los elementos de escaparate para la plantilla de diseño personalizada.

En la vista de Explorador de empresa, dentro de Developer de HCL Commerce, cree un directorio que contenga los elementos de código para sus plantillas de diseño personalizadas.
1. Vaya al directorio WCDE_installdir\workspace\crs-web\WebContent\Aurora.
2. Si el directorio no existe en el directorio Aurora, cree Container-vendor directory. Where vendor is the name of your company..
  Por ejemplo, el nombre del directorio puede serContainer-MyCompany
Cree el archivo JSP de contenedor para su plantilla de diseño personalizada. El archivo JSP de contenedor define la plantilla, que es un widget vacío que se divide en ranuras configurables. La definición de contenedor es similar a la definición de un widget, pero no tiene ninguna funcionalidad o contenido definido para su uso en el escaparate. El contenedor identifica las ranuras configurables donde se puede añadir un widget y marca estas ranuras con la etiqueta wcpgl:widgetImport. Cada ranura se identifica por un ID de ranura interna, que debe ser exclusivo dentro del contenedor. El archivo JSP de contenedor también identifica el archivo de configuración del entorno.
1. Vaya al directorio WCDE_installdir\workspace\crs-web\WebContent\Aurora\Container.
2. Copie el archivo StaticContentPageDisplayContainer.jsp. Este archivo es el archivo JSP de contenedor para la plantilla de diseño Cualquier página, una ranura que se proporciona de forma predeterminada con HCL Commerce.
3. Vaya a suWCDE_installdir\workspace\crs-web\WebContent\Aurora\Container-vendor directory and add the copied JSP file into this directory.
4. Renombre el nombre del archivo JSP y abra el archivo para editarlo.
  Por ejemplo, puede renombrar el archivo MyCustomLayoutTemplate.jsp.
  De forma predeterminada, el contenido del archivo JSP de contenedor se parece al código siguiente.
```
1<%@include file="../Common/EnvironmentSetup.jspf" %>
<%@taglib uri="http://commerce.ibm.com/pagelayout" prefix="wcpgl"%>
2<div class="rowContainer" id="container_${pageDesign.layoutID}">
  3<div class="row">
    4<div class="col12" data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div>
	  </div>
</div>
```
  Donde
  - 1 El archivo de configuración de entorno. Este archivo de configuración se utiliza durante la ejecución. Este archivo recupera y prepara la ruta del archivo JSP y el paquete de recursos para el contenedor. El archivo de configuración se utiliza para identificar los valores de las configuraciones de entorno para la infraestructura de Commerce Composer. El archivo identifica los valores para todas las variables de prefijo, vías de acceso de archivo de contexto común, valor de codificación de página y la página que se visualizará como página de error. A este archivo lo llaman muchos archivos JSP de la tienda y lo comparten varios widgets. De forma predeterminada, el archivo WCDE_installdir\workspace\crs-web\WebContent/Aurora/Common/EnvironmentSetup.jspf se especifica.
  - 2 Elemento de división de contenedor. Este elemento es el principio del código que define el contenedor de plantilla de diseño general. Incluya las definiciones para todas las filas y ranuras dentro de este rowContainer elemento. Para el atributo id, el valor para todas las plantillas de diseño es "container_${pageDesign.layoutID}". El valor para el ID se genera cuando se utiliza la plantilla de diseño para crear un diseño. El valor del nuevo ID de diseño se recupera como parte ${pageDesign.layoutID} del valor para este atributo id. Para el atributo class, incluya "rowContainer" como parte del valor de atributo para ayudarle a identificar la división dentro del archivo de CSS correspondiente. Por ejemplo, puede renombrar el valor de clase para que sea "MyCustomTemplate_tab_content rowContainer". El valor de este atributo debe correlacionarse con una entrada dentro de un archivo de CSS correspondiente para definir la representación de la plantilla en el escaparate.
  - 3 El elemento de división de fila. Incluya más elementos de <div class="row"> para diseñar la plantilla de diseño para que incluya varias filas de ranuras. El valor para el atributo class debe coincidir con una entrada dentro de un archivo de CSS correspondiente.
  - 4 El elemento de división de columna. Este elemento se utiliza para definir una ranura dentro de una fila. De forma predeterminada, la plantilla de diseño Cualquier página, una ranura incluye una sola ranura dentro de una fila. Para definir la ranura, debe definir los atributos class y data-slot-id.
    El atributo class identifica la entrada de CSS que define la información de visualización para la ranura de plantilla. Los valores para el atributo class en los pasos siguientes especifican CSS entradas que se han definido de forma predeterminada para las columnas de plantilla. El archivo de CSS que incluye las definiciones de CSS para plantillas de diseño se define en el archivo WCDE_installdir\workspace\crs-web\WebContent\Aurora\css\base.css. De forma predeterminada, el CSS para una plantilla de diseño utiliza un sistema de cuadrícula fluido de 12 columnas que divide una página en filas y columnas. La entrada "col12" de valor de clase define una ranura que tiene una anchura que es igual al 100 % del ancho de la página o tan ancha como las 12 columnas.
    El atributo data-slot-id define slotId para la ranura dentro de la plantilla de diseño. Este ID se muestra en para el mapa esquemático de Management Center para la ranura de plantilla para ayudar a los usuarios a identificar y seleccionar las ranuras dentro de una plantilla para incluir widgets dentro de un diseño. El valor para data-slot-id debe utilizar el formato siguiente
    data-slot-id="1"><wcpgl:widgetImport slotId="1"/>
    Donde el valor numérico especificado es el ID de la ranura que el elemento de división de columna está definiendo. Para cada ranura adicional que incluya dentro de una plantilla, se recomienda que incremente el valor de ID de ranura en orden secuencial.
    Por ejemplo, el fragmento de código siguiente define las tres primeras ranuras dentro de una plantilla. Todas las ranuras se incluyen dentro de una sola fila.
    <div class="row"> <div class="col4 acol12" data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div> <div class="col4 acol12" data-slot-id="2"><wcpgl:widgetImport slotId="2"/></div> <div class="col4 acol12" data-slot-id="3"><wcpgl:widgetImport slotId="3"/></div> </div>
    La entrada "col4 acol12" de valor de clase, se correlaciona con las entradas col4 y acol12 en el archivo base.css. La entrada col4 define una anchura de ranura para que sea igual a un tercio de la anchura total de página cuando la página se visualiza en un navegador con un rango de páginas superior a 600 píxeles. La entrada acol12 define la anchura de ranura para que sea igual al 100 % de la anchura de página cuando la página se visualiza en un rango de páginas inferior a 600 píxeles. Cuando se encuentra un menor punto de interrupción de 600 píxeles, las ranuras dentro de la plantilla de diseño se reorganizan en el escaparate verticalmente para que las ranuras puedan mostrarse a la anchura definida. Este comportamiento garantiza que la plantilla de diseño sea sensible. Para obtener más información sobre la infraestructura de CSS para el sistema de cuadrícula fluido que compone una plantilla de diseño, consulte Infraestructura de diseño web sensible (RWD).

Actualice el archivo JSP de contenedor para que el diseño divida el diseño en más filas y columnas.

Para dividir la plantilla en más filas, incluya más elementos de división de filas. El fragmento de código siguiente divide el JSP de contenedor de MyCustomLayoutTemplate.jsp en tres filas. La primera fila se divide en dos columnas y la segunda fila en cuatro columnas. La tercera fila incluye una sola columna.

<%@include file="../Common/EnvironmentSetup.jspf" %>
<%@taglib uri="http://commerce.ibm.com/pagelayout" prefix="wcpgl"%>
<div class="rowContainer" id="container_${pageDesign.layoutID}">
  <div class="row">
    <div class="col6 acol12" data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div>
    <div class="col6 acol12" data-slot-id="2"><wcpgl:widgetImport slotId="2"/></div>
  </div>
  <div class="row">
    <div class="col3 acol12" data-slot-id="3"><wcpgl:widgetImport slotId="3"/></div>
    <div class="col3 acol12" data-slot-id="4"><wcpgl:widgetImport slotId="4"/></div>
    <div class="col3 acol12" data-slot-id="5"><wcpgl:widgetImport slotId="5"/></div>
    <div class="col3 acol12" data-slot-id="6"><wcpgl:widgetImport slotId="6"/></div>
  </div>
  <div class="row">
    <div class="col12" data-slot-id="7"><wcpgl:widgetImport slotId="7"/></div>
  </div>
</div>

Actualice el JSP del contenedor para incluir las ranuras con pestañas que desee dentro de la plantilla de diseño.

Para incluir ranuras con pestañas dentro de la plantilla, debe incluir el archivo JavaScript ProductTab.js dentro del archivo JSP de contenedor.
Este archivo define las interacciones que un comprador puede realizar para cambiar entre pestañas y define cómo responden las ranuras con pestañas. Para incluir este archivo, añada el código siguiente después de las sentencias include para el archivo de configuración de entorno y la biblioteca de códigos
```
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/ProductTab/ProductTab.js"></script>
```

Actualice la definición de la fila en la que desea incluir ranuras con pestañas para incluir la lógica para identificar el número de ranuras con pestañas y para recuperar los valores de ID de ranura para las ranuras.

Dentro de la definición de fila, sustituya los elementos de división para las columnas que desee que sean de pestañas con el código siguiente. El código siguiente define el número de ranuras con pestañas y la lógica que se utiliza para recuperar los valores de ID para las ranuras con pestañas.

<wcf:useBean var="tabSlotIds" classname="java.util.ArrayList"/>
<%-- Double loop to get the slots into the array list in proper order. The service does not return the child widgets in any predictable order. --%>
<c:set var="tabSlotCount" value="0"/>
1 <c:forEach var="slotNumber" begin="3" end="6">
  <c:set var="foundCurrentSlot" value="false"/>
  <c:forEach var="childWidget" items="${pageDesign.widget.childWidget}">
    <c:if test="${childWidget.slot.internalSlotId == slotNumber && !foundCurrentSlot}">
      <wcf:set target="${tabSlotIds}" value="${slotNumber}" />
      <c:set var="foundCurrentSlot" value="true"/>
      <c:set var="tabSlotCount" value="${tabSlotCount+1}"/>
    </c:if>
  </c:forEach>
</c:forEach>

Donde

1 Define el principio y el final de las ranuras con pestañas para establecer el número de ranuras con pestañas. El fragmento de código anterior define la fila de ranuras con pestañas para incluir las ranuras con los valores de ID de ranura 3, 4, 5 y 6.

Añada el código para definir los títulos para las ranuras con pestañas. Añada el código siguiente después del código para definir el número de ranuras con pestañas.

<div class="tabButtonContainer" role="tablist">
  <div class="tab_header tab_header_double">
    <c:forEach var="tabSlotId" items="${tabSlotIds}" varStatus="status">
      1<c:set var="tabSlotName" value="Title${tabSlotId}"/>
      2<c:forEach var="childWidget" items="${pageDesign.widget.childWidget}">
        <c:if test="${childWidget.slot.internalSlotId == tabSlotName}">
          <c:set var="tabWidgetDefIdentifier" value="${childWidget.widgetDefinitionIdentifier.uniqueID}"/>
          <c:set var="tabWidgetIdentifier" value="${childWidget.widgetIdentifier.uniqueID}"/>
        </c:if>
      </c:forEach>
      3<c:choose>
        <c:when test="${status.first}">
          <c:set var="tabClass" value="tab_container active_tab" />
          <c:set var="tabIndex" value="0" />
        </c:when>
        <c:otherwise>
          <c:set var="tabClass" value="tab_container inactive_tab" />
          <c:set var="tabIndex" value="-1" />
        </c:otherwise>
      </c:choose>
      <c:set var="tabNumber" value="${status.index+1}" scope="request"/>
      4<div id="tab${status.count}" tabindex="${tabIndex}" class="tab_container ${tabClass}" 
        aria-labelledby="contentRecommendationWidget_${tabSlotName}_${tabWidgetDefIdentifier}_${tabWidgetIdentifier}" aria-controls="tab${status.count}Widget"
        onfocus="ProductTabJS.focusTab('tab${status.count}');" onblur="ProductTabJS.blurTab('tab${status.count}');" 
        role="tab" aria-setsize="${tabSlotCount}" aria-posinset="${status.count}" aria-selected="${status.first == true ? 'true' : 'false'}" 
        onclick="ProductTabJS.selectTab('tab${status.count}');" 
        onkeydown="ProductTabJS.selectTabWithKeyboard('${status.count}','${tabSlotCount}', event);">
        5<wcpgl:widgetImport slotId="${tabSlotName}"/>
      </div>
      <c:remove var="tabNumber"/>
    </c:forEach>
  </div>
</div>

Donde

1 Establece el título para la ranura de la pestaña como tabSlotName
2 El código también define la lógica para devolver los widgets dentro de una ranura con pestañas en el orden correcto.
3 Establece qué pestaña mostrar cuando un comprador visualiza inicialmente una página que utiliza esta plantilla de diseño
4 Llama a las funciones de JavaScript definidas en el archivo ProductTab.js. Estas funciones definen cómo cambia el diseño de página entre pestañas.
5 El código para importar el editor de texto widget utilizar como el valor para tabSlotName que se muestra en el escaparate como el título de la ranura con pestañas.

Añada el código para definir la recuperación de contenido para visualizarlo en las ranuras con pestañas. Añada el código siguiente después del código para definir los títulos de ranura con pestañas.

<c:forEach var="tabSlotId" items="${tabSlotIds}" varStatus="status">
  <c:set var="tabStyle" value=""/>
  <c:if test="${!status.first}">
    <c:set var="tabStyle" value="style='display:none'" />
  </c:if>
  <div role="tabpanel" class="tab left" data-slot-id="${tabSlotId}" id="tab${status.count}Widget" aria-labelledby="tab${status.count}" ${tabStyle}>
    <div class="content">
      <wcpgl:widgetImport slotId="${tabSlotId}"/>
    </div>
  </div>
  <c:remove var="tabStyle"/>
</c:forEach>

Guarde el archivo JSP de contenedor.

El archivo JSP actualizado puede parecerse al código siguiente, que define la plantilla de diseño Cualquier página, siete ranuras y separadores.

<%@include file="../Common/EnvironmentSetup.jspf" %>
<%@taglib uri="http://commerce.ibm.com/pagelayout" prefix="wcpgl"%>
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/ProductTab/ProductTab.js"></script>
<div class="rowContainer" id="container_${pageDesign.layoutID}">
  <div class="row">
    <div class="col6 acol12" data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div>
    <div class="col6 acol12" data-slot-id="2"><wcpgl:widgetImport slotId="2"/></div>
  </div>

  <div class="row margin-true">
	<div class="col12 acol12 ccol12 right">
    <wcf:useBean var="tabSlotIds" classname="java.util.ArrayList"/>
    <%-- Double loop to get the slots into the array list in proper order. The service does not return the child widgets in any predictable order. --%>
    <c:set var="tabSlotCount" value="0"/>
    <c:forEach var="slotNumber" begin="3" end="6">
      <c:set var="foundCurrentSlot" value="false"/>
      <c:forEach var="childWidget" items="${pageDesign.widget.childWidget}">
        <c:if test="${childWidget.slot.internalSlotId == slotNumber && !foundCurrentSlot}">
          <wcf:set target="${tabSlotIds}" value="${slotNumber}" />
          <c:set var="foundCurrentSlot" value="true"/>
          <c:set var="tabSlotCount" value="${tabSlotCount+1}"/>
        </c:if>
      </c:forEach>
    </c:forEach>  
    
    <div class="tabButtonContainer" role="tablist">
      <div class="tab_header tab_header_double">
        <c:forEach var="tabSlotId" items="${tabSlotIds}" varStatus="status">
          <c:set var="tabSlotName" value="Title${tabSlotId}"/>
          <c:forEach var="childWidget" items="${pageDesign.widget.childWidget}">
            <c:if test="${childWidget.slot.internalSlotId == tabSlotName}">
              <c:set var="tabWidgetDefIdentifier" value="${childWidget.widgetDefinitionIdentifier.uniqueID}"/>
              <c:set var="tabWidgetIdentifier" value="${childWidget.widgetIdentifier.uniqueID}"/>
            </c:if>
          </c:forEach>
          <c:choose>
            <c:when test="${status.first}">
              <c:set var="tabClass" value="tab_container active_tab" />
              <c:set var="tabIndex" value="0" />
            </c:when>
            <c:otherwise>
              <c:set var="tabClass" value="tab_container inactive_tab" />
              <c:set var="tabIndex" value="-1" />
            </c:otherwise>
          </c:choose>
          <c:set var="tabNumber" value="${status.index+1}" scope="request"/>
          <div id="tab${status.count}" tabindex="${tabIndex}" class="tab_container ${tabClass}" 
            aria-labelledby="contentRecommendationWidget_${tabSlotName}_${tabWidgetDefIdentifier}_${tabWidgetIdentifier}" aria-controls="tab${status.count}Widget"
            onfocus="ProductTabJS.focusTab('tab${status.count}');" onblur="ProductTabJS.blurTab('tab${status.count}');" 
            role="tab" aria-setsize="${tabSlotCount}" aria-posinset="${status.count}" aria-selected="${status.first == true ? 'true' : 'false'}" 
            onclick="ProductTabJS.selectTab('tab${status.count}');" 
            onkeydown="ProductTabJS.selectTabWithKeyboard('${status.count}','${tabSlotCount}', event);">
            <wcpgl:widgetImport slotId="${tabSlotName}"/>
          </div>
          <c:remove var="tabNumber"/>
        </c:forEach>
      </div>
    </div>	
    
    <c:forEach var="tabSlotId" items="${tabSlotIds}" varStatus="status">
      <c:set var="tabStyle" value=""/>
      <c:if test="${!status.first}">
        <c:set var="tabStyle" value="style='display:none'" />
      </c:if>
      <div role="tabpanel" class="tab left" data-slot-id="${tabSlotId}" id="tab${status.count}Widget" aria-labelledby="tab${status.count}" ${tabStyle}>
        <div class="content">
          <wcpgl:widgetImport slotId="${tabSlotId}"/>
        </div>
      </div>
      <c:remove var="tabStyle"/>
    </c:forEach>
	</div>
  </div>
  
  <div class="row">
    <div class="col12" data-slot-id="7"><wcpgl:widgetImport slotId="7"/></div>
  </div>
</div>

Opcional: Defina el CSS para representar la plantilla de diseño personalizada en el escaparate.
1. Vaya al directorio WCDE_installdir\workspace\crs-web\WebContent\Aurora\css.
2. Abra el archivo base.css para su revisión. Este archivo define el CSS para todas las plantillas de diseño proporcionadas por HCL Commerce.
3. Busque el comentario /*** Grid system ***/ dentro del archivo. El CSS de la sección define la visualización para el sistema de cuadrícula fluido de plantilla de diseño. De forma predeterminada, este archivo CSS define varias opciones de visualización. Si base.css no incluye la definición que necesita, cree un archivo base-vendor.css para incluir la definición de CSS personalizada. Cree este archivo en el directorio css existente. Asegúrese de que los valores de los atributos son class exclusivos y correlacionan con el nuevo archivo de CSS.
Para obtener más información sobre cómo definir el CSS para una plantilla de diseño, consulte Creación de plantillas de diseño sensibles.

Qué hacer a continuación

Con la definición de los elementos de escaparate para la plantilla de diseño personalizada completada, debe registrar la plantilla de diseño utilizando el programa de utilidad de carga de datos.