Modification de l'apparence d'un magasin type

L'apparence de la vitrine joue une part importante dans le pouvoir de séduction de votre magasin. Dans ce tutoriel, les feuilles de style en cascade (CSS) seront modifiées afin de changer la couleur et l'agencement des éléments de la vitrine. Le nouveau style sera ensuite rendu disponible sous forme d'option d'affichage dans le magasin type. Le nouveau style est sélectionné dans l'Assistant de modification du style dans HCL Commerce Accelerator ou dans l'outil Gestion de magasin Management Center.

Pourquoi et quand exécuter cette tâche

Lors de la personnalisation d'un magasin, vous pouvez soit conserver le style et la couleur par défaut, soit les remplacer par des ressources personnalisées. Vous prouvez conserver à la fois les ressources de style et de couleur par défaut et les ressources de style et de couleur personnalisées en créant un jeu de fichiers CSS et un dossier de style, au lieu de modifier les fichiers d'origine. Le fichier de configuration de style sera ensuite modifié afin que le nouveau style personnalisé puisse être sélectionné dans l'outil Gestion de magasin Management Center.

Remarque : Les étapes de ce tutoriel sont spécifiques au magasin type Aurora et peuvent devoir être ajustées pour votre vitrine.

A l'issue de ce tutoriel, vous devez pouvoir exécuter les tâches suivantes :

Modifier les couleurs de votre vitrine.
Ajouter un style à votre vitrine.
Modifier la présentation et la taille de police de votre page.

Procédure

Enregistrer une nouvelle couleur dans HCL Commerce afin qu'elle soit disponible dans votre vitrine :
1. Mettre à jour les options de couleur pour le magasin type en procédant comme suit :
  1. Dans la vue Explorateur d'entreprise, développez LOBTools > WebContent > WEB-INF > src > xml > commerce > store > propertiesViews > storedir
  2. Ouvrez le fichier StoreFlexFlowPropertiesView.xml en édition.
  3. Localisez l'extrait de code suivant et remplacez l'ID du magasin par celui de votre vitrine :
```
<MultiValueSelector name="ColorPanelOptions" promptText="${FlexFlow_{storeID}.Styles.color.radio.label}" useRadioButtons="true">
```
  4. Ajoutez l'objet enfant MultiValueSelection suivant :
```
<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. Enregistrez vos modifications et fermez le fichier.
2. Copiez la nouvelle image d'arrière-plan en couleur dans le répertoire de style du magasin type :
  1. Dans la vue Explorateur d'entreprise, accédez à LOBTools > WebContent > images > stores > storedir > style > colors
  2. Naviguez jusqu'à l'emplacement temporaire où vous avez extrait votre nouvelle image de couleur et copiez style\color1_3.png dans le répertoire.
3. Par défaut, le magasin type Aurora prend en charge la combinaison style1/color1, le nom du fichier CSS étant common1_1.css. Pour permettre l'utilisation de la combinaison style1/color3, créez un nouveau fichier CSS appelé common1_3.css et basé sur votre fichier CSS par défaut :
  1. Dans la vue Explorateur d'entreprise, accédez à Stores > WebContent > storedir > css.
  2. Cliquez avec le bouton droit de la souris sur common1_1.css, puis cliquez sur Copier.
  3. Faites un clic droit sur css et sélectionnez Coller.
  4. Renommez la copie common1_3.css.
4. Par défaut, le magasin type Aurora utilise le répertoire color1 pour ses images d'arrière-plan. Pour permettre l'utilisation des nouvelles images d'arrière-plan, créez un répertoire appelé color3 et basé sur le répertoire par défaut:
  1. Dans la vue Explorateur d'entreprise, développez Stores > WebContent > storedir > images > colors.
  2. Cliquez avec le bouton droit de la souris sur color1, puis cliquez sur Copier.
  3. Faites un clic droit sur colors et sélectionnez Coller.
  4. Renommez la copie color3.
Modifier la couleur de la page de vitrine en modifiant les attributs de couleur d'un fichier CSS :
1. Repérez les éléments de la page que vous souhaitez changer, puis localisez les définitions d'attribut correspondantes dans le fichier CSS. Utilisez un outil de débogage pour identifier les définitions div de la page. L'outil de débogage recommandé est Mozilla Firefox avec le module complémentaire Firebug.
2. Dans la vue Explorateur d'entreprise, accédez à Stores > WebContent > storedir > css.
  1. Ouvrez le fichier common1_3.css. Recherchez les sections que vous souhaitez modifier et remplacez les valeurs par de nouvelles valeurs.
  2. Enregistrez le fichier avec vos modifications.
  3. Dans certaines parties, la couleur est définie par une image d'arrière-plan spécifiée dans le fichier CSS. Pour cela, utilisez Firebug afin de voir les définitions div, puis recherchez l'attribut background dans le fichier CSS.
  4. Dans la vue Explorateur d'entreprise, développez Stores > WebContent > storedir > images > colors > color3.
  5. Accédez à l'emplacement temporaire où vos fichiers d'image d'arrière-plan sont stockés. Copiez tous les fichiers dans le dossier color3.
  6. Dans le fichier common1_3.css, modifiez tous les fichiers d'image d'arrière-plan pour qu'ils pointent vers le dossier color3 en remplaçant toutes les occurrences de colors/color1 par colors/color3.
  7. Enregistrez vos modifications et fermez le fichier.
Enregistrer un nouveau style dans HCL Commerce afin qu'il soit disponible dans votre vitrine :
1. Dans la vue Explorateur d'entreprise, développez LOBTools > WebContent > WEB-INF > src > xml > commerce > store > propertiesViews > storedir
  1. Ouvrez le fichier StoreFlexFlowPropertiesView.xmlpour lui ajouter les nouvelles options de couleur et de style.
  2. Localisez l'objet StylePanelOptions :
```
<MultiValueSelector name="StylePanelOptions" promptText="${FlexFlow_{storeID}.Styles.style.radio.label}" useRadioButtons="true">
```
  3. Ajoutez le nouvel élément MultiValueSelection à la fin de l'objet 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. Localisez l'objet PropertyPane :
```
<PropertyPane definitionName="cmc/store/Styles_{storeID}">
		<dependency localName="FlexFlow_10101" moduleName="cmc/store/FlexFlow_{storeID}"/>
		<PropertyGroup collapsable="false" name="group">
