How do I implement CrateAndBarrel.com as well as a shopping cart?

We are looking for an approach to implement a shopping cart that keeps the shopping items at the bottom of the page, much like CrateAndBarrels

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

The visitor should be able to add a product to the cart by clicking the "+ Add to Cart" button. In my opinion, for CrateAndBarrel, the bottom shopping cart is indeed a flash object. However, I wish we could find a way to implement this in an ajax mod if possible.

We are not an expert in Web 2.0 material in any way and are looking for some guidance on how to implement this feature. Our consultant suggests using a frame to implement it.

  • If you were me, how would you implement this feature?

    • A. Common Web Forms Page
    • B. Use Frame or IFrame.
    • C. HTML and Flash, same as CrateAndBarrel
    • D. AJAX
  • Some simple explanation of how these components should work together will be clear.

+1


a source to share


2 answers


1) Personally, I would use Ajax (and I'm pretty sure CrateandBarrel should do that and only use Flash to render the cart) - weirdly, although my Firefox is up to date, it won't let me use my site in that)

You can then display the cart with an absolutely positioned DIV at the bottom of the viewport.

You can use a frame, but I think a perfectly positioned DIV would be the best solution.



(2) As Adam Papa says, when an element is added (via Ajax), the cart can be redrawn (maybe a JSON call to get the contents of the cart?).

And definitely use a javascript framework.

Edit: And don't forget to make it cleverly degrade for anyone without javascript!

+1


a source


I would definitely go with AJAX. Have a look at jquery or one of the other frameworks to help you get most of the work done.



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

+2


a source







All Articles