Visual Basic
Active Server Pages
Java
Click Here


Home

What's New

Articles

Code Downloads

Code Snippets

Message boards

Links
Tool Box

Books

Mailing List
Receive free code snippets and notices when this site is updated.

Contact

Shopping Cart Application with Java Script and Cookies

E-commerce systems usually require server side solutions.  Large sites with many orders coming in need servers that can automatically validate credit cards and connect to databases to store the orders details.  For small sites and those with out a large budget a client only solution can be implemented.  This e-commerce site could be hosted anywhere even on one of the many free web site providers.

In this application JavaScript is used to set cookies that contain the products that are in the customers shopping cart.  When the customer is ready to place their order they click the "Check Out" button.  This opens a new window where they can change the quantity of each product and enter their details.  When the customer has entered all their details they press the "Send Order" button.  This sends the form via email to your email address.

This application is divided into two HTML pages.  The first "products.htm" displays the products and lets the customer add them to their showing cart.

The second page "cart.htm" displays the contents of the shopping cart and lets the customer enter their details and send the order.

This application has been tested with IE 5.0 and Netscape 4.6.  The cookie functions are modification of those from a Web Monkey article.  The roundOff function is from Netscape's DevEdge Online.

products.htm

The list of product is kept as an array of Product objects.  The definition of the Product object is shown below.

function Product(name, description, price, imageFile)
{
	this.name = name;
	this.description = description;
	this.price = price;
	this.imageFile = imageFile;
}

Product items are created using the code shown below.  As an example of creating a on-line store with JavaScript I designed a store for a fictional Cactus retailer Prickly Products.

var products = new Array();
products[0] = new Product("Euphorbia atrox", "Comes from Somalia", 12.32, "atrox.jpg");
products[1] = new Product("Parodia cardenasii", "From South America",35,"parocard-tn.jpg");
products[2] = new Product("Setiechinopsis mirabilis", "Has a four inch flower",45, "seti.jpg");

The displayProducts function loops through all the items in the products array and creates a table of each product's details along with a button that calls the addtocart function.

