an ajax shopping cart

I had a simple-enough prototype which we ( released for a few clients a while back (Kipa Windows, Cavan Crystal, The Strats, CBO for example).

The main points of the existing prototype were:

  • AJAX used as much as possible, to reduce page refresh times.
  • Instant-update shoppingcarts – changing the number of items doesn’t involve a refresh of the page – the basket is updated instantly.
  • The cart is dynamic, in that there is nothing client-specific hard-coded into its source.

We got a fascinating job recently – The client had a few existing sites, but he wanted a new one which was more tailored to his needs. I took this as a chance to push my (well – Webworks’ 😉) shopping cart a lot further towards maturity.

Some of the points that needed to be addressed:

  • The design of the cart must become much-more flexible. Note that the examples I quoted above all have similar designs. The client in this case had some very specific knowledge of what worked, design-wise, and what doesn’t, when selling consumables.
  • In previous carts, items were located solidly in one parent category. The new site had consumables that may correctly be located in many parents. The code was updated, then, to allow items to be created anywhere, then “multiply-located” somewhere else. Because the items were in fact all the same instances, and not just copies, it was then possible to make mass-changes instantly (updating prices, for instance).
  • A “quick select” item was created, so that by choosing a parent category, you would get a list of all the items located in that category and its sub-categories. The client chose to have just the top-level categories shown, and then a recursive list of items. However, I have coded it in such a way that it’s a matter of moments to change it to show progressively deeper categories, instead of an instant jump to the items. The idea was directly modeled on this.
  • Another interesting development was that the code for this was so large that I just couldn’t release it like that! The JavaScript caused a very noticeable delay in first-time visiting browsers. This is not-so-bad with broadband, but I had the occasion to witness it on dialup, and the delay was horrendous. I managed to split the code up into many smaller ones, each of which loaded only when needed (I’ll write something up on this at some point, I swear!).
  • This cart was the first one I’d coded which had a direct API connection to a credit-card clearing server. Up until this point, the other versions of the cart led off variously to PayPal, WorldPay, or a simple email interface (again, dynamic, and instantly switchable).
  • I won’t bother going in-depth into the admin side, as it’s not really observable by the average user. But, again, some pretty funky AJAX was used (uploading of images, for example, through AJAX).
  • Turns out I had to do a bit of work on the AJAX API Sajax in order to get my work done. Sajax was not able to handle multiple AJAX-enabled scripts. It can now 🙂
  • Shipping prices were implemented. There was some coding to do in this, but it was all pretty simple. Note that the shipping price changes instantly if you change your order in certain ways (country of delivery, for instance, or ordering above a certain amount).

Anyway… there are a few items in the above that I’ll describe in detail at some point, as the methods are probably worth sharing and improving.

There is still some work to do on the site (doesn’t work properly yet in Opera or Konqueror yet, for instance, and most definitely does not work in Links), but that’ll all be fixed soon enough.

We ( will not be releasing this under GPL yet, although the previous version, as demonstrated in the example sites above, is freely available through the webme project. We will possibly release it at some point, though.


  1. Hey,I just read your article and thought you might be interested in my experiences with AJAX applications in Kenya (mostly dialup at very high latencies). Horrendous is not the word – more like unuseable. Let me know what you think. Hafeez

  2. Hafeez, thanks for that! I have a lot of trouble writing for slow computers and slow access speeds, as the slowest active machine I have is the one I am presently typing on – a 1GHz Latitude C610 (great laptop, by the way).
    I was aware that there might be problems with the sheer amount of downloaded objects with AJAX. Your article clearly spells it out!
    With that in mind, I have been working recently on reducing the amount of HTTP requests my scripts make. I might write an article on the various methods I’ve worked out to do this for various new productions.
    Thanks a lot. Great article.

  3. Interesting ecommerce sites – just what I was looking for regarding automatic basket update. Came across this drag-and-drop  example which would be interesting. Then what about a Google Earth like interface for mapping of shop/supermarket as final stage for locating the goods (interested in your robot gardening ideas too)

%d bloggers like this: