The goal of this tutorial is to show you how to build an AJAX powered shopping cart. However, it will not be production ready. The back end requirements vary from site to site far too much to write an effective tutorial. Instead, we are going to focus on the AJAX parts.
The back end code in this tutorial acts as scaffolding for us to build the AJAX functionality, however, it can be built off of to meet your own site's requirements. In the last section, we'll discuss some possible next steps to implementing this in your own websites.
The final thing to note is that the order codes (or product codes) used in this tutorial are completely arbitrary.
The demo page shows a few different ways our AJAX shopping cart can function. It should be noted that this is not a production ready shopping cart. Due to variability of the requirements from site to site, this tutorial will only cover building the skeleton while you will have to code in the details for retrieving product names, prices, and other data that might come from a database.
Step 1 - Downloading the scripts
We're going to be using jQuery, the jQuery color animations plugin, and Thickbox. The color plugin extends jQuery to allow us to use jQuery to animate colors and Thickbox lets us create quick and easy modal windows.
Download the jQuery, color plugin, and Thickbox files and save them into the appropriate folders we just created in the cart/ directory. Make sure you download the uncompressed thickbox.js.
Your folder structure should look something like this. I have renamed some of the files but it should be pretty obvious what each one is.
Step 2 - Setup Thickbox
Since our folder structure is a little different from the default Thickbox one, we're going to need to fix some of the paths referencing loadingAnimation.gif and macFFBgHack.png.