function displayProducts()
{
 for (var i=0; i < products.length; i++) {
  document.writeln("<P><TABLE><TR>");
  document.writeln("<TD rowspan=4><IMG SRC='photos/" + products[i].imageFile + "'>);
  document.writeln("</TD></TR>");
  document.writeln("<TR><TD><B>Price: </B>" + products[i].price + "</TD><TD align=right>");
  document.writeln("<FORM><INPUT Type=Button Value=\"Add to shopping cart\");
  document.writeln(" onClick='addtocart(" + i + ")'>");
  document.writeln(</FORM></TD></TR>");
  document.writeln("<TR><TD><B>Name: </B>" + products[i].name + "</TD></TR>");
  document.writeln("<TR><TD><B>Description: </B>" + products[i].description + "</TD></TR>");
  document.writeln("</TABLE></P><HR>");
 }
}

The addtocart function places the product's product id, name and price into a cookie and displays a message box informing the customer that the item has been added to their shopping cart.

function addtocart(productID)
{
	// Set the cookie
	// "/" separates properties and "=" separate property names and their values 
	var the_cookie = "Product" + productID + "=" + "ProductID:" + productID;
	the_cookie += "/ProductName:" + escape(products[productID].name);
	the_cookie += "/Price:" + escape(products[productID].price) + "/Qty:1";
	document.cookie = the_cookie;
	alert( products[productID].name + " has been added to your shopping cart");
}

There is a button on this page that when clicked opens the other file "cart.htm" in a new window.

<FORM>
	<input type="button" value="Checkout" onclick="window.open('cart.htm','', 
	'height=460,width=460,status=yes,scrollbars=yes,toolbar=no,menubar=no,
	location=no');">
</FORM>

 

cart.htmCart.htm

Cart.htm is displayed when the customer checks out of the store.  They can change the quantity of each product or remove it from the shopping cart completely by clicking the "X" button.  When the quantity is changed the sub total and total are automatically calculated.   When the customer has entered their details they click the "Send Order" button and the form is submitted via email.  I have omitted any validation of the customers details and this should properly be included if you were to use this example.

A JavaScript file ("cookie.js") is included in this page.  I will not go into the details of how it works internally.  It has the following functions.

  • readCookie(name) // Returns the cookies contents or false if the cookie doesn't exist.   The result of this function is usually passed to readTheCookie function.
  • removeCookie(cookieName) // Removes the cookie by setting it's expiry date to a time in the past.
  • setCookieValue(cookieName, valueToSet,value) // Sets a property of the givien cookie
  • readTheCookie(the_values ,the_info) // Places the properties from the_values into the associative array the_info.  It returns the number of properties.

The first part of the HTML page is shown below.  The action parameter is an email address.  When the customer submits the form the details will be send to this address.  When the form is submitted a message box is displayed thanking the customer for their order and then the window is closed.

<script src="cookie.js"></script>
<script src="round.js"></script>
<form name="OrderForm" method="post" action="mailto:youremail@yourdomain.com"
onsubmit="alert('Thank you for your order ' 
  + document.forms['OrderForm'].elements['CustomerName'].value);window.close();">
<table border="0" width="100%">
<tr>
	<td><strong>Name: </strong> </td>
	<td align=right><strong>Price:</strong></td>
	<td align=right><strong>Qty: </strong> </td>
	<td width='13%' align=right><strong>Sub Total: </strong> </td>
</tr>

This next part loops through the cookies and adds a row to the table for each product.   The for loop
"for (i=0;i<3;i++ )" loops through all the products that could possible be in the shopping cart.  Thus if there was a hundred products in your catalogue you would change the for loop to "for (i=0;i<100;i++ )".

The QtyX textboxes call the "calculateSubTotal" function in their onchange event.  This function calculates the sub total and total.

The "X" buttons call the removeProduct function when they are clicked.

<script language="JavaScript">
var cookieName;
var i=0;
var Total=0;
var ProductCount=0;

if ( document.cookie != "")
 for (i=0;i<3;i++ ) {
  if ( (cookieName = readCookie("Product" + i )) != "false" ) // Get the cookie's contents
  {
   var cookie_information = new Array(); // Holds the cookie's properties in a associate array
		
   if ( readTheCookie(cookieName , cookie_information) > 1 ) {
    document.write("<tr><td>");
    document.write("<input type='button' title='Remove from cart'");
    document.write(" value='X' onclick='removeProduct(" + i + ");'>");
    document.write(" <input type='text' name='ProductName");
    document.write(cookie_information['ProductID']):
    document.write("' value='" + cookie_information['ProductName'] + "' readonly></td>");
    Prices[i] = Math.abs( cookie_information['Price']);// Store the price in an array for later
    document.write("<td align=right>" + Prices[i] + "</td>");
    document.write("<td align=right><input type='text' name='Qty" + i + "' size='2'");
    document.write(" value='" + cookie_information['Qty']);
    document.write("' onblur='calulateSubTotal(" + i + ")'></td>");
    Total+= Math.abs(cookie_information['Qty'])  * Math.abs(cookie_information['Price']);
    document.write("<td align=right><input type='text' name='subTotal" + i + "'");
    document.write(" size='4' value='"); 
    document.write(Math.abs(cookie_information['Qty'])  * Prices[i] + "' readonly></td></tr>");
    ProductCount=i;
   }
  }
 }
else
{
 alert("Shopping Cart Empty");
 window.close();
}

Below are the two functions mentioned above.  The removeProduct function uses the removeCookie function of cookie.js, after removing the cookie the page is reloaded.

The calulateSubTotal function calculates the sub total for the product.  If the customer enters a invalid number in the Quantity box an error message is displayed and the quantity set to 1.

The line "setCookieValue("Product" + productID, "Qty", Qty);" saves the changed quanitiy into the cookie.

The sub totals are totaled and placed in the txtTotal input box.

function removeProduct(productID)
{
  removeCookie("Product" + productID);
  location.reload();
}

function calulateSubTotal(productID)
{
  var newSubTotal;
  var Qty=roundOff(Math.abs(document.forms["OrderForm"].elements["Qty" + productID].value ),0);
  document.forms["OrderForm"].elements["Qty" + productID].value = Qty;
  if (isNaN(Qty))
  {
    document.forms["OrderForm"].elements["Qty" + productID].value="1";
    document.forms["OrderForm"].elements["subTotal" + productID].value = Prices[productID];
    alert("Only a number can be entered in the quanity box");
    Qty = 1;
  }
  setCookieValue("Product" + productID, "Qty", Qty);
  Total=0;
  var i=0;
  for(i=0;i<=ProductCount;i++)
  {
    var def = new String(Prices[i]);
    if ( def != "undefined")
    {
     newSubTotal = Math.abs(document.forms["OrderForm"].elements["Qty" + i].value) * Prices[i];
     if (i == productID)
       document.forms["OrderForm"].elements["subTotal" + i].value = newSubTotal;
     Total+=newSubTotal;
    }
  }
  Total = roundOff( Total,2 );
  document.forms["OrderForm"].txtTotal.value = Total;	
}

Here's the last part of cart.htm.  You can add any extra input fields you want and they will be send to you via email.

</script>
<tr>
 <td></td>
 <td></td>
 <td></td>
 <td align=right>
  <strong>
   Total: <input type='text' name='txtTotal' size='4' value='1' readonly>
  </strong>
 </td>
</tr>
  </table>
<HR>
<P>Customer Name: <INPUT NAME="CustomerName"></P>
<P>Email: <INPUT NAME="Email"></P>
<P>Phone: <INPUT NAME="Phone"></P>
<P>Street Address <INPUT NAME="StreetAddress"></P>
<P>City: <INPUT NAME="City"></P>
<P>Country <INPUT NAME="Country"></P>

  <p><input type="submit" value="Send Order" name="btnUpdate">
 <input type="button" value="Cancel" name="btnCancel" onclick="window.close();"></p>
</form>
<script language="JavaScript">
	// Sets the total the first time.  Called down here because txtTotal needs
	// to be defined above
	document.forms["OrderForm"].txtTotal.value = Total;
</script>

Last Note

The total cost of the goods ordered will be send to you when a customer submits their order.  You should not use these when billing because a customer could easily modify the price that gets sent to you and give them selves a discount.

In order to get this application working in Netscape I had to remove these two lines from cart.htm

<script src="cookie.js"></script>
<script src="round.js"></script>

and copy and paste the contents of "cookie.js" and "round.js" into cart.htm. 

It all worked fine until the removeProduct function reloaded the page.  After this Netscape can't find the functions that are in those files.  If you know why and how to get around this without placing everything into one file email me at webmaster@developersdomain.com. Thanks.

Michael Jones.

View online

Download