Develop > Presentation layer > Customize WebSphere Commerce Accelerator, Organization Administration Console, or Administration Console > Tools framework > Slosh buckets

Add a slosh bucket

While adding a slosh bucket, the following files are modified:

• The JSP page to which you added the slosh bucket

• Modified resource bundle files MyPageResource_locale.properties

To add a slosh bucket:

Procedure

1. Write the page content using JSP and JavaScript files. Your JSP file must include the following JavaScript:

   <SCRIPT SRC="/wcs/javascript/tools/common/SwapList.js"></SCRIPT>
   

   The following is example HTML code which includes a slosh bucket on the page. The values for the buttonName, buttonName2, and the customJavaScriptFunction variables should be replaced by the values.

   <TR>
   <TD VALIGN="BOTTOM" CLASS="selectWidth">   
   <SELECT NAME="collateralSelected" CLASS='selectWidth' SIZE='5' MULTIPLE 
         onChange="customJavaScriptFunction"></SELECT>
   </TD>
   <TD WIDTH=150px ALIGN=CENTER><br>   
   <INPUT TYPE="button" NAME="addToSloshBucketButton" VALUE="buttonName" 
         style="width: 120px" ONCLICK="addToSelectedCollateral();" ><br>   
   <INPUT TYPE="button" NAME="removeFromSloshBucketButton" VALUE="buttonName2"
         style="width: 120px" ONCLICK="removeFromSelectedCollateral();" ><br>
   </TD>
   <TD VALIGN="BOTTOM" CLASS="selectWidth">   
   <SELECT NAME="collateralAvailable" CLASS='selectWidth' SIZE='5' MULTIPLE
         onChange="customJavaScriptFunction"></SELECT>
   </TD>
   </TR> 
   

   To increase the width of a slosh bucket list, set the following variable as follows in the output JSP file:

   <style type='text/css'>    .selectWidth {width: 235px;} 
   </style>
   

   Use code similar to the following in the JSP file when defining the list:

   <SELECT NAME='definedShopperGroup'
      CLASS='selectWidth' 
      MULTIPLE  
      SIZE='<%=numOfVisibleItemsInList%>' 
         onChange="updateSloshBuckets(this, document.f1.removeButton, 
            document.f1.allShopperGroup, document.f1.addButton);">  
    
   </SELECT> 
   

2. Create a resource bundle with text for the slosh bucket. These files are...

   • WC_EAR/properties/com/ibm/commerce/tools/componentname/properties

   • workspace_dir/wc/properties/com/ibm/commerce/tools/componentname/properties

   where componentname is the component to which you are adding the slosh bucket, and Enterprise_App_name is the name of the enterprise application you are using.

   If national languages are supported, create the national language resource bundles with the appropriate language text. The national language file names must end with the locale supported. For example, for a French-language resource bundle, the file name should be filename_fr_FR.properties

3. Create or update the resource bundle for globalization.

Related concepts

Slosh buckets

Related reference

Slosh bucket JavaScript functions

+

Search Tips   |   Advanced Search