Contributor tutorial.
By Gary Badger on 20:07:2003

Tutorial: JavaScript Shopping Cart.

I have developed a few small-business websites over the last couple of years. All have been predominately informational, but as far as converting “information” into “sales revenue” they were limited to e-mail or submission via FormMail. Nice and somewhat effective, however tough to count on for a successful sale. The true eCommerce world where users enter credit card details through payment gateways (secure servers), perl / cgi / php scripts that drove shopping carts, etc, etc all seemed too difficult or expensive for a home user such as me doing HTML “for kicks”.

Recently I was asked to take one of my sites and crank it up a notch in order to accept credit cards online, and with little real option (ahh, the pressures of family!) I searched the web for information and guidance that might assist me. My desperate search led me to discover:

The JavaScript cart I found was at NOP Design. After download it is supported with instructions, a choice of languages (not restricted to English), dummy HTML pages to serve as examples, and an online forum to serve as technical support. I have been able to utilise the shopping cart to great effect on my site MattMan.

The main elements that create the cart are two JavaScript files linked to your page as a .js file, in much the same fashion as a .css external style sheet. The first file is simple, being the language file. Although my site is in English I found it convenient to edit this file to suit my predominately Australian customer base (e.g. I changed the word “TAX” to “GST”). The second file is the shopping cart itself, and by editing this it is possible to customise the script further in include / exclude tax, freight, and the names of the form fields you need to send to your payment gateway.

To install the JavaScript cart on my site I did the following:

Once uploaded, visitors to the site may choose the goods they want to order and add them to their cart. They may manage the cart by adding and subtracting items as they wish, without loosing data between pages. The script does this by using a single session cookie, and without any programming required. Picking up hidden fields in your HTML page, the cart displays any freight or tax applicable to their purchase. Visitors can move to the checkout to complete their purchase, and then be directed to the gateway to enter their credit card information directly and securely.

So, has it all been worthwhile? My client MattMan certainly thinks so! Within a month of establishing the cart online, the business received several valuable sales directly from the site. Those sales may or may not have been possible had we made the customers jump through more hoops in order to purchase their goods, but this way the goods were ordered and paid for immediately. That's money in the bank! I'm pretty sure the cart has brought the site into the true eCommerce world, converting online “information” into online “sales revenue”.

My own cart was a little fiddlier than expected as my gateway required the amount of the order in cents rather than dollars (i.e. $10.00 = 1000). However, using the HTMLfixIT forum and IRC our good friend Franki (with other contributors) was able to tweak the script to produce the desired result. From the information I’ve gathered I believe my gateway provider is pretty “unique” in relation to this requirement.

So, to take the plunge into the true eCommerce world without the need for perl script and secure servers all you need to do is:

At some time in the future I may progress to using a perl / cgi / php shopping cart. However, for now I am really happy with my JavaScript cart and consider it fits the bill perfectly.

If you found this brief little tutorial helpful, I would love to know. Please drop me a line from my page at



When the working day is over and Gary returns home from his day job, he develops websites for small businesses as well as for his own amusement. Living in Sydney Australia, Gary is a regular visitor to HTMLfixIT and credits Franki and Don for their wonderful resourcefulness "when the going gets tough".

Webpage by    Valid XHTML 1.0!   CIGHTML Links