Style configuration using WebSphere Commerce Accelerator

Prior to WebSphere Commerce Version 7 Feature Pack 2, you can use the Change Style wizard in WebSphere Commerce Accelerator to change the layout, color, and banner for a store. The Change Style wizard relies on the WebSphere Commerce Flow infrastructure.

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

Styles: Styles determine the appearance and layout of the store's headers, footers, and sidebars. Each style option 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 option 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 option 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 in the following directory:

WC_eardir/Stores.war/WEB-INF/xml/tools/stores/ storedir/devtools/flow/style
workspace_dir\Stores\Web Content\WEB-INF\xml\tools\stores\ storedir\devtools\flow\style

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 code snippet is an example of a simple style.xml file for a store that has two style options, two color options, and two banner options. For each style, there are the same two color options. For each color, there are the same two banner options. Since style and banner options 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"/>
 
1 <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"/>
 
2 <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"/>
 
3 <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>

1 StylePanelOptions: This group defines the style options for the store.
2 ColorPanelOptions: This group defines the color options for the store.
3 BannerPanelOptions: This group defines the banner options for the store.