How to implement CrateAndBarrel.com alike shopping-cart ?

Question

We are looking for approach to implement shopping-cart that keep shopping items at the bottom of the page, just like CrateAndBarrels

http://www.crateandbarrel.com/family.aspx?c=837&f=28291

The visitor should be able to add shopping item to the cart by clicking the item's "+ Add to Cart" button. From my understanding, for CrateAndBarrel the bottom shopping-cart is indeed a flash object. However, I wish we could find a way to implement this in ajax-fashion if possible.

We are not expert in anyway in web 2.0 stuff and looking for some guide to implement this feature. Our consultant suggest we use frame to implement this though.

1. If you were me how would you implement this feature ?

   • A. Plain WebForms page
   • B. Use Frame or IFrame.
   • C. HTML and Flash, just like CrateAndBarrel
   • D. AJAX

2. Some simple explanation on how those components should collaborate will be appreciated.

Thanks.

Answer 1

I would definately go with AJAX. Look at jquery or one of the other frameworks to help you do most of the work.

I would create a method to draw the bottom panel. This would then be called when the page loads, with an asynchronous call to get the cart contents. When the user adds an item to the cart, you could either refresh the page (which would re-draw the panel) or call an update method to redraw the cart contents.

Answer 2

1) Personally I would use Ajax (and I am pretty sure CrateandBarrel must be doing that, and using Flash just to render the basket) - weirdly although my Firefox is up to date it won't let me use their site in that)

You can then render the basket with an absolutely-positioned DIV at the bottom of the viewport.

You could use a frame, but I think an absolutely positioned DIV would be a better solution.

(2) As Adam Pope says, when an item is added (via Ajax) the basket can be redrawn (maybe a JSON call to get the basket contents?).

And definitely use a javascript framework.

Edit: And remember to let it degrade gracefully for anyone who does not have javascript!