So, You Want A Shopping Cart, Huh?

By Joe Burns

Use these to jump around or read it all...
[What's A Shopping Cart?]
[How Does This Shopping Cart Work?]
[The Shopping Cart Program]
[The Pages] [Altering the Pages] [Altering Pageone.html]
[Altering the Order.html Page]
[Using A CGI With the Order Form]
[A Word of Warning]

     This is easily one of the most requested items at HTML Goodies. And with good reason. The Shopping Cart is becoming a large part of Internet commerce. Anyone with a number of items to sell would want their wares in this across-page format.
     As you go through this tutorial, you'll see why I have had to wait a while to get one of these carts to hand out. They are huge undertakings that require a great deal of talent and knowledge to write. When I went out looking for a cart to use in a tutorial, I ran across a lot of free, but cheaply built items. The good ones were all a pay-for deal. Until this one showed up on my doorstep.

     This shopping cart was written by Gordon Smith for a site he used to run titled Scottish Gifts On-Line.
     I'm a big fan of Gordon's site for two reasons. (1) I'm Scottish. My name is "Burns". We have our own tartan and everything! (2) He allowed me to use this Shopping Cart programming to help you. So let's get started.


What's A Shopping Cart?

     A Shopping Cart is a series of pages that are all linked together through some sort of programming (usually PERL or JavaScript) that allows data to be transferred along with the viewer as he or she moves from page to page. For example:

     A woman enters a site. That site sells clothing. One page displays the dresses the site has for sale. Another displays the shoes, and yet another displays the accessories.
     The woman clicks to purchase a dress. The purchase is then added to her "Shopping Cart". She then moves to the shoes page and clicks to purchase a pair. That item too is added to her Shopping Cart. Finally, she moves to the accessories page and adds a scarf. After choosing the items she wants to purchase, she clicks on the order page link and a page pops up listing all of her purchases with a final price added up. That's the concept of a Shopping Cart.

     It seems like a rather simple process on this side of the curtain, but behind the scenes, it's quite a difficult task to get that purchase data to move along from page to page as the viewer shops around.


How Does This Shopping Cart Work?

     I should state it right up front, in bold text, so that there is no mistake:

This Shopping Cart Uses Cookies

     If cookies are a new concept to you, please read the cookie tutorial for a lot of important information. I make that statement because many people believe cookies are the scourge of the Internet high seas. I just see them the same way.

     Plus, if you want this Shopping Cart effect, you need to store the information somewhere as the viewer moves from page to page. The user's cookie is the easiest way to do it without inventing some new method of writing to the user's hard drive. Cookies are in wide use today and as long as your user knows you are using them, I don't see the problem. Be honest I always say.


The Shopping Cart Program

     Here's the great thing about this Shopping Cart. It is already fully self-contained and requires little assembly from you. In fact, the entire set of pages and programming were sent to me and I went in and cut away anything that wasn't specifically needed for the cart to work. I then entered a great deal of comment lines into the code. Every time you need to alter or enter a piece of information to make this script work for your needs, it is denoted right in the page's code.
     What you get here is a bare-bones template that will allow you to add your own images, text, and prices. As long as you do not alter the JavaScript programming, the cart should work straightaway.


Okay, Let's See It

     I'll let you go and play with the Shopping Cart program so you can get a feel for it, then come back and I'll tell you how to alter it. Actually, you can probably figure all this out just by looking at the source codes of each page, but I'll go through it all anyway.

     Here's what you'll be looking at:

  • The Shopping Cart is in a frames format
         And it must stay that way or you will get a warning and errors.
  • There are three pages of items you can buy.
    • Page One has only one item on it valued at $1.11
    • Page Two has three items on it valued at $2.22, $3.33, and $4.44
    • Page three also has three items on it valued at $5.55, $6.66, and $7.77
  • You add an item to the cart by clicking the button that reads "Add This Item To My Total"
  • Take a choice away by clicking the button that reads "Subtract This Item From My Total"
  • At any time, you can click to review your order and you'll see the total of what you've chosen.

     There are two ways you can view the cart in action. One link below will open the cart in a new browser window so you can flip back and forth between this tutorial and the cart items. The second link will open the cart in this window. You'll need to use the "BACK" button to return to this tutorial if you use this method as there is no return link to this page in the shopping cart.


Open the Shopping Cart in a New Browser Window Open the Shopping Cart in the Current Window


The Pages

     Welcome back. I trust you "ooo'ed" and "aaah'ed" a little bit. You'll need a series of seven items to get this to work on your server. You can download them one at a time right here or grab them all in a little Zip file. Please remember that in order for this to work, you need all the pages. The effect will not display outside of the frames format and you'll get a bunch of errors. In short -- get them all. And put them all in the same directory.
     ~~or~~


Altering The Pages

     You can go into these template pages and add text and images to your heart's delight. I won't be going into that here. What I am going to do here is explain how to alter the Shopping Cart functions so you can set prices and get the information sent to you.
     There are really only four pages you'll need to alter, the three pages with Shopping Cart items (pageone, pagetwo, and pagethree) and the order.html page.

Altering Pageone.html

     If you understand how to alter this one page, you can alter the other two Shopping Cart item pages. They all work the same. And let me state again that these instruction are right in the code on pageone.html.

     Here's the basic Shopping Cart Item format pasted from pageone.html:


<INPUT TYPE=button NAME=addbox VALUE= "Add This Item To My Total" onclick=Loc_additem('p1i1','1.11','Page_1_item_1','pageone.html')>

<INPUT TYPE=button NAME=subbox VALUE= "Subtract This Item From My Total" onclick=Loc_subitem('p1i1','1.11','page_1_item_1','pageone.html')>

You Have Ordered This Many Of This Item:<INPUT TYPE=text NAME=p1i1 SIZE=2>


Here's What's Happening

  • INPUT denotes a data input item.
  • TYPE=button denotes that it will be a button.
  • NAME= denotes a name for this item so that it can be recognized across pages. This is the "addbox."
  • VALUE= denotes what will be written on the button.
  • onclick=Loc_additem denotes that when this button is clicked, the item in the parentheses will be added.
  • ('p1i1','1.11','Page_1_item_1','pageone.html') denotes the parameters of the item represented by this button.
    • 'p1i1' -- this is the item's identifier. p1i1 stand for page 1 item 1.
    • '1.11' -- this is the item's price. At the moment it's a buck eleven.
    • 'Page_1_Item_1' -- this is the page and item identifier that will accompany this information when it moves to the order page.
    • 'pageone.html' -- ditto above. You'll see these items listed when you run the order form.
  • The second button works the same way except it subtracts the item.
  • INPUT TYPE=text NAME=p1i1 SIZE=2 denotes the little box that keeps a running total of how many of this item were ordered. Note the NAME= command. It is 'p1i1' thus linking this box to the buttons above.
     Actually, this little item:

('p1i1','1.11','Page_1_item_1','pageone.html')

is the only section you are really concerned with. It denotes the item identifier and price. If you alter it, as you will have to change the price, note that you must change each item in two or three places. See that above? If you change the price, it must be changed twice. If you change the identifier, it has to be changed three times. With me so far?

     There is no reason why you couldn't have twenty or more items on each page. You just have to come up with new identifiers for each of the items so that the Shopping Cart JavaScript can distinguish one from another. The easiest way to do it is to simply copy and paste what is above and change out the little section within the ( and the ). If you wish to lose an item, make sure you lose the entire item. Any remnants will throw an error.

     It isn't difficult, but you must be darn sure it is all correct.


Altering the Order.html Page

     This page requires a great deal of information so it can send the results of the Shopping Cart to your e-mail box. Slowly go through the page looking for sections written in all CAPS. I put them there along with some comment statements pointing out some very important parts. (Note that all items that must be changed are not commented out. Look for CAPS.)

     The biggest concern is that you make sure to change out the main FORM command that contains the mailto: section. This is set up to work just like a basic mailto: guestbook so that must be changed out with your e-mail address.

Using A CGI With The Order Form

     The author of this Shopping Cart, Gordon Smith, has also included a CGI that works with this order form. The CGI is a PERL script and is named "formmail.pl". The CGI is only available in the Zip packet from above. You'll also notice that a thanku.html page is included in the Zip packet. That is the page that the CGI will display after someone has filled out and sent the form information to you.
     Installing the CGI is chore unto itself. I have a tutorial that will walk you through the process of installing a very similar type of CGI. If you follow the format I have laid out for my CGI, you will be able to get this one up and running. But again, the CGI is only available in the Zip packet download. And no, it is not required to make this work. The order form will act as its own simple mailto: form so the information will get to your e-mail box.


A Word Of Warning

     This system is set up so that information will be transmitted. That information is not secure. That means that if someone really wanted to, they could intercept it without you knowing it. Notice there is no slot for credit card numbers on the order form. There was originally, but it has been taken down because I do not want to be responsible for anything that happens with someone's card number. If you do add a slot for a user to enter a credit card number, you do so at your and the user's own risk.

     Go with an e-mail bill after the form arrives. That will be a lot safer.


That's That...

     Good luck with this. It is a wonderful piece of work.

     I say this with every JavaScript tutorial, but allow me to say it once again as this is the number one reason why people take working JavaScripts from my site and then have trouble getting them to work.
     You must edit JavaScript in an editor with no margins, like Notepad or Simple Text. I mean no margins, not just the margins set to their widest point. If you have any margins then the script may be altered because the lines of text were not allowed to stay at the same width as they were when you grabbed the script from me. If you use margins, this Shopping Cart will not work. So please be careful that way. You'll save yourself a lot of headaches -- and me a lot of e-mail.

     Thanks again to Gordon Smith. You're a gentleman.

Enjoy!

[What's A Shopping Cart?]
[How Does This Shopping Cart Work?]
[The Shopping Cart Program]
[The Pages] [Altering the Pages] [Altering Pageone.html]
[Altering the Order.html Page]
[Using A CGI With the Order Form]
[A Word of Warning]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •