I’m just finishing off a shopping cart for an Irish examination papers website, and was thinking about what I have learned from this site and how I could improve it in future sites.
One of the things I learned in this one is that the basket of a shopping cart must not be visible at all times, as it can get quite large. In the present example, I have solved this by hiding the basket, unless explicitly displayed (see the "[show]" link in the Basket area (one you have added something to the cart)).
I was considering going a step further in the next project, though – maybe just displaying a basket icon in the top-right of the page, which symbolises the shopping cart – clicking on it would open up a view of the basket.
Then, it occured to me that it could get very user-unfriendly – how would the shoppers know where to look for their stuff?
The answer is that I would have to show them.
In Microsoft’s Windows Update site, when you click to add an item to the product list to download, the item appears to float up and into a drop-box, giving a very good analogy of putting an item into the box for later. This solves two problems – first, it shows that something is actually happening (which can be a problem in AJAX!!), and secondly, it shows where to look for the item.
So, I’ve written a simple function which can do something similar.
Here is the demo
What it does is that when you click on an action link, it "shows" a box being placed in another box. I will use this in future shopping carts to "show" items being placed in the cart.
The usage of it is incredibly simple. All you need to do is link toÃ‚Â this file, and start off the thing with this:
In the above, "from" is the id of the element being placed in the other element "to".