How do I write a Shopping Cart Program in JavaScript?

I am supposed to write a JavaScript program.

The site should have 3 pages: a homepage, a product page, and an order form.

The homepage should include a link to the product page.

The product page should display products and include a product ID, a picture, a price, and description of each product .

This is where I am getting stuck. I have chosen my pictures and products to use, but I can't get the JavaScript program to incorporate them.

Any idea what I could be doing wrong or how to incorporate pictures that I am saving on my pc into the JavaScript program?

Here is what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
      <title>Shopping Cart</title>
      <meta name="generator" content="CSE HTML Validator Professional (http://www.htmlvalidator.com/)" />
      
      
</head>

      <title>Shopping Cart - Index</title>
      
      <script src="photos.js" type="text/javascript" charset="utf-8<>/scrpt>
      
      <script type= "text/javascript" charset="utf-8">
            window.onload = function ( ) {
                  var holder = document.getElementById( "thumb_holder" );
                  
                  for( var x = 0; x < photos.length; x++ ) {
                        var image = document.createElement( "img" );
                        image.src = "images/" + photos[ x ].name + "_thumb.jpg";
                        var a = document.createElement( "a" );
                        a.href = "JoniQuickShoppingCart.html?image=" + photos[ x ].name;
                        
                        a.appendChild( image );
                        holder.appendChild( a );
                  }
            
            }
      </script>

      
</head>

</body>

      <h1>Shopping Cart - Index</h1>
      
      <div id="thumb_holder"></div>

      

</body>      

</html>
 
jbosargAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
each time you submit a form you go on the page specified by the ACTION attribute of the form
from home page you just need an anchor
<a href="Balloons.html">Order Balloons</a>

Open in new window

and
<a href="Products.html" >Products</a>

Open in new window

0
 
leakim971PluritechnicianCommented:
place an alert in your loop to check :


for( var x = 0; x < photos.length; x++ ) {
alert("photo number " + x + " name's : " + photos[ x ].name);
                        var image = document.createElement( "img" );
                        image.src = "images/" + photos[ x ].name + "_thumb.jpg";
                        var a = document.createElement( "a" );
                        a.href = "JoniQuickShoppingCart.html?image=" + photos[ x ].name;
                        
                        a.appendChild( image );
                        holder.appendChild( a );
                  }

Open in new window

0
 
jbosargAuthor Commented:
The alert isn't even showing up when I do that. I will have to take a closer look and get back with you.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
leakim971PluritechnicianCommented:
it seems photos is empty or not from this world ;-)
0
 
jbosargAuthor Commented:
ok. I finally figured out the problem. I just started over from scratch. Now I have a new problem. I want an alert to come up if the user doesn't choose to order something. The problem I am having is that the alert keeps coming up regardless of if something is ordered or not. Can you take a look and see if you can help?
Balloons.html
0
 
leakim971PluritechnicianCommented:
based on subtotal it work fine for me, you may replace :

document.getElementById( "subtotal" ).value

by :

document.getElementById( "subtotal" ).value.length == 0

or :

subtotal = parseFloat(document.getElementById( "subtotal" ).value);
isNaN(subtotal) || subtotal == 0
0
 
jbosargAuthor Commented:
Never mind. I figured it out by adding a calculate function.
0
 
jbosargAuthor Commented:
I have just one more question: If I am supposed to create multiple pages (home page, product page, and order form), how do I link these pages together? More specifically, on the above example, how do I have the user redirected to a page requesting shipping and payment information once the "Place Order" button is clicked.

This is my last question. I promise. :-)
0
 
jbosargAuthor Commented:
I had it close, but kept screwing something up. You are awesome!!! Thanks!!!!!!
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points! Have a huge and funny week-end!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.