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:

To add a slosh bucket:


  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.

    <TD VALIGN="BOTTOM" CLASS="selectWidth">   
    <SELECT NAME="collateralSelected" CLASS='selectWidth' SIZE='5' MULTIPLE 
    <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 VALIGN="BOTTOM" CLASS="selectWidth">   
    <SELECT NAME="collateralAvailable" CLASS='selectWidth' SIZE='5' MULTIPLE

    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;} 

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

    <SELECT NAME='definedShopperGroup'
          onChange="updateSloshBuckets(this, document.f1.removeButton, 
             document.f1.allShopperGroup, document.f1.addButton);">  

  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

  3. Create or update the resource bundle for globalization.

Related concepts

Slosh buckets

Related reference

Slosh bucket JavaScript functions