adding item to cart

with CSS

[susieone]

Hi I have a CSS with 3 tables or whatever they are called. I want to simulate adding one item to cart(this should display in same page in right side table)
my button for the product in in the middle table do I use the getElementById, I tried to do it but it removed the CSS formatting and displayed on a blank page.

[orion_rus]

Are you use a write() method to add item to cart? if so use innerHTML+=''; method
good luck to you

[susieone]

Still not getting this right. this is my code for the CSS and the button.

<div id="middle">

<button type="button" id="41141" value="hat1.hat">Add</button>

<div id="right">
<h2>Your cart:</h2>
<div class="cartitems" id="itemlist">
</div>

[ORBiTrus]

Use server-side coding. A Cart cannot be done pure client-side.

That said, the thing is:

!pseudocode!

button.onclick = function {
example = loadFrom(button.id);
middle.innerHTML = example.description;
right.appendChild(example.name);
}

LoadFrom obviously creates an element from the button's id.

If you didn't understand the Pseudocode, you probably shouldn't continue until you know the system better, or have read up on the DOM.

[susieone]

Thanks for the help.
I am only simulating the add to cart function I do not require it to work at this time, only to show the effects of clicking the button and displaying the contents in the correct place.

[whoisgregg]

Hmm, this is kind of lame as it just adds each new item below the rest (in other words, it won't keep a running total), but it looks kind of neat:

<script type="text/javascript"> 
<!-- 
function addtocart(ref) { 
itemarray = new Array(); 
itemarray[41141] = 'I am item 41141'; 
itemarray[50625] = 'I am item 50625'; 
itemarray[38965] = 'I am item 38965'; 
var parentel = document.getElementById('itemlist'); 
newrow = document.createElement('div'); 
newrow.innerHTML = itemarray[ref.id]; 
parentel.appendChild(newrow); 
} 
//--> 
</script> 
<div id="middle"> 
<button type="button" id="41141" value="hat1.hat" onclick="addtocart(this);return false;">Add</button> 
<button type="button" id="50625" value="hat1.hat" onclick="addtocart(this);return false;">Add</button> 
<button type="button" id="38965" value="hat1.hat" onclick="addtocart(this);return false;">Add</button> 
</div> 
<div id="right">  
<h2>Your cart:</h2>  
<div class="cartitems" id="itemlist">  
</div> 
</div> 

[susieone]

Hi I will give your code a go.
I also put a message in the CSS section and got a reply with a code snipet. I expanded upon this code but IE returns the button value(add) (null) not the item value.works as should in firefox and netscape.

<!-- Middle (main) column contents -->
<div id="middle">
<h2>My Header.</h2>
<script language="javascript" type="text/javascript">

var item = new Array(); //create array to store items
item[0] = "addHat1";
item[1] = "some item";
item[2] = "some other item";

function addToCart(item) { //add to cart function
item=document.getElementById(item[0]).value; //get value of item
document.getElementById("itemlist").firstChild.nodeValue=item; //add item value to child node, in this case item list
alert(item + " has been added to your cart!");
}

function removeItem(item) { //remove item from cart
item=document.getElementById(item[0]).value;
remove=document.getElementById("itemlist").firstChild.nodeValue=null;//update child
alert(item + " has been removed from your cart!");
}

</script>
<h3>Cart Actions:</h3>
<p>
<button type="button" id="addHat1" value="Hat.1" onclick="addToCart(item)" >Add</button>
&nbsp;&nbsp;
<button type="button" id="delHat1" value="Hat1" onclick="removeItem(item)" >Delete</button>
</p>

ID contents do not really matter at this stage just getting to grips with the add/removing items.

If I want to expand upon the array of items how would I call them without refrencing the actual array number. i.e.
item=document.getElementById(item[?]).value; //get value of item.
thanks for helping getting there slowly but surely.

[ORBiTrus]

I hate to do this, as it makes no sence to me, and may send you down the kitchen path, but I'm going to answer this. And yes, you can generate the buttons from the items automagically. OK? This works, but I repeat THIS IS NOT THE RIGHT APPROACH TO A CART!

Also, note that this uses OOP because doing a cart without OOP is like voting, you'll be f***ing yourself no matter how you go.

<!-- Middle (main) column contents -->
<div id="middle">
<h2>My Header.</h2>
<script language="javascript" type="text/javascript">
var cart;
var items = new Array(); //create array to store items
items[0] = "RedHat";
items[1] = "SuSE";
items[2] = "Debian";
function addToCart(itemIndex) { //add to cart function
cart.add(itemIndex);
cart.display();
alert(items[itemIndex] + " has been added to your cart!");
}
function removeItem(itemIndex) { //remove item from cart
cart.remove(itemIndex);
cart.display();
alert(items[itemIndex] + " has been removed from your cart!");
}
function Cart (holder, items) {
this.holder = holder;
this.items = items;
this.quantities = Array();
for (var i=0; i<items.length; i++)
this.quantities[i] = 0;
this.add = function (index) {
this.quantities[index]++;
}
this.remove = function (index) {
if (this.quantities[index] > 0)
this.quantities[index]--;
}
this.display = function () {
this.holder.innerHTML = "";
for (var i=0; i<this.quantities.length; i++) {
if (this.quantities[i] > 0) {
var elm = document.createElement('div');
elm.innerHTML = "<span class='name'>"+this.items[i]+"</span><span class='quantity'>Quantity: "+this.quantities[i]+"</span>";
this.holder.insertBefore(elm, null);
}
}
}
}
</script>
<h3>Cart Actions:</h3>
<p>
<button type="button" onclick="addToCart(0)">Add RedHat</button>
&nbsp;&nbsp;
<button type="button" onclick="removeItem(0)">Delete RedHat</button>
</p> 
<p>
<button type="button" onclick="addToCart(1)">Add SuSE</button>
&nbsp;&nbsp;
<button type="button" onclick="removeItem(1)">Delete SuSE</button>
</p> 
<p>
<button type="button" onclick="addToCart(2)">Add Debian</button>
&nbsp;&nbsp;
<button type="button" onclick="removeItem(2)">Delete Debian</button>
</p> 
</div>
<div id='right'>
</div>
<script type='text/javascript'>
cart = new Cart(document.getElementById('right'), items);
</script>

[whoisgregg]

So (although the original poster wasn't looking for this) if you wanted to have multiple products on a page and still submit those items to a "real" cart, you can modify ORBiTrus's excellent code to pass the items and quantities in hidden fields like so:

Change this function:

this.display = function () {  
this.holder.innerHTML = "";  
for (var i=0; i<this.quantities.length; i++) {  
if (this.quantities[i] > 0) {  
var elm = document.createElement('div');  
elm.innerHTML = "<span class='name'>"+this.items[i]+"</span><span class='quantity'>Quantity: "+this.quantities[i]+"</span>";  
this.holder.insertBefore(elm, null);  
}  
} 
document.getElementById('quantities').value = cart.quantities; // ADD 
document.getElementById('items').value = cart.items; // ADD 
}  

And add this html:

<form action="someform.php"> 
<input type="hidden" id="items" value="" /> 
<input type="hidden" id="quantities" value="" /> 
<input type="submit" value="Submit" /> 
</form> 

Then a page of multiple products could be navigated by the user, they could pick variable amounts of products from that page, then click a submit/update button to add those products to their "real" cart. Kind of neat actually, although I'd agree that an iframe or XMLHttpRequest method would be the better approach.

[whoisgregg]

The values could also be easily written to a cookie, which would carry other advantages.

[ORBiTrus]

Indeed gregg, it could allow some interesting methods.

It might be good to have this, in combination with an XMLHttpRequest (or iframe) for an "About RedHat" button...

Doing this with an Update button would make sense as the logical approach. Although I find that all too often users tend to ignore the Update [last e-com site I did, I had to make it flash so the user would click on it!].

So definately, storing it as a cookie is the best approach. Good thinking, gregg.

[susie: you'd store the SKUs, not the titles (use the Items array, a second -matching- array for the titles, or use Objects -name,id,price- in the Items array). Then the server would pull up the cookie on checkout and read the SKUs to get product data.]

P.S. Thanks for the complement G!

[susieone]

Wow Thanks for all the help ORBITrus and Gregg something to get my teeth into there.
Origionally I only wanted to simulate using one product but one you get started you want to see how to handle multiple products:-)with prices etc.

How about adding an image to cart as well is this possible from one button click.

I use an online merchant and each time someone clicks an add to cart button the merchants page opens. I would like to see all the cart completed before they submit to server.

As the subject of cookies was brought up I confess to having a go at baking one I can code it for a hit counter or page visits, but I was trying to create a wishlist, so when user clicks on the add to wish list button at the side of each product it is added to a seperate page(wishlist.html) showing the description and a link back to image.

I am trying to get all the site done and working to perfection accross all browsers before uploading to my domain. still got old frame set up.

thanks again.

[andye]

Use server-side coding. A Cart cannot be done pure client-side.

A few years ago, I worked with a shopping cart that was almost entirely client-side (obviously the credit card processing wasn't client-side).

Reams and reams of Javascript.

Took forever to load, didn't work very well.

Awful idea, terrible product.

best wishes, a.

[susieone]

HI ORBITrus Tired your code, copied and pasted it so as not to get typo`s.
throws up two errors:
1. in the addToCart function: 'cart.add is not a function'.
2.in the removeItem function: 'cart.remove is not a function'.

not sure why.

[whoisgregg]

ORBiTrus's code worked perfectly for me... Are you trying to add it into existing code? Or simply pasting it into a blank document?

[whoisgregg]

New cart function with price totaling and item images (although you'll want to call some kind of currency format function on the total.)

Define your item[] array like so:

items[0] = new Array( "RedHat", 10.99, 'path/to/redhat.gif'); 
items[1] = new Array( "SuSE", 70.99, 'path/to/suse.gif') 
items[2] = new Array( "Debian", 100.99, 'path/to/debian.gif');

Replace the this.display = function bit with:

this.display = function () {  
this.holder.innerHTML = "";  
this.totalprice = 0; 
for (var i=0; i<this.quantities.length; i++) {  
if (this.quantities[i] > 0) {  
this.totalprice += this.quantities[i]*this.items[i][1]; 
var elm = document.createElement('div');  
elm.innerHTML = "<span class='name'>"+this.items[i][0]+" <img src=\""+this.items[i][2]+"\" /> </span><span class='quantity'>Quantity: "+this.quantities[i]+"</span>";  
this.holder.insertBefore(elm, null);  
}  
} 
var elm = document.createElement('div');  
elm.innerHTML = "<span class='price'>Total "+this.totalprice+" </span>"; 
this.holder.insertBefore(elm, null);  
document.getElementById('quantities').value = cart.quantities; 
document.getElementById('items').value = cart.items; 
}

[ORBiTrus]

susie, there is a line at the bottom which creates the cart object.

It looks like you missed it, or it just didn't parse.

You really need it as it will instantiate the cart, since I'm not using static methods (and why would anyone?).

This is about the only way that cart could not be defined - without it the variable cart represents null. Which is what the error message states.

Anyways, the code should work perfect in all browsers. If anything, the worst thing is it requires DOM 2 support... which means, what? No Netscape 4 or IE 4? *rollseyes*

[susieone]

Hi ORBITrus

My fault! I did miss the last line of code to initiate the cart. works great thanks.
I will try to put it into practice soon. just uploaded my new site and the CSS is not rendering properly over the 3 borwsers I have for testing.
firefox, netscape 8, and IE6 so got to find out why.

Thanks again.