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.
(I have a feeling the code I have so far is wrong)
Code:
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);
I know I need to quantity into integer, price into float and do the calculations you plan to do. So total price would be productprice[1] + productprice[2] + productprice[3]. But I am now stuck and don't know how to continue. If someone could guide me or give me some hints that would be very helpful.
Ah Thankyou very much, it works now
Also is there a way to structure the javascript so that I have 2 buttons where one just adds to cart, but then there is a button where I can then view the shopping cart?
I have something I found and I'm trying to add it but I don't know what going on here.
Code:
function viewcart()
{
var total = 0;
var i = 0;
with (top.main.document)
{
write();
close();
write("<HTML><TITLE>Shopping Cart</TITLE>");
write("<BODY BGCOLOR=antiquewhite><CENTER>");
write("<H2>Thank you for your order</H2>");
write("<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=1 WIDTH=500>");
for (i in cart)
{
total = total + cart[i].price;
if (cart[i].itemcnt != null);
{
cart[i].display(top.main.document);
}
}
write("<TR><TD>Total = </TD><TD ALIGN=RIGHT>$" + total + "</TD>");
write("<TD> </TD></TR></TABLE><BR>");
write("</CENTER></BODY></HTML>");
}
}
</SCRIPT>
</HTML>
And then I guess I am going to need something like
@justinbarneskin:
In your javascript you've done it so it has the html (images and such) in with the javascript. Is there a way that I can separate it?, because I want a separate .js file that will be linked to my .html file.
I'm fairly lost now. You might discover that, many of your projects will not only get edited
but, you might decide to rewrite them totally from scratch. What have you so far?
I'll try explaining it better. Basically This is what I have so far, I've just changed one thing from the code you provided. which is the submit button that I have put outside the script
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>shopping</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
fieldset{width:300px}
legend{font-size:24px;font-family:comic sans ms;color:#004455}
</STYLE>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
<div id="products"></div><hr>
<div id="inCart"></div>
<SCRIPT type="text/javascript">
var items=['Xbox~149.99','StuffedGizmo~19.98','GadgetyGoop~9.97'];
var M='�'; var product=[]; var price=[]; var stuff='';
function wpf(product,price){var pf='<form><FIELDSET><LEGEND>'+product+'</LEGEND>';
pf+='<img src="../images/'+product+'.jpg" alt="'+product+'" ><p>price '+M+''+price+'</p> <b>Qty</b><SELECT>';
for(i=0;i<6;i++){pf+='<option value="'+i+'">'+i+'</option>'} pf+='</SELECT>';
pf+='<input type="button" value="Add to cart" onclick="cart()" /></FIELDSET></form>';
return pf
}
for(j=0;j<items.length;j++){
product[j]=items[j].substring(0,items[j].indexOf('~'));
price[j]=items[j].substring(items[j].indexOf('~')+1,items[j].length);
stuff+=''+wpf(product[j],price[j])+'';
}
document.getElementById('products').innerHTML=stuff;
function cart(){ var order=[]; var tot=0
for(o=0,k=0;o<document.forms.length;o++){
if(document.forms[o].elements[1].value!=0){
qnty=document.forms[o].elements[1].value;
order[k]=''+product[o]+'_'+qnty+'*'+price[o]+'';
tot+=qnty*price[o];k++
}
}
document.getElementById('inCart').innerHTML=order.join('<br>')+'<h3>Total '+tot+'</h3>';
}
</SCRIPT>
<input type="button" value="Add to cart" onclick="cart()" /></FIELDSET></form>
</BODY></HTML>
But what I am trying to do is make 2 files: one HTML file and one Javascript file, so that it will be linked to each other. Like so
You need to have unique values in the select options.
You cannot change the layout of your HTML as it is written, the script is digging out the stuff it needs and if you change the HTML, the script will fail
hmmm I tried that code but when I click add to cart nothing happens? I've linked it.
EDIT: its working now thanks , btw is there a way I can add a view function cart? so I can view the the information and total in a table on the same page?
Last edited by shadowplayer; 05-08-2010 at 06:20 AM.
Reply With Quote
Bookmarks