JavaScript Input Example 4

Description:
The JavaScript on this page demonstrates how to utilize the "addProduct()" method to add an item to the shopping cart. It also demonstrates some of the power and flexibility that is available by using JavaScript to handle user interaction.

Example:




Color: Size: Qty:

Source:
<SCRIPT LANGUAGE="Javascript">
image1 = new Image();
image1.src="../images/example_shirt_blue.gif";
image2 = new Image();
image2.src="../images/example_shirt_red.gif";
image3 = new Image();
image3.src="../images/example_shirt_green.gif";
image4 = new Image();
image4.src="../images/example_shirt_yellow.gif";
function changeImage(ref,selectedColor)
{
   if (selectedColor == "Blue")
   {
      document.images[ref].src = image1.src;
   }
   else if (selectedColor == "Red")
   {
      document.images[ref].src = image2.src;
   }
   else if (selectedColor == "Green")
   {
      document.images[ref].src = image3.src;
   }
   else
   {
      document.images[ref].src = image4.src;
   }
}

function addP00004()
{
document.uShopJSI.addProduct(
"P00004",                        <!-- Product ID -->
"Polo Shirt",                    <!-- Product Name -->
"" +                             <!-- Product Description and Options -->
"Color: " + 
document.P00004.color.options[document.P00004.color.selectedIndex].value +
"; Size: " + 
document.P00004.size.options[document.P00004.size.selectedIndex].value,
"2.0",                           <!-- Product Weight -->
document.P00004.quantity.value,  <!-- Product Quantity -->
"$24.95",                        <!-- Product Price (Each) -->
"$0.00",                         <!-- Extra Price Modifiers -->
"$0.00",                         <!-- Product Classification -->
"$0.00",                         <!-- Product Shipping Modifier -->
"YES");                          <!-- Taxable? -->
}

</SCRIPT>

<FORM NAME="P00004">
<IMG SRC="../images/example_shirt_blue.gif" NAME="shirt_image">
<BR><BR>
Color:
<SELECT NAME="color" onChange="changeImage(
'shirt_image',
document.P00004.color.options[document.P00004.color.selectedIndex].value);
">
   <OPTION VALUE="Blue">Blue</OPTION>
   <OPTION VALUE="Red">Red</OPTION>
   <OPTION VALUE="Green">Green</OPTION>
   <OPTION VALUE="Yellow">Yellow</OPTION>
</SELECT>
Size:
<SELECT NAME="size">
   <OPTION VALUE="S">S</OPTION>
   <OPTION VALUE="M">M</OPTION>
   <OPTION VALUE="L">L</OPTION>
   <OPTION VALUE="XL">XL</OPTION>
</SELECT>
Qty:
<INPUT TYPE=text SIZE=4 NAME="quantity" VALUE="1">
<A HREF="" onClick="addP00004();return false;">
<IMG SRC="../images/example_add_button.gif" border=0 align=TOP></A>
</FORM>

Note: Don't forget to add the uShopJSI applet to your page too:
<APPLET CODE="uShopJSI.class" CODEBASE="../classes/" NAME="uShopJSI" WIDTH="2" HEIGHT="2">
</APPLET>

More Information:

For more information about creating and using your own JavaScripts with uShop, see uShop and Java Scripts.