Cambiar el aspecto de una tienda de inicio

El aspecto de escaparate es un factor importante para mejorar la experiencia de cliente. En esta guía de aprendizaje, se modifican las hojas de estilo en cascada (CSS) para cambiar el color y el diseño del escaparate. Entonces el nuevo estilo queda disponible como una opción de visualización para una tienda de inicio. El nuevo estilo se selecciona en el asistente Cambiar estilo en HCL Commerce Accelerator o en la herramienta de Gestión de tiendas en el Management Center.

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

Al personalizar una tienda, puede mantener el estilo y color predeterminados o sustituirlos por los elementos personalizados. Los elementos de estilo y color predeterminados y personalizados se mantienen creando un conjunto de archivos CSS y una carpeta de estilo, en lugar de modificar los archivos originales. El archivo de configuración de estilo se ha modificado de modo que el estilo de escaparate personalizado pueda seleccionarse en la herramienta de Gestión de tiendas del Management Center.

Nota: Los pasos de esta guía de aprendizaje son específicos para la tienda de inicio Aurora y es posible que deban modificarse para el escaparate.

Después de completar esta guía de aprendizaje, podrá:

Cambiar el diseño de color del escaparate.
Añadir un estilo al escaparate.
Cambiar la disposición del diseño y el tamaño de letra de la página.

Procedimiento

Registre un nuevo color en HCL Commerce para que esté disponible en el escaparate:
1. Actualice las opciones de color para la tienda de inicio realizando lo siguiente:
  1. En la vista Explorador de empresa, vaya a LOBTools > WebContent > WEB-INF > src > xml > commerce > store > propertiesViews > storedir
  2. Abra el StoreFlexFlowPropertiesView.xml para editarlo.
  3. Localice el siguiente fragmento de código y sustituya el ID de tienda por el del escaparate:
```
<MultiValueSelector name="ColorPanelOptions" promptText="${FlexFlow_{storeID}.Styles.color.radio.label}" useRadioButtons="true">
```
  4. Añada el siguiente objeto secundario MultiValueSelection:
```
<MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/colors/color1_3.png" name="color3">
<Xml name="values">
<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color3/</url>
<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common1_3$locale$.css</url>
<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
 </Xml>
</MultiValueSelection>
```
  5. Guarde los cambios y cierre el archivo.
2. Copie la nueva imagen de fondo de color en el directorio de estilo de tienda de inicio:
  1. En la vista Explorador de empresa, vaya a LOBTools > WebContent > imágenes > tiendas > storedir > estile > colores
  2. Vaya a la ubicación temporal donde está almacenada la nueva imagen de color y copie style\color1_3.png en el directorio.
3. La tienda de inicio Aurora da soporte a la combinación prefeterminada de estilo1, color 1, donde el nombre del archivo CSS es common1_1.css. Para dar soporte a la combinación style1, color3, cree un archivo CSS llamado common1_3.css, basado en el archivo CSS predeterminado:
  1. En la vista Explorador de empresa, vaya a Stores > WebContent > storedir > css.
  2. Haga doble pulsación en el botón derercho common1_1.css y pulse Copiar.
  3. Haga doble pulsación en el botón derercho css y pulse Pegar.
  4. Cambie el nombre de la copia common1_3.css.
4. La tienda de inicio Aurora contiene el directorio color1 de forma predeterminada para las imágenes de fondo. Para soportar las nuevas imágenes de fondo, cree un directorio denominado color3, basándose en el directorio predeterminado:
  1. En la vista Explorador de empresa, expanda Tiendas > WebContent > storedir > imágenes > colores.
  2. Haga doble pulsación en el botón derercho color1 y pulse Copiar.
  3. Haga doble pulsación en el botón derercho colors y pulse Pegar.
  4. Cambie el nombre de la copia color3.
