Ajax Cart Proposal

Our Goals

The goal of this project is to come up with a better UI for adding items to the cart using AJAX.

• quick, intuitive indication that you've added something to your cart.
• probably replace the mini-cart at the top of the page with something simpler.
• still indicate what items from this page are already in your cart.
• keep all elements (quantities, prices, etc…) on both the product section of the page and the header up-to-date.
• allow for quickly checking out, viewing/editing the cart, and continuing shopping.

Examples On Other Sites

• ShopDev
  • button switches to "Added to Cart"
  • small icon appears
  • top-menu cart icon bounces and number increases
• FoxyCart
  • lightbox
  • shows entire cart with buttons to checkout
• [Blik](http://www.whatisblik.com/shop/my-crony Blik)
  • loading icon on click
  • lightbox cart, allows changing quantity
  • buttons to checkout or hide lightbox
  • cart can get very long when multiple products are added
• [Wilshire Farms](https://www.wiltshirefarmfoods.com Wilshire Farms)
  • has a floating header-cart that follows you down the page
  • products zoom up to the cart icon, pause for a second, and then disappear
  • note: doesn't (but could) work in webkit
• Threadless
  • tshirt "size" buttons add item to cart
  • loading box appears, then short note tells you what's been added to your cart
  • problems:
    • no quantity indication is given if 2 items are added
    • header-cart quantity isn't updated

Concepts

Inline mini-cart

1. Add to Cart Button on Quantity > 0
   Javascript will fade in an Add to Cart button when the quantity is changed. On sites with fewer items per product, this button would not be necessary.
2. On Click, Spinner is Activated on Button
   The button won’t be clickable anymore and an xml-rpc ajax request will be sent to add the item to the cart. When the item has been added, the text of the button could change to read “Item Added” or “Items Added” and quantity would be reset to 0.
3. “You have X items in your cart” Box Appears
   This box will indicate the quantity of items in your cart, give you the option to remove them (also using ajax), and provide a link to view the entire cart. The box would stretch-in and possibly cause the page to grow taller if room doesn’t already exist.BRBRThis box would also appear in lieu of the mini-cart to give you an indication of your cart status when you return to the product page. This avoids having to duplicate all of the product information in the mini cart.

Possible problems/solutions:

• Bumping the page down when the mini-cart is inserted. This could be made less annoying by sliding it in.
• No monetary values (extension, subtotal, etc.) displayed, and lengthy descriptions about optional cart configurations (payment plans, custom message, etc.) would be difficult to format/fit.
• We might have to figure out a way to add a Checkout link.

Lightbox

1. Add to Cart
   Could be handled like in the "Inline mini-cart" example.
2. Lightbox Appears With Items Added
   A lightbox appears with a shaded background and displays all of the items from this page in your cart. This option allows showing full product data including quantities, description, prices, subtotal, etc. Items could be removed using ajax.

Possible problems/solutions:

• Should the lightbox display all items on this page in the cart, all cart items (could be very long), or just the items added now?
• How would the mini-cart be replaced when returning to the product page? We could show a nice message above the products that gives a short summary - "You have X items from this page in your cart" or "You have 6 of X item in your cart and 9 of Y item." - with a link to "view details" which would open the lightbox.