The project I’ve been working on for quite a while now at work has just been completed, and it’s now live for you to play with…
PenFinder lets you find pens and other products by a whole lot of different methods. You could find, for example(s)…
…or pretty much any other combination you fancy.
The Code
I won’t go into much detail, because it would probably be tedious for you, but PenFinder is full of Web 2.0 stuff, using AJAX to keep the page updated without all that tedious time spent submitting the page and waiting for it to come back with your results. For users, it just means that everything feels a bit more responsive than such a page otherwise would.
Usually, though, that brings one big problem with it – the URL never changes, so you can’t bookmark the page, and people couldn’t email a link to the search results to a friend. Since that’s how a lot of our customers get to us, that would be a Bad Thing. So, I used a neat little trick I found. Each time you update the list of options you’ve picked, or change the sort order, the code doesn’t actually regenerate the list – it just modifies the bit after the hash symbol on the URL. Another bit of code is running every second, and it finds the changed URL, and uses that information to rebuild the list of products for you.
The upshot of that, though, is that if someone sends you a link to the page for the sort of pens they think you’d be interested in, you can click the link. The page will first load up just as if nothing had been selected, but within a second, it will notice the URL, update the selected options, and rebuild the product list. You’ll see it happen if you watch carefully as you go to any of the links above – the boxes all load blank, with no list of pens, but after a second it all changes.
There are still a few things we know we need to improve, but it’s pretty usable as it is – give it a go, and have fun.