Shopping Cart - "Catalog"

// we are making the assumption that these arrays were pulled out of a database
var Item = new Array("Panda", "Koala", "Dolphin", "Otter");

var Price = new Array(32, 16, 8, 4);

/*************** Cookie Functions ***************/

var thisCookie = document.cookie;

function getCookie(name) {
var index = thisCookie.indexOf(name + "=");

if (index == -1) return null;

index = thisCookie.indexOf("=", index) + 1;

var endstr = thisCookie.indexOf(";", index);

if (endstr == -1) endstr = thisCookie.length;

return unescape(thisCookie.substring(index, endstr));
}

function setCookie(name, quantity) {
if (value != null && value != "") document.cookie = name + "=" + quantity;

thisCookie = document.cookie;
}

function deleteCookie(name, path, domain) {
     if (getCookie(name)) {
          document.cookie = name + "=" +
          ((path) ? "; path=" + path : "") +
          ((domain) ? "; domain=" + domain : "") +
          "; expires=Thu, 01-Jan-70 00:00:01 GMT";
     }
}

/*************** End of Cookie Functions ***************/

// When we add an item we need to make a few checks
// & give the appropriate alert messages
function addCookie(i) {
var name = Item[i];
var quantity = document.orderForm[name].value;

     // Is the quantity a number?
     if (isNaN(quantity)) {
          alert("Please enter a Number");
          deleteCookie(name); // delete the cookie since it is invalid
          // reset the quantity value back to zero, & highlight the field.
          document.orderForm[name].value = 0;
          document.orderForm[name].focus();
          document.orderForm[name].select();
          return;
     }

// take of the situation, ie, 01 make it 1
if (quantity.length > 0 && quantity.charAt(0) == 0) quantity = quantity.substring(1);

     // Is there a quantity or is the quantity zero
     if (!quantity) alert("Nothing has been added to your Cart");
     // Is the quantity = 1
     else if (quantity == 1) {
          alert("Thank You!!\n" + "One " + name + " has been added to your Cart");
     }
     // Is the quantity greater than 1
     else alert("Thank You!!\n" + quantity + " " + name + "s" + " have been added to your Cart");

     if (!quantity) {
          deleteCookie(name); // delete item since it is zero or ""
          document.orderForm[name].value = 0; // reset the item quantity back to 0
     }
     else {
          if (document.orderForm[name].value != quantity) { // set 01 to 1
               document.orderForm[name].value = quantity;
          }

setCookie(name, quantity);

cart = getCookie("cart"); // get the contents of the dynamic cart cookie
price = getCookie("price"); // get the contents of the dynamic price cookie

                if (!cart) { // if the cart doesn't exist then create it
               cart = name;
               price = Price[i]; // create the price that is associated with the particular item
          }
          // if cart = Koala;Otter;Panda then price = 16;4;32
          // if name is in the string don't do anything,
          // else append ";name" to the cart string &
          // append ";Price[i]" to the price string
          else if (cart.indexOf(name) == -1) {
               cart += ";" + name;
               price += ";" + Price[i];
          }

          setCookie("cart", cart); // create the cart cookie
          setCookie("price", price); // create the price cookie
     }
}

/*
Checks each Item cookie for its quantities & put the value in the quantity field. If the Item doesn't exist then make that quantity equal to zero.
*/
function upDate() {
     for (i = 1; i < Item.length; i++) {
          quantity = getCookie(Item[i]);
          if (!quantity) quantity = 0;
          document.orderForm[Item[i]].value = quantity;
    }
}

</SCRIPT>

<TR>
     <TD BGCOLOR="#336699">
          <FONT COLOR="#FFFFFF">Item Description</FONT>
     </TD>
     <TD BGCOLOR="#336699">
          <FONT COLOR="#FFFFFF">Quantity</FONT>
     </TD>
     <TD BGCOLOR="#336699">
          <FONT COLOR="#FFFFFF">Unit Price</FONT>
     </TD>
     <TD BGCOLOR="#336699">
           
    </TD>
</TR>
<TR>
     <TD>
          Panda
     </TD>
     <TD>
          <INPUT TYPE="text" NAME="Panda" VALUE="0" SIZE="3">
     </TD>
     <TD>
          $32
     </TD>
     <TD>
          <A HREF="javascript:addCookie(0);"
            onMouseOver="status='Add the Item to the Shopping Cart'; return true;"
            onMouseOut="status='';">
          <IMG SRC="images/addtocart.gif">
          </A>
     </TD>
</TR>

etc...

</TABLE>

</FORM>

In this exercise a dynamic cart is created. If an Item is added then cart will "hold" this particular item. A price string will also be created that matches the cart contents. In the checkout if an item is deleted is deleted then that item will be deleted from the cart and the price from the price string.