Registering a new color in WebSphere Commerce

In this lesson, a new color is defined and made available for the Madisons starter store. 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 in the Change Style wizard in WebSphere Commerce Accelerator, or the Management Center Store Management tool if Feature Pack 2 or later in enabled.

Procedure

  1. Update the color 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. Locate the following code snippet:
      <option id="Style.1" enables-features="Style.f.1" enables-options="Color.1 Color.2"src="tools/stores/$storeDir$/style/styles/style1.png" selected-by-default="true" />
    4. Replace the code with the following code snippet:
      <option id="Style.1"
 enables-features="Style.f.1" 
 enables-options="Color.1 Color.2 Color.3"
 src="tools/stores/$storeDir$/style/styles/style1.png"
 selected-by-default="true" />
    5. Locate the ColorPanelOptions group:
      <option-group id="ColorPanelOptions" type="radio" panel="ColorPanel">
    6. Add the following option elements to the end of the option-group element:
      <option id="Color.3" enables-features="Color.f.3" src="tools/stores/$storeDir$/style/colors/color1_3.png" />
    7. Save your changes and close the file.
    Stores > WebContent > WEB-INF > xml > tools > stores > Madisons > devtools > flow > repository
    1. Open VirtualPages.xml for editing.
    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/common1_3$locale$.css" id="vfile.style3.css" locale-specific="yes" locales="iw_IL"/>
<virtual-file-implementation virtual-file-id="vfile.color" url="images/colors/color3/" id="vfile.color3.dir"/>
    4. Save your changes and close the file.
    5. Open Features.xml for editing.
    6. Locate the color section that begins with the following line of code:
      <!-- Features for stylesheets and image directories-->
    7. Add the following element to the end of the section:
      <feature id="Color.f.3" enables="vfile.style3.css vfile.styleie1.css vfile.color3.dir"/>
    8. Save your changes and close the file.
    LOBTools > WebContent > config > commerce > store > propertiesViews > Madisons
    1. Open StoreFlexFlowPropertiesView.def for editing.
    2. Locate the following code snippet:
      <MultiValueSelector name="ColorPanelOptions" promptText="${stoFlexFlow_10001.Styles.color.radio.label}" useRadioButtons="true">
    3. Add the following child MultiValueSelection object:
      <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/common1_3$locale$.css</url>
  <url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
 </Xml>
</MultiValueSelection>
    4. Save your changes and close the file.
  2. Copy the new color background image to the Madisons starter store style directory:
    1. In the Enterprise Explorer view, navigate to one of the following directories:
      • WebSphere Commerce Version 7.0.0.0Feature Pack 1Stores > WebContent > tools > stores > Madisons > style > colors
      • Feature Pack 2Feature Pack 3LOBTools > WebContent > images > stores > Madisons > style > colors
    2. Navigate to the temporary location where you extracted the images.zip file and copy style\color1_3.png to the directory.
  3. The Madisons starter store supports the style1, color1 combination by default, where the CSS file name is common1_1.css. To support the style1, color3 combination, create a CSS file called common1_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 common1_3.css.
  4. The Madisons starter store contains the color1 directory by default for its background images. To support the new background images, create a directory called color3, based on the default directory:
    1. In the Enterprise Explorer view, expand Stores > WebContent > Madisons > images > colors.
    2. Right-click color1 and click Copy.
    3. Right-click colors and click Paste.
    4. Rename the copy color3.