JavaScript Shopping Cart Scripting
How To Build a JavaScript Cart Program for HTML Web Sites
Feb 15, 2008
Any web site that sells products needs a way for the visitor to choose items and pay for them. A web shopping cart provides that facility to the web site programmer. There are 2 kinds of web shopping carts:
- Client side (using JavaScript)
- Server side (otherwise known as CGI cart).
The JavaScript shopping cart is put together with JavaScript and some HTML forms, storing the items in browser cookies, and offering payment through a third party such as PayPal.
Cart Structure
Assuming that the programmer is starting with a site that contains HTML pages of catalog entries, the first thing to do is add a series of 'Add to Cart' buttons. These should be linked to a JavaScript shopping cart function to update the cookie with the number of items that the visitor has specified. Other buttons that will be needed include:
- Remove Items
- Clear Cart
- Proceed to Checkout
- View Cart
The JavaScript shopping cart scripts implementing the above functions will generate HTML that is then placed in the appropriate part of the HTML page using the JavaScript document object, with a statement such as:
Coupled with the ability to add items to the cookie, the above technique is at the heart of the shopping cart management scripts. In addition to the individual catalog pages, the scripts also have to be implemented for a checkout page.
For this reason, the functions should be written and stored in a separate .js file that is included into each HTML page that shopping cart functionality is needed for. The cookies should be persistent, and contain a list of the items and quantities by reference number.
Advantages
Clearly, the advantages are that any HTML programmer can implement the shopping cart as long as they know a little JavaScript. The JavaScript shopping cart also needs no server side scripting, as long as there is sufficient built-in integrity checking.
Disadvantages
Keeping the prices in the script that is stored on the server ought to help security, although there is still the possibility that a web savvy visitor could interfere with the HTML and create a spoof cart if steps are not taken to validate the orders.
This is where a JavaScript shopping cart that interfaces with a CGI script (server side script) will help to prevent unwanted subterfuge. These systems usually us a PHP or Perl script to create the actual order towards the payment provider.
Payment
Most payment providers, i.e. PayPal, offer the possibility to integrate JavaScript shopping carts with their payment systems by offering a simple HTML form based interface. This usually then redirects to the PayPal system, where the visitor can fill out their credit card details and effect the order.
JavaScript shopping carts are better than the old form-and-email approach, but they do need to be implemented with care. There is no reason why a competent JavaScript and HTML programmer can not implement a cookie-based shopping cart with PayPal integration using off-the-shelf techniques.