```
  5. Ajoutez l'élément MultiValueSelector suivant à la fin de l'élément 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. Enregistrez vos modifications et fermez le fichier.
2. Dans l'affichage Explorateur, accédez à LOBTools > WebContent > images > stores > storedir > style > styles.
3. Accédez à l'emplacement temporaire où votre image style2.png est stockée et copiez-la dans ce répertoire.
4. Par défaut, le magasin type Aurora prend en charge la combinaison style1/color1, le nom du fichier CSS étant common1_1.css. Pour permettre l'utilisation des combinaisons style2/color1, style2/color2 et style2/color3, créez trois nouveaux fichiers CSS appelés common2_1.css, common2_2.css et common2_3.css basés sur le fichier CSS par défaut :
  1. Dans la vue Explorateur d'entreprise, accédez à Stores > WebContent > storedir > css.
  2. Cliquez avec le bouton droit de la souris sur common1_1.css, puis cliquez sur Copier.
  3. Collez ce fichier trois fois dans le même répertoire CSS et renommez les fichiers common2_1.css, common2_2.css et common2_3.css.
5. Copiez le répertoire style1 vers style2.
  1. Dans la vue Explorateur d'entreprise, accédez à Stores > WebContent > storedir > include > styles > style1.
  2. Cliquez avec le bouton droit de la souris sur style1, puis cliquez sur Copier.
  3. Faites un clic droit sur styles et sélectionnez Coller.
  4. Renommez la copie en style2.
6. Les fichiers liés au style sont stockés dans le répertoire Stores\WebContent\storedir\include\styles par défaut. Prenez en charge plusieurs styles, en copiant CachedTopCategoriesDisplay.jsp dans le répertoire.
  1. Dans la vue Explorateur d'entreprise, accédez à Stores > WebContent > storedir > Snippets > Catalog > CategoryDisplay.
  2. Cliquez avec le bouton droit de la souris sur CachedTopCategoriesDisplay.jsp, puis cliquez sur Copier.
  3. Naviguez jusqu'à Stores > WebContent > storedir > include > styles.
  4. Collez le fichier dans style1 et style2.
7. Modifiez le fichier TopCategoriesDisplay.jsp.
  1. Dans la vue Explorateur d'entreprise, accédez à Stores > WebContent > storedir > ShoppingArea > CatalogSection > CategorySubsection.
  2. Ouvrez le fichier TopCategoriesDisplay.jsp dans un éditeur de texte.
  3. Repérez la ligne suivante :
```
<c:import url="${jspStoreDir}Snippets/Catalog/CategoryDisplay/CachedTopCategoriesDisplay.jsp">
```
  4. Remplacez-le par la ligne suivante :
```
<c:import url="${jspStoreDir}${StyleDir}CachedTopCategoriesDisplay.jsp">
```
  5. Enregistrez vos modifications et fermez le fichier.
Modifiez la présentation de la page de vitrine en créant un fichier CSS basé sur la page actuelle afin de prendre en charge le nouvel agencement. Modifiez ensuite les attributs liés à la position des éléments que vous souhaitez déplacer :
1. Marquez les éléments que vous souhaitez modifier sur la vitrine. Utilisez un outil de débogage tel que Mozilla Firefox avec le module complémentaire Firebug pour déterminer la définition div de chaque élément de la page.
2. Dans la vue Explorateur d'entreprise, développez Stores > WebContent > storedir > css.
  1. Ouvrez les fichiers common2_1.css, common2_2.css et common2_3.css, recherchez les définitions div que vous avez marquées dans l'étape précédente.
  2. Remplacez les attributs de chaque div que vous souhaitez modifier dans tous les fichiers CSS. Par exemple, localisez #header-search et remplacez right dans la définition de classe par une valeur de left.
  3. Enregistrez vos modifications et fermez le fichier.
Modifier la taille de police de la page de vitrine en modifiant les attributs de taille de police d'un fichier CSS :
1. Dans la vue Explorateur d'entreprise, accédez à Stores > WebContent > storedir > css.
2. Ouvrez les fichiers common2_1.css, common2_2.css et common2_3.css.
3. Localisez a, fieldset et appliquez les changements suivants :
  1. Dans chaque fichier, localisez font-size dans la définition de classe.
  2. Remplacez la valeur 10 par 12.
4. Enregistrez vos modifications et fermez le fichier.
Testez vos personnalisations dans l'aperçu du magasin dans Management Center.