Shopping cart help

Discussion in 'JavaScript' started by shadovv, May 4, 2010.

0
  1. #1
    Hello,
    I have a problem with my shopping cart. This is my first time using JavaScript so I am a beginner and there may be some things that I have not understood properly.

    What I am trying to achieve is this: I want button where I can add my item to the shopping cart e.g AddToCart() so I can add my items with the number of quantities that the person will want. To do this I need global arrays like sum, quanitity and name. Except the way I have done it does not have this and I'm not sure how implement this.

    The hint that was given to me is this: The price and name of each toy should be read directly from the web page using the DOM method call document.getElementByID(itemPriceID-or-itemNameID).innerHTML, where itempriceID and itemNameID are the id’s of the HTML elements which display the price and name of each toy. (Note: the price (read directly from the page) will be of type string, this needs to be converted to a number, so in order to perform type you will need to use the Javascript type conversion method parseFloat(price) )).

    I then need a ViewShoppingCart() which will make a loop through the arrays and display it in a table with the total sum. What I have done is a bit similar but my knowledge and experience was not enough to accomplish the above problem. I hope this makes more sense.

    What I have so far is this 
    function round_total (c) {
             var pennies = c * 100;
             pennies = Math.round(pennies);
             var strPennies = "" + pennies;
             var len = strPennies.length;
             return parseFloat(strPennies.substring(0, len - 2) + "." + strPennies.substring(len - 2, len));
     }
     // End of round_total function.
     
     /* Start of generate_page function. */
     function generate_page (form) {
             tax = 0.08;
             delivery_p = 2.99;
             var odate = new Date();
             var qty = form.quantity.value;
             var product_v = new String(form.product.value);
             var total_price = product_v.substr(product_v.indexOf("$") + 1, product_v.length - product_v.indexOf("$"));
             var price_without_tax = round_total(qty * total_price);
             var ttax = round_total(price_without_tax * tax);
             var delivery = round_total(qty * delivery_p);
             var total_p = round_total(price_without_tax + ttax + delivery);
             document.writeln("Quantity: " + qty + "<br>");
             document.writeln("Price: $" + total_price + "<br>");
             document.writeln("Delivery: $" + delivery + "<br>");
             document.writeln("Total: $" + total_p + "<br>");
             document.writeln("Order placed on: " + odate.toGMTString());
     }
    Code (markup):
    I tried to start fresh and try again but all I got so far is this
    var productname = new array();
var productprice = new array();
var productquantity = new array();
function cart()
  {
  for (i=1;i<=3;i++)
    {
    var name = 'title'+i;
    var price = 'price'+i;
    var quantity = 'qty'+i;
    productname[i] = document.getElementById(name).innerHTML;
    productprice[i] = document.getElementById(price).innerHTML;
    var selectfield = document.getElementById(quantity).
    productquantity[i] = selectfield.options[selectfield.selectedIndex].text;
    }
  }  
checkvalue=parseFloat(price);
    Code (markup):
    And now I am stuck and have no idea how to continue.

    This is the html file I am working with
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<script type="text/javascript" src="shopping_cart.js" />
</script> 
<link rel="stylesheet" type="text/css" href="shopping_cart.css" />
<title> A title </title>
</head>
<body>
<form name="form1" method="post" action="data.php" >
<div id="product1">     
<p id="title1"><b>Star Wars Tie Interceptor</b></p>
<img src="../Assingment Pics/Tie Interceptor.jpg" /> <p id="price1">Price £39.99</p>     <p><b>Qty</b></p>
  <select name="qty">
 <option value="number">0</option>
 <option value="number">1</option>
 <option value="number">2</option>
 <option value="number">3</option>
 <option value="number">4</option>
 <option value="number">5</option>
</select> 
</div>
<div id="product2">
<p id="title2"><b>Star Wars Clone Wars Vehicles Corporate Allinace Tank</b></p>
<img src="../Assingment Pics/Corporate Tank.jpg" /><p id="price2">Price £29.99</p> <b>        Qty</b>
<select name="qty2">
<option value="number">0</option>
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
</select>
</div>
<div id="product3">
<p id="title3"><b>Star Wars Clone Wars AT-ST vehicle</b></p>
<img src="../Assingment Pics/At St.jpg" /><p id="price3">price £49.99</p> <b>Qty</b>
<select name="qty3">
<option value="number">0</option>
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
</select>
</div> 
<br />
<input type="submit" value="Add to cart" name="submit" onClick="cart()";/><input
,    type="reset" value="Reset" name="reset">
</form>
</body>
</html>
    Code (markup):
    Thanks in advance.
     
    shadovv, May 4, 2010 IP