Upgrading a shopping cart

1

hi i have a basic shopping cart already made and was wondering how i could possibly make it a drag and drop shopping cart to make things easier? oh ya the cart i have no is written in php.

2

Click the Drag & Drop link on the bottom: http://www.ajax.org/

3

thanx for the link but i started useing the “Scipt.aculo.us JavaScript library” and trying to follow the tutorial on this site “http://br.sys-con.com/read/172585_1.htm” i started it rather than doing it from a blank slate im implementing it in to my site just to see if i can get it to work. i got the draggable to work i can drag a picture anywere and go it to revert back inless it goes into a droppable zone. my shopping cart area is were the droppable is. now the site tells me to add this

[COLOR=Red]function body_onLoad() {
// create an SRS gateway to the cart.cfm page
objGateway = new gateway(“srs/cart.cfm?”);
// update cart in case of return visit
// code for this function is below
updateCart();
}[/COLOR]

now this is the point that i cant get past anything i do dosnt work. this is my pages code right now

[COLOR=Red]<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<title>MrAmerican.us</title>
<link rel=“stylesheet” href=“tshirtstyleone.css”>
<head><script src="./scriptaculous-js-1.8.1/lib/prototype.js" type=“text/javascript”></script>
<script src="./scriptaculous-js-1.8.1/src/scriptaculous.js" type=“text/javascript”></script></head>
<style type=“text/css”>
<!–
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {
font-family: “Courier New”, Courier, monospace;
color: #990000;
font-size: 36px;
}
.style3 {
font-family: “Courier New”, Courier, monospace;
font-size: 18;
}
.style5 {
font-family: “Courier New”, Courier, monospace;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
}
.style6 {
font-size: 18px;
color: #0066FF;
font-family: “Courier New”, Courier, monospace;
font-weight: bold;
}
.style8 {
color: #000000;
font-size: 20px;
font-weight: bold;
font-family: “Courier New”, Courier, monospace;
}
–>
</style>
<body>

<!-- Site navigation menu -->
<ul class=“navbar”>
<li><a href=“index.html”>Home page</a></li><li><a href=“events.html”>events </a></li><li><a href=“shirts.html”> Information</a></li><li><a href=“links.html”> Links</a></li>
</ul>

<!-- Main content -->
<div class=“container”>
<h1 class=“style2”>MrAmerican.us</h1>
<p class=“style5”>Take Pride In Your Ride!!! Ride American!!!</p>
<p class=“style6”>Our Merchandise:</p>
</div>
<div class=“container2”><img src=“toxict.jpg” width=“116” height=“123” longdesc=“armydeathspadet.jpg” id=“drag_me”></div>
<script type=“text/javascript”>
new Draggable(‘drag_me’, { revert: true, snap: [40, 40] });
</script>
<div class=“shoppingcart” id=“shoppingcart”>
<fieldset style=“width:400px;”>
<legend><span class=“style8”>Your shopping cart</span></legend>
<table width=“230” height=“419” border=“0” cellpadding=“5” cellspacing=“0” id=“tableCart”>
<thead></thead><tbody><td width=“220” height=“419”></tbody></table>
<button onclick=“emptyCartButton_onClick()” id=“emptyCartButton”>
Clear Shopping Cart</button>
</fieldset>
</div>

<script type=“text/javascript”>
Droppables.add(‘shoppingcart’,{ onDrop:function(element) {
alert(‘Added UPC ’ + element.id + ’ to your shopping cart.’);
Element.hide(element.id);}})
</script>
[/COLOR][COLOR=Red] <!-- Sign and date the page, it’s only polite! -->[/COLOR]
[COLOR=Red]<div align=“center” class=“style3”>
<address class=“container1 style1”>
made may 8 2008 by tobin carroll
</address>
</div>

</body>

</html>
[COLOR=Black]
im not sure as to were to put that function call or any of the others the site talks about its my first site im designing [/COLOR]
[/COLOR]