Develop > Presentation layer > Work with JSP pages > Storefront customization tools


Style configuration in WebSphere Commerce

WebSphere Commerce provides the capability to dynamically change the look and feel of stores that are based on WebSphere Commerce starter stores by varying style-color-banner combinations. This capability is realized through the Change Style wizard, which relies on the WebSphere Commerce Flow infrastructure.

Three types of options are available in the Change Style wizard:

Styles

Styles determine the look and feel of the store's headers, footers, and sidebars. Each style choice maps to a store directory containing the header, footer, and sidebar JSP pages implementing that style.

Colors

Colors determine the style-color combinations that can be used in the store. Each color choice maps to its own style sheet as well as a directory containing the store's images rendered in that particular color.

Banners

Banners determine the color-banner combinations that can be used by the store. Each banner choice maps to a banner image located under the store's images directory.

The style, color, and banner options available in a given store are defined in the style configuration file, style.xml, located...

The style configuration file, in turn, refers to features and components defined in the flow repository, and the components defined in the repository map to the file assets such as JSP, image, and Cascading Style Sheet files. Adding new style options requires modifying the style and repository XML files, as well as adding new JSP pages, images, and style sheets.

The following is an example of a simple style.xml file for a store that has two style choices, two color choices, and two banner choices. For each style, there are the same two color choices. For each color, there are the same two banner choices. Given that style and banner choices are independent, there are four style- color combinations and four color-banner combinations. In the example, Color.1, Color.2, Color.3, and Color.4 represent the style- color combinations and Banner.1, Banner.2, Banner.3, and Banner.4 are the color-banner combinations: 

<panel id="StylePanel"/>  
<option-group id="StylePanelOptions" type="radio"
panel="StylePanel">                        
   
<option id="Style.1" enables-features="Style.f.1"
enables-options="Color.1 Color.2"
            src="tools/stores/$storeDir$/style/styles/style1.gif"
            selected-by-default="true"/> 
   
<option id="Style.2" enables-features="Style.f.2"
enables-options="Color.3 Color.4"  
           
src="tools/stores/$storeDir$/style/styles/style2.gif"/>         
                   
 
</option-group>  
<panel id="ColorPanel"/>  
<option-group id="ColorPanelOptions" type="radio"
panel="ColorPanel">  
   
<option id="Color.1" enables-features="Color.f.1"
enables-options="Banner.1 Banner.3"
            src="tools/stores/$storeDir$/style/colors/color1_1.gif"
            selected-by-default="true"/>         
   
<option id="Color.2" enables-features="Color.f.2"
enables-options="Banner.2 Banner.4"
           
src="tools/stores/$storeDir$/style/colors/color1_2.gif"/> 
   
<option id="Color.3" enables-features="Color.f.3"
enables-options="Banner.1 Banner.3"
           
src="tools/stores/$storeDir$/style/colors/color2_1.gif"/> 
   
<option id="Color.4" enables-features="Color.f.4"
enables-options="Banner.2 Banner.4"
           
src="tools/stores/$storeDir$/style/colors/color2_2.gif"/>       
                                        
 
</option-group>            
<panel id="BannerPanel"/>  
<option-group id="BannerPanelOptions" type="radio"
panel="BannerPanel">  
   
<option id="Banner.1" enables-features="Banner.f.1"
src="images/banners/banner1_1.gif"/> 
   
<option id="Banner.2" enables-features="Banner.f.2"
src="images/banners/banner1_2.gif"/> 
   
<option id="Banner.3" enables-features="Banner.f.3"
src="images/banners/banner2_1.gif"/> 
   
<option id="Banner.4" enables-features="Banner.f.4"
src="images/banners/banner2_2.gif"/>             

</option-group>

As the example illustrates, the style choices are defined in the StylePanelOptions option group, the color choices are defined in the ColorPanelOptions option group, and the banner choices are defined in the BannerPanelOptions option group of the style configuration file.


Related concepts

Storefront customization tools

WebSphere Commerce Flow infrastructure


Related tasks

Changing store style


Related information

Tutorial: Adding style options


+

Search Tips   |   Advanced Search