Solved

How do I write a Shopping Cart Program in JavaScript?

Posted on 2010-11-16
10
989 Views
Last Modified: 2012-05-10
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>
 
0
Comment
Question by:jbosarg
  • 5
  • 5
10 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:jbosarg
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
it seems photos is empty or not from this world ;-)
0
 

Author Comment

by:jbosarg
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:jbosarg
Comment Utility
Never mind. I figured it out by adding a calculate function.
0
 

Author Comment

by:jbosarg
Comment Utility
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
 

Author Comment

by:jbosarg
Comment Utility
I had it close, but kept screwing something up. You are awesome!!! Thanks!!!!!!
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
You're welcome! Thanks for the points! Have a huge and funny week-end!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Scam emails are a huge burden for many businesses. Spotting one is not always easy. Follow our tips to identify if an email you receive is a scam.
In this step by step tutorial with screenshots, we will show you HOW TO: Enable SSH Remote Access on a VMware vSphere Hypervisor 6.5 (ESXi 6.5). This is important if you need to enable SSH remote access for additional troubleshooting of the ESXi hos…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now