Adding view cart function
Posted
by user228390
on Stack Overflow
See other posts from Stack Overflow
or by user228390
Published on 2010-05-08T11:44:10Z
Indexed on
2010/05/08
11:48 UTC
Read the original article
Hit count: 223
Hey guys need some help in adding a view cart button but I'm stuck not sure how to code it. any help?
The way I have coded it is that when a user clicks 'add item' they will get a alert box with info about the total price but I want that to appear in the HTML file but only once I have clicked on 'view cart' and I need it to be in a table format with info about the name, sum, price of the items and total. any ideas how I can do this?
here is my javascript
var f,d,str,items,qnts,price,bag,total;
function cart(){ f=document.forms[0];
d=f.getElementsByTagName('div'); var items=[];var qnts=[];price=[];bag=[]
for(i=0,e=0;i<d.length;i++){
items[i]=d[i].getElementsByTagName('b')[0].innerHTML;
qnts[i]=d[i].getElementsByTagName('select')[0].value;
str=d[i].getElementsByTagName('p')[1].innerHTML;
priceStart(str,i);
if(qnts[i]!=0){bag.push(new Array()); ib=bag[bag.length-1];
ib.push(items[i]);ib.push(qnts[i]);ib.push(price[i]);ib.push(qnts[i]*price[i]);}
}
if(bag.length>0){
total=bag[0][3]; if(bag.length>1){for(t=1;t<bag.length;t++){total+=bag[t][3]}}
alert(bag.join('\n')+'\n----------------\ntotal='+total)
}
}
function priceStart(str,inx){for(j=0;j<str.length;j++){if(str.charAt(j)!=' ' && !isNaN(str.charAt(j))){priceEnd(j,str,inx);return }}}
function priceEnd(j,str,inx){for(k=str.length;k>j;k--){if(str.charAt(k)!=' ' && !isNaN(str.charAt(k))){price[inx]=str.substring(j,k);return }}}
and my HTML
<script type="text/javascript" src="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="images/DS.jpg" /> <p id="price1">Price £39.99</p> <p><b>Qty</b></p>
<select name="qty">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> <input type="button" value="Add to cart" onclick="cart()" />
</div>
© Stack Overflow or respective owner
