04 Feb

xmlhttprequest-based shopping cart

The release of WebME was pretty quiet. No-one really noticed it until I pushed it into their faces.

The biggest “woah!” piece of the CMS was the new shopping cart demo. I ran some fellow ILUGers through it, and their reactions made my day:

davewoh this is pretty
davewis this using the same kind of tech gmail uses in its ui?
kaedavew, yes
kaedavew, you should see the backend. I built that shopping cart in less than two minutes
davewkae: seriously? holy shit. i need to get my web skills back
kaedavew, check it out – /admin/ – username and password are “admin”
davewkae: mind if i meddle around creating a cart?
kaedavew, knock yourself out 🙂
kaeas soon as you’ve saved it, it should be visible on the front side
longwordSweet.

davewthis fucking kicks arse
longword!kae++
longwordWell done that man.
* kaebows
davew!kae++
davewthat’s fucking astonishing
* davew puts the price up mid-shop to see whath appens
davewsquee. it updated the price of the already-added items. 🙂
davewahh this is a fucking beauty

The major difference between this demo shopping carts and most others is that this one uses XMLHTTPRequest to manage the basket and items.

In every shopping cart I’ve seen before, doing a simple thing like “add this to my basket” usually requires a full reload of the page, with all associated images, scripts and other excess data. With this demo, though, all that is sent to the server is the request to add another copy of that item to the basket, and the server returns the new basket list.

This technology is also used to grab item data, category contents; in fact, everything you see in that demo is managed through XMLHTTPRequest.

A major plus of this method is that the chore of shopping online is very much streamlined for any user of it. DSL and faster users will probably only notice that the experience is much smoother (in fact, that’s one of the reactions I was given yesterday). ISDN, 56k and lower, though, should notice a dramatic increase in usability.

Accessibility-wise, this is still not useful – for the last two weeks, I have been concentrating on the XMLHTTPRequest side of things, getting it to where I want it in Firefox. It will not work in non-JavaScript browsers, and the JavaScript browser must support XMLHTTPRequest calls.

Firefox, Mozilla, Netscape, etc support this mechanism. Recent versions of Opera should also work. Thanks to the work of Dean Edwards, IE5+ should also work. There may be minor tweaks to be worked out, but I’ll take care of them.

Non-JavaScript browsers will ave to wait for the weekend. I will write that version up then. Of course, the benefits of XMLHTTPRequest will be lost on them… but at least users of old browsers, or accessible browsers, should be able to shop with some degree of comfort.