Cambie el color de la página de escaparate modificando los atributos de color en un archivo CSS:
1. Marque los artículos que desea cambiar en la página y, a continuación, busque las definiciones de atributo en el archivo CSS. Utilice la herramienta de depuración para determinar la definición div de la página. Una herramienta de depuración recomendada es Mozilla Firefox con el complemento Firebug.
2. En la vista Explorador de empresa, vaya a Stores > WebContent > storedir > css.
  1. Abra el archivo common1_3.css. Busque las secciones que dese modificar y sustituya los valores por valores nuevos.
  2. Guarde los cambios efectuados en el archivo.
  3. En algunas áreas, el color se define mediante imágenes de fondo en el archivo CSS. Para buscar las imágenes de fondo, utilice Firebug para ver las definiciones div, y busque el atributo de fondo en el archivo CSS.
  4. En la vista Explorador de empresa, expanda Stores > WebContent > storedir > imágenes > colores > color3.
  5. Vaya a la ubicación temporal donde están almacenados los archivos de imagen de fondo. Copie todos los archivos en la carpeta color3.
  6. En el archivo common1_3.css, cambie todos los archivos de imágenes de fondo para que apunten a la carpeta color3 sustituyendo todas las apariciones de colors/color1 por colors/color3.
  7. Guarde los cambios y cierre el archivo.
Registre un nuevo estilo en HCL Commerce para que esté disponible en el escaparate:
1. En la vista Explorador de empresa, vaya a LOBTools > WebContent > WEB-INF > src > xml > commerce > store > propertiesViews > storedir
  1. Abra StoreFlexFlowPropertiesView.xml para editarlo y añadir las nuevas opciones de estilo y color.
  2. Ubique el objeto StylePanelOptions:
```
<MultiValueSelector name="StylePanelOptions" promptText="${FlexFlow_{storeID}.Styles.style.radio.label}" useRadioButtons="true">
```
  3. Añada el nuevo elemento MultiValueSelection al final del objeto StylePanelOptions:
```
<MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/styles/style2.png">
	<Xml name="values">
 		<url objectPath="StoreFileRef[name=StyleDir]">include/styles/style2/</url>
		<url significant="false" objectPath="StoreFileRef[name=vfile.color]">images/colors/color1/</url>
		<url significant="false" objectPath="StoreFileRef[name=vfile.stylesheet]">css/common2_1$locale$.css</url>
		<url significant="false" objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
	</Xml>
</MultiValueSelection>
```
  4. Ubique el objeto PropertyPane:
```
<PropertyPane definitionName="cmc/store/Styles_{storeID}">
		<dependency localName="FlexFlow_10101" moduleName="cmc/store/FlexFlow_{storeID}"/>
		<PropertyGroup collapsable="false" name="group">
```
  5. Añada el siguiente elementoMultiValueSelector al final del elemento PropertyGroup:
```
<MultiValueSelector name="ColorPanelOptions2" promptText="${stoFlexFlow_{storeID}.Styles.color.radio.label}" useRadioButtons="true">
	<EnablementCondition objectPath="StoreFileRef[name=StyleDir]" propertyName="url" enablementValue="include/styles/style2/" />
	<MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/colors/color1_1.png" name="color1">
		<Xml name="values">
			<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color1/</url>
			<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common2_1$locale$.css</url>
			<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
		</Xml>
	</MultiValueSelection>
 <MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/colors/color1_2.png" name="color2">
	 <Xml name="values">
		<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color2/</url>
		<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common2_2$locale$.css</url>
		<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_2$locale$.css</url>
	 </Xml>
 </MultiValueSelection>
 <MultiValueSelection imageSrc="/lobtools/images/stores/{StoreDir}/style/colors/color1_3.png" name="color3">
  <Xml name="values">
  	<url objectPath="StoreFileRef[name=vfile.color]">images/colors/color3/</url>
		<url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common2_3$locale$.css</url>
		<url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
	 </Xml>
 </MultiValueSelection>
</MultiValueSelector>
```
  6. Guarde los cambios y cierre el archivo.
