Designing the Shopping Basket


Introduction.  Most everyone has done some sort of shopping on the internet.  The cleaner and easier the shopping experience can be made for the shopper, the better.  Certain standard designs exist, but shoppers are always likely to see something different someplace.

We want the shopper to be able to see the following.

  • what they've ordered
  • how many of each they've ordered
  • what each item's attributes are
  • what the price is
  • what the total price is
  • what the weight is
  • what the total weight is

We also want the shopper to be able to take certain actions

  • add items to the basket
  • update the quantity of each item
  • delete an item
  • we could empty the basket - left this out
  • continue shopping
  • go to checkout

A bit more about each of the functions is contained in the following table.


In general, there are five major functions we want to have in our shopping basket.  They are listed in the following table.


Function Description
Add items When a shopper is on a product page and hits the order button, something needs to happen to add the product to the basket.  There are almost surely going to be some important business rules to keep in mind.
Display basket When the user actually enters the shopping basket page they need to see the items they have added to their basket and quantities and certain important attributes.
Update items If the user wants to change the quantity of an item this needs to be easy.  This option can get even more elaborate if changing attributes is important.
Remove items If the user wants to remove a particular item this needs to be possible.   Not that we all haven't visited webs where this was for some reason very difficult!
Empty basket If the user decides they want to dump the whole thing we need to provide a way for them to do this.
Continue Shopping We want the shopper to still easily move to other locations in the site to continue shopping.
Check Out We want the shopper to be able to check out.


The following table gives a diagram to help clarify these for people with a different visualization approach.



Though, we will not give the shopper the ability to empty the basket all at once for two major reasons
  • chances are the shopper will accidentally select the option
  • even if the shopper decides they don't want to buy anything we don't want them to be able to empty their basket too easily

The sequence we will follow when developing the pages is

  • create the tables
    • basket
    • basket_item
  • add an item to the basket
    • in order for the basket to display we need to have something in it
  • display the basket
    • we build this display so that we can add additional functionalities later
  • delete an item from the basket
  • update the quantity