HTML/JavaScript shopping cart help

Question

Rblalock 0 Newbie Poster

14 Years Ago

Hello, I'm new to the DaniWeb community and I am in need of some serious help. I am taking a web design class, but the teacher I currently have now has no idea what he is doing; he is an Info Tech teacher, but we have two classes at the same time.

I have to create a shopping cart for my class, and I you can tell, I have no idea how to create a shopping cart with HTML and JavaScript.

I do not have any money to give for anyone's help, but if anyone thinks they might be able to help me create it, I will send them the coding I have at this moment.

cart javascript shopping web-design

3 Contributors
3 Replies
3K Views
5 Years Discussion Span
Latest Post 9 Years Ago Latest Post by Gregory_4

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Rblalock 0 Newbie Poster · Answer 1 · 2009-11-08T21:52:42+00:00

Here is the coding...

<html>
<head>
<title>Moultrie Technical College - Worth County Campus</title>
 
<style type="text/css" media="all"> 
 
/* Ryan Blalock (ShoppingCart.htm)
9/29/09 */
 
body {
background: transparent url(images/bg.gif) repeat left top; }
 
table {
color:white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 10pt;
font-family: arial,helvetica,sans-serif;
background-color: black; }
 
td#header {
font-size: 16pt;
text-align: center; }
 
td, th {
padding: .3em; }
 
td.align {
vertical-align: top; }
 
h1 {
width: 775px;
height: 125px;
font-size: 20pt;
font-family: "bernhardmod BT",serif;
padding: 15 15 0 40;
background-image: url(logo.png);
background-repeat: no-repeat;
text-align: center;
border-bottom: groove thick;
margin-bottom: 0; }
 
.center {
text-align: center; }
 
tr#black {
color: white;
background-color: black;
font-weight: bold;
text-align: center; }
 
tr#nav {
color: black;
background: #000 url(images/headergradient.png) repeat-x left bottom;
font-weight: bold;
text-align: center; }
 
tr#header {
color: black;
background-color: #FFF;
font-weight: bold;
text-align: center; }
 
td#body {
color: black;
background-color: #FFF;
text-align: justify; }
 
button {
margin-left: 1em; }
 
</style>
 
<script type="text/javascript"> 
 
var imageclock=new Object()
	//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
	imageclock.digits=["images/clock/c0.gif", "images/clock/c1.gif", "images/clock/c2.gif", "images/clock/c3.gif", "images/clock/c4.gif", "images/clock/c5.gif", "images/clock/c6.gif", "images/clock/c7.gif", "images/clock/c8.gif", "images/clock/c9.gif", "images/clock/cam.gif", "images/clock/cpm.gif", "images/clock/colon.gif"]
	imageclock.instances=0
	var preloadimages=[]
	for (var i=0; i<imageclock.digits.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=imageclock.digits[i]
	}
 
	imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
		var sections=timestring.split(":")
		if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
			sections[0]="12"
		else if (sections[0]>=13)
			sections[0]=sections[0]-12+""
		for (var i=0; i<sections.length; i++){
			if (sections[i].length==1)
				sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
			else
				sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
		}
		return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
	}
 
	imageclock.display=function(){
		var clockinstance=this
		this.spanid="clockspan"+(imageclock.instances++)
		document.write('<span id="'+this.spanid+'"></span>')
		this.update()
		setInterval(function(){clockinstance.update()}, 1000)
	}
 
	imageclock.display.prototype.update=function(){
		var dateobj=new Date()
		var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
		var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
		document.getElementById(this.spanid).innerHTML=currenttimeHTML
 
	}
 
function checkForm1() {
  if (document.form1.prod.selectedIndex == 0)
    {alert ("Select literature");
     return false;}
  else if (document.form1.qty.selectedIndex == 0)
    {alert ("Select quantity");
     return false;}
  else if (document.form1.ship.value == "0.00")
    {alert ("Select a shipping option");
     return false;}
  else return true;
}
 
</script>
</head>
 
<body>
<div class="center">
 
<table border="0">
<tr id="header">
  <td colspan="2"><h1>Moultrie Technical College<br />Worth County Campus</td>
</tr>
<tr>
<td align="right">
<script type="text/javascript"> 
 
new imageclock.display()
 
</script>
</td></tr>
<tr id="nav">
 
<td>Navigation:: <a href="index.html">Home</a> | <a href="infotech.html">Information Technology</a> | <a href="webdesign.html">Web Design</a> | <a href="cosmo.html">Cosmetology</a> | <a href="cal.html">Calendar</a> | <a href="comptia.html">CompTIA</a></td>
 
</tr>
<tr>
 
