Registering a new style for the Madisons starter store

In this lesson, a new style in the style configuration file is defined and available in the WebSphere Commerce Accelerator Change Style wizard, or the Management Center Store Management tool if Feature Pack 2 is enabled. The Madisons starter store contains one style and two colors by default. In this lesson, a new color is added to the Madisons starter store and made available.

Procedure

  1. Update the style options for the Madisons starter store. In the Enterprise Explorer view, navigate to the following:
    File location Procedure
    Stores > WebContent > WEB-INF > xml > tools > stores > Madisons > devtools > flow > style
    1. Open style.xml for editing.
    2. Locate the StylePanelOptions group:
      <option-group id="StylePanelOptions" type="radio" panel="StylePanel">
    3. Add new option elements to the end of the option-group element with the existing option element as a template: 
      
<option id="Style.2"
 enables-features="Style.f.2"
 enables-options="Color.4 Color.5 Color.6"
 src="tools/stores/$storeDir$/style/styles/style2.png" />
    4. Locate the ColorPanelOptions group:
      <option-group id="ColorPanelOptions" type="radio" panel="ColorPanel">
    5. Add new option elements to the end of the option-group element with the existing option element as a template: 
      <option id="Color.4" 
 enables-features="Color.f.4" 
 src="tools/stores/$storeDir$/style/colors/color1_1.png" 
 selected-by-default="true" />
<option id="Color.5" 
 enables-features="Color.f.5" 
 src="tools/stores/$storeDir$/style/colors/color1_2.png" />
<option id="Color.6" 
 enables-features="Color.f.6" 
 src="tools/stores/$storeDir$/style/colors/color1_3.png" />
    6. Save your changes and close the file.
    Stores > WebContent > WEB-INF > xml > tools > stores > Madisons > devtools > flow > repository > IncludePages
    1. Open the StyleDir.xml file for editing.
    2. Add the following element within the page-components element: 
      <simple-implementation id="StyleDir.i1.impl2" url="include/styles/style2/" virtual-page-interface-id="StyleDir.i1" />
    3. Save your changes and close the file.
    Stores > WebContent > WEB-INF > xml > tools > stores > Madisons > devtools > flow > repository
    1. Open VirtualPages.xml for editing to add the CSS and image file implementations.
    2. Locate the virtual style sheet implementations:
      <virtual-file id="vfile.stylesheet"/>
    3. Add the following virtual-file-implementation elements to the end of the section: 
      <virtual-file-implementation virtual-file-id="vfile.stylesheet" url="css/common2_1$locale$.css" id="vfile.style4.css" locale-specific="yes" locales="iw_IL"/>
<virtual-file-implementation virtual-file-id="vfile.stylesheet" url="css/common2_2$locale$.css" id="vfile.style5.css" locale-specific="yes" locales="iw_IL"/>
<virtual-file-implementation virtual-file-id="vfile.stylesheet" url="css/common2_3$locale$.css" id="vfile.style6.css" locale-specific="yes" locales="iw_IL"/>
    4. Save your changes and close the file.
    5. Open the Features.xml file for editing.
    6. Locate the style section that begins with the following line of code:
      <!-- Features for style -->
    7. Add the following element to the end of the section: 
      <feature id="Style.f.2" enables="StyleDir.i1.impl2"/>
    8. Locate the color section that begins with the following: 
      <!-- Features for stylesheets and image directories-->
    9. Add the following elements to the end of the section: 
      <feature id="Color.f.4" enables="vfile.style4.css vfile.styleie1.css vfile.color1.dir"/>
<feature id="Color.f.5" enables="vfile.style5.css vfile.styleie1.css vfile.color2.dir"/>
<feature id="Color.f.6" enables="vfile.style6.css vfile.styleie1.css vfile.color3.dir"/>
      Note: The elements reference existing virtual file implementations for the color image directories.
    10. Save your changes and close the file.
    LOBTools > WebContent > config > commerce > store > propertiesViews > Madisons
    1. Open StoreFlexFlowPropertiesView.def for editing to add the new style and color options.
    2. Locate the StylePanelOptions MultiValueSelector object:
      <MultiValueSelector name="StylePanelOptions" promptText="${stoFlexFlow_10001.Styles.style.radio.label}" useRadioButtons="true">
    3. Add the new MultiValueSelection element to the end of the StylePanelOptions object:
      <MultiValueSelection imageSrc="/lobtools/images/stores/Madisons/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. Locate the PropertyPane object: 
      <PropertyPane definitionName="stoStyles_10001" >
		<PropertyGroup name="group" collapsable="false">
    5. Add the new MultiValueSelector element to the end of the PropertyGroup element:
      <MultiValueSelector name="ColorPanelOptions2" promptText="${stoFlexFlow_10001.Styles.color.radio.label}" useRadioButtons="true">
	<EnablementCondition objectPath="StoreFileRef[name=StyleDir]" propertyName="url" enablementValue="include/styles/style2/" />
	<MultiValueSelection imageSrc="/lobtools/images/stores/Madisons/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/Madisons/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/Madisons/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. Save your changes and close the file.
  2. In the Enterprise Explorer view, go to the following directory:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1Stores > Web Content > tools > stores > Madisons > style > styles.
    • Feature Pack 2Feature Pack 3LOBTools > WebContent > images > stores > Madisons > style > styles.
  3. Navigate to the temporary location where you extracted the images.zip file and copy style\style2.png to the directory.
  4. The Madisons starter store supports the style1, color1 combination by default, where the CSS file name is common1_1.css. To support the style2, color1, style2, color2, and style2, color3 combinations, create three new CSS files called common2_1.css, common2_2.css, and common2_3.css based on the default CSS file:
    1. In the Enterprise Explorer view, navigate to Stores > WebContent > Madisons > css.
    2. Right-click common1_1.css and click Copy.
    3. Right-click css and click Paste.
    4. Rename the copy common2_1.css.
    5. Right-click common1_2.css and click Copy.
    6. Right-click css and click Paste.
    7. Rename the copy common2_2.css.
    8. Right-click common1_3.css and click Copy.
    9. Right-click css and click Paste.
    10. Rename the copy common2_3.css.
  5. Copy the style1 directory to style2.
    1. In the Enterprise Explorer view, navigate to Stores > WebContent > Madisons > include > styles > style1.
    2. Right-click style1 and click Copy.
    3. Right-click styles and click Paste.
    4. Rename the copy style2.
  6. The style related files are located in the Stores\WebContent\Madisons\include\styles directory by default. To support multiple styles, the CachedTopCategoriesDisplay.jsp needs to be copied into the directory.
    1. In the Enterprise Explorer view, navigate to Stores > WebContent > Madisons > Snippets > Catalog > CategoryDisplay.
    2. Right-click CachedTopCategoriesDisplay.jsp and click Copy.
    3. Navigate to Stores > WebContent > Madisons > include > styles.
    4. Right-click style1 and click Paste.
    5. Right-click style2 and click Paste.
  7. Edit the TopCategoriesDisplay.jsp file.
    1. In the Enterprise Explorer view, navigate to Stores > WebContent > Madisons > ShoppingArea > CatalogSection > CategorySubsection.
    2. Open the TopCategoriesDisplay.jsp file in a text editor.
    3. Locate the following line: 
      <c:import url="${jspStoreDir}Snippets/Catalog/CategoryDisplay/CachedTopCategoriesDisplay.jsp">
    4. Replace it with the following line:
      <c:import url="${jspStoreDir}${StyleDir}CachedTopCategoriesDisplay.jsp">
    5. Save your changes and close the file.