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:
- That some payment gateways require little more than submission of a form with purchase information. Users can be directed to a secure page at the gateway upon which to enter their credit card information securely;
- That shopping carts don’t have to be challenging perl scripts that are (in my opinion) a little beyond the average Joe / Joanne. They can in fact be JavaScript and plonked right into the <head> of your document; and
- The availability of FREE JavaScript shopping carts on the internet that require very minimal configuration, and are well within the grasp of anyone who has ever used developed an HTML form. Such carts can handle multiple orders, carry information from page to page (via an included cookie), and optionally include tax and freight calculations all the way to the gateway.
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:
- Created an order form page, where visitors to my site could select the type and quantity of goods they would like and “add to cart”. The HTML <form> details were very simple, and can be copied directly from the dummy site used as an example;
- Created a “manage cart” page. Okay, maybe “create” is a stretch; all I had to do was to copy and paste the HTML from the supplied dummy page into my own. This page automatically displays the contents of the cart with an option to remove items, continue shopping, or progress to the checkout;
- Created a “checkout” page in much the same manner as above. This is the page containing the submit button that sends form data to the payment gateway. I added form fields such as name, address, phone, etc and used the simple form actions and field names that the gateway detailed on its support pages.
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:
- Find a JS Cart. The one I used was free from NOP Design;
- If you want to add credit card facilities (and I must stress that you could still make good use of the cart without accepting credit cards and utilising FormMail), shop around the banks and find the best deal. Your bank will probably direct you to their preferred gateway partner, as was the case for me;
- Find out the gateway’s requirements. The cart I used was already set to go for PayPal and a few others.
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 http://www.garybadger.com/.
Cheers,
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".