<td id="body">E-mail us at: 
<b><script type="text/javascript"> 
document.write("moultrie@moultrietech.edu");
</script></b></td></tr>
 
<tr>
  <td id="body" colspan="2"><br /><p>Welcome to the Moultrie Tech - Worth County- campus bookstore.  Located on this page, you will find all the literature needed for the Moultrie Tech classes given at the Moultrie Tech - Worth Campus.  If, for some reason, the literature that you need is not available on this page, please try the other Moultrie Tech campuses' bookstores.  Literature needed for each quarter of classes will vary by teacher, and if any questions are to come to mind, feel free to ask.</p>
 
<p><strong><u>Web Design Literature</u></strong></p>
 
<p><img src="HTML.jpg" alt="Quarter One:  HTML Literature" width="75" height="75" /><input type="checkbox" id="HTML" value="HTML" />New Perspectives: Blended HTML, XHTML, and CSS Introductory <strong>$73.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="javascript.jpg" alt="Quarter Two: JavaScript Literature" width="75" height="75" /><input type="checkbox" id="javascript" value="javascript" />New Perspectives:  JavaScript <strong>$63.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="dreamweaver.jpg" alt="Quarter Three: Dreamweaver literature" width="75" height="75" /><input type="checkbox" id="dreamweaver" value="dreamweaver" />New Perspectives on Adobe Dreamweaver CS4 <strong>$84.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="photoshop.jpg" alt="Quarter Four: Photoshop literature" width="75" height="75" /><input type="checkbox" id="photoshop" value="photoshop" />Adobe Photoshop CS4: Complete Concepts and Techniques <strong>$66.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<br />
<br />
 
<p><strong><u>Info Tech Literature</u></strong></p>
 
 
 
<p><strong><u>Cosmetology</u></strong></p>
 
 
 
 
<tr id="black">
  <td colspan="2">1210 North Monroe Street Sylvester, GA 31791.</td>
</tr>
</table>
</div>
</body>
</html>

cursed_mask 0 Newbie Poster · Answer 2 · 2012-05-21T06:43:24+00:00

Thanks for the code.. This code works fine. But I want more help in it. How can I add a cart at the end of this, which will show details of product which have been ordered.

For example : I selected 2 copies of Dreamweaver and 2 copies of java. I have clicked on add to cart button. Both have been added in cart below. Now I want to cancel dreamweaver copy.

Gregory_4 0 Newbie Poster · Answer 3 · 2014-12-15T11:26:21+00:00

I would suggest you to work with array of objects and then output it to the DOM in order to accomplish your task.

This is very basic code that can be used as starting point for building more complex shopping cart.

You can see working example of following code at http://www.softxml.com/stackoverflow/shoppingCart.htm

//create array that will hold all ordered products
    var shoppingCart = [];

    //this function manipulates DOM and displays content of our shopping cart
    function displayShoppingCart(){
        var orderedProductsTblBody=document.getElementById("orderedProductsTblBody");
        //ensure we delete all previously added rows from ordered products table
        while(orderedProductsTblBody.rows.length>0) {
            orderedProductsTblBody.deleteRow(0);
        }

        //variable to hold total price of shopping cart
        var cart_total_price=0;
        //iterate over array of objects
        for(var product in shoppingCart){
            //add new row      
            var row=orderedProductsTblBody.insertRow();
            //create three cells for product properties 
            var cellName = row.insertCell(0);
            var cellDescription = row.insertCell(1);
            var cellPrice = row.insertCell(2);
            cellPrice.align="right";
            //fill cells with values from current product object of our array
            cellName.innerHTML = shoppingCart[product].Name;
            cellDescription.innerHTML = shoppingCart[product].Description;
            cellPrice.innerHTML = shoppingCart[product].Price;
            cart_total_price+=shoppingCart[product].Price;
        }
        //fill total cost of our shopping cart 
        document.getElementById("cart_total").innerHTML=cart_total_price;
    }


    function AddtoCart(name,description,price){
       //Below we create JavaScript Object that will hold three properties you have mentioned:    Name,Description and Price
       var singleProduct = {};
       //Fill the product object with data
       singleProduct.Name=name;
       singleProduct.Description=description;
       singleProduct.Price=price;
       //Add newly created product to our shopping cart 
       shoppingCart.push(singleProduct);
       //call display function to show on screen
       displayShoppingCart();

    }  


    //Add some products to our shopping cart via code or you can create a button with onclick event
    //AddtoCart("Table","Big red table",50);
    //AddtoCart("Door","Big yellow door",150);
    //AddtoCart("Car","Ferrari S23",150000);

Have a look at following free client-side shopping cart:

Documentation
http://www.softxml.com/softecartjs-demo/documentation/SoftecartJS_free.html

Hope you will find it useful.