2. En la vista Explorador de empresa, vaya a LOBTools > WebContent > imágenes > tiendas > storedir > estilo > estilos.
3. Vaya a la ubicación temporal donde está almacenada la imagen style2.png de color y cópiela en el directorio.
4. La tienda de inicio Aurora da soporte a la combinación prefeterminada de estilo1, color 1, donde el nombre del archivo CSS es common1_1.css. Para soportar las combinaciones estilo2, color1, estilo2, color2 y estilo2, color3, cree tres nuevos archivos CSS denominados common2_1.css, common2_2.css y common2_3.css basándose en el archivo CSS predeterminado:
  1. En la vista Explorador de empresa, vaya a Tiendas > WebContent > storedir > css.
  2. Haga doble pulsación en el botón derercho common1_1.css y pulse Copiar.
  3. Pegue este archivo tres veces en el mismo directorio CSS y cambie los nombres de los archivos common2_1.css, common2_2.css y common2_3.css.
5. Copie el directorio style1 en style 2.
  1. En la vista Explorador de empresa, vaya a Tiendas > WebContent > storedir > incluir > estilos > estilo1.
  2. Haga doble pulsación en el botón derercho style1 y pulse Copiar.
  3. Haga doble pulsación en el botón derercho styles y pulse Pegar.
  4. Cambie el nombre de la copia por estilo2.
6. Los archivos relacionados con el estilo se almacenan en el directorio Stores\WebContent\storedir\include\styles de forma predeterminada. Ofrezca soporte para varios estilos, copiando CachedTopCategoriesDisplay.jsp en el directorio.
  1. En la vista Explorador de empresa, vaya a Stores > WebContent > storedir > Fragmentos de código > Catálogo > CategoryDisplay .
  2. Haga doble pulsación en el botón derercho CachedTopCategoriesDisplay.jsp y pulse Copiar.
  3. Vaya a Tiendas> WebContent > storedir > incluir > estilos.
  4. Pegue el archivo en style1 y style2 .
7. Edite el archivo TopCategoriesDisplay.jsp.
  1. En la vista Explorador de empresa, vaya a Tiendas > WebContent > storedir > ShoppingArea > CatalogSection > CategorySubsection.
  2. Abra el archivo TopCategoriesDisplay.jsp en un editor de texto.
  3. Localice la línea siguiente:
```
<c:import url="${jspStoreDir}Snippets/Catalog/CategoryDisplay/CachedTopCategoriesDisplay.jsp">
```
  4. Sustitúyala por la línea siguiente:
```
<c:import url="${jspStoreDir}${StyleDir}CachedTopCategoriesDisplay.jsp">
```
  5. Guarde los cambios y cierre el archivo.
Modifique el diseño de página de escaparate creando un archivo CSS basándose en el actual para soportar el nuevo diseño de disposición. A continuación, modifique los atributos relacionados con la posición de los artículos que desea mover:
1. Marque los artículo que desea cambiar en el escaparate. Utilice una herramienta de depuración como Mozilla Firefox con el complemento Firebug para determinar la definición div de cada artículo de la página.
2. En la vista Explorador de empresa, expanda Tiendas > WebContent > storedir > css.
  1. Abra los archivos common2_1.css, common2_2.css y common2_3.css y busque las definiciones div que ha marcado en el paso anterior.
  2. Sustituya los atributos de cada div que desea cambiar en todos los archivos CSS. Por ejemplo, localice #header-search y sustituya right en la definición de clase por un valor de left.
  3. Guarde los cambios y cierre los archivos.
Cambie el tamaño de letra de la página de escaparate modificando los atributos de tamaño de letra en el archivo CSS:
1. En la vista Explorador de empresa, vaya a Stores > WebContent > storedir > css.
2. Abra los archivos common2_1.css, common2_2.css y common2_3.css.
3. Busque a, fieldset y lleve a cabo los cambios siguientes:
  1. En cada archivo, localice font-size en la definición de clase.
  2. Sustituya el valor 10 por el valor 12.
4. Guarde los cambios y cierre los archivos.
Pruebe las personalizaciones en la vista previa de tienda en el Management Center.