Shopping Cart

Almost all of the shopping carts available on the web run server side and therefore require server side scripting languages. In some cases the institution providing your secure credit card handling may provide you with access to a server side shopping cart that runs off of their servers. In other cases you have to implement the shopping cart on your own site. This is all very well when you have your own secure server and access to the appropriate server side scripting language but what can you do when you need a shopping cart but don't have access to either a secure server or server side scripting?

One alternative is to use a hosted e-commerce shopping cart software solution.

Another possible answer is to use a shopping cart written in JavaScript that runs right there in your visitor's browser.

Let me say right at the start that a JavaScript solution does not offer any form of security for the information gathered by the shopping cart once it is sent to the server, you still would need some sort of security module to allow the information to be transmitted securely once entered. A JavaScript shopping cart doesn't need a secure server before the point where the information is sent because until that time the information is entirely on the computer where it is being entered and is as secure as any other local files on that system. This allows the person entering information into the JavaScript shopping cart to take responsibility for their own security of the data up until they are ready to place their order instead of relying on the security of the server.

So how do we get a JavaScript shopping cart? Well I have written one that you are welcome to download and use in return for a donation toward the cost of my maintaining this site. You are also welcome to try out this sample Shopping Cart (which opens in a new window) so you can see how it works.

Note that this script has now been significantly rewritten to work less obtrusively with modern browsers. If you need a version that works with IE3/4 and Netscape 3/4 then please contact me about getting a copy of the prior version.


There are quite a few files that make up the shopping cart so I will go through them one by one to let you know what each is for and what you can do with it. Let's start with the html pages.

index.html The shopping cart uses frames so that the selected values can be passed from page to page within a javascript attached to the frameset. The only things you need to alter here is the title for your shopping cart.

navigate.htm This is the navigation panel that appears at the left of all of the pages within the shopping cart. You will want to change the list of pages that this lists to include all of your product pages in place of my two examples but you need to keep the home link at the top and the order link at the bottom for the shopping cart to work and also the link to my site that uses build.gif.

welcome.htm This is the home page for the shopping cart. You can do whatever you like with this page.

order.html This is the page that displays the list of everything that has been ordered and allows the order to be submitted. You may want to add or remove fields from this page. Note that the Save Customer Information for future use check box allows the customer information fields to be stored in a cookie on your visitor's computer so that the fields will be filled in for them when they next visit. This is the only use of cookies by this shopping cart.

The page is coded to use my form to mail php script the free version of which is included in this download. Alternatively you can modify the code to use any form to mail script.

thanks.htm This page is displayed after the order has been sent to thank your visitor for placing the order. The page can contain whatever you like as long as the onload parameter on the body tag is kept as this resets the order counts back to zero so that the same order doesn't get submitted multiple times.

box.htm and basket.htm These are examples of pages where the items that can be added to the cart are displayed. You will need to create your own pages from these and replicate and alter the labelled section of code for each product that you are selling on your site. You can change whatever else you want on the page as long as you keep the JavaScript references in the head section of the page and the onload parameter on the body tag. The onload parameter will need to be customized for each page.


Now let's look at the JavaScripts, what they do, and what you can customize.

common.js This is a one line JavaScript used by all of the pages to ensure that they get displayed within the frameset and that the shopping cart functions will be available.

cookie.js This is my standard Cookie Toolbox JavaScript that is used by the frameset to process the cookie where the customer information is stored between visits.

cart.js This is the main shopping cart module which is attached to the frameset so as to be accessible from all pages. There are two field in this that you can change. The first is called max_items which you will need to change if you have more than 50 items for sale as this controls the size of the array where the order is stored. The second is called decimals and controls the number of decimal places for some of the money amounts.

update.js This JavaScript is attached to each of the pages containing the products that can be ordered and contains the functions to link the "add/subtract from order" buttons to the rest of the shopping cart. You will need to set up the init routines for all of your product pages to initialize the product order counts. These init routines are called from the onload within the corresponding product page.

review.js This JavaScript displays the details of the products that have been ordered in the order page. If your site is not English or you want to change the wording displayed then you can change the entries at the top of the script.

validh.js This script validates the customer and shipping information to ensure that all mandatory fields are entered before the order is sent. The script also contains code to make sure that the order is only sent once. If you add extra fields to the order form then you may wish to add to the validation.


So that's the info on the individual files. I will finish off with a couple of remarks about a couple of peculiarities of this script as compared to a server side shopping cart.

Your visitor needs to add and remove items from their shopping cart using the Add One and Remove One buttons at the bottom of each product description. They will need to press the button once for each product they wish to order so if they want five of a particular product they will need to press the button five times. The remove button can only reduce the count back to zero, any additional removes will be ignored.

If your visitor selects to reload/refresh a page while within the shopping cart, all of the items that they have ordered so far will be cleared. Refreshing/reloading a page forces the initial setup code for the cart to be rerun and zeros out the order. The "cancel order" option at the bottom of the order page has exactly the same effect (as does the onload processing in the thanks page). You will probably want to let your visitors know that the refresh/reload option in their browser is equivalent to cancelling the order.

Finally, because the prices are coded into your HTML pages it is possible (although unlikely) for someone to create their own copy of the page containing different prices and use that to generate their order. You will need to verify that the correct prices have been quoted before processing the order.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow