How can I implement a shopping cart in AJAX using jQuery?

Question

I am in developing a shopping cart.

Every Product has a Price and a SubCategory.

Product:

ID Price    Product No ProductName
1  250.5$   esp1       Electronic Machine 
2  500.0$   esp2       Scanner

A user can choose the product by selecting any of the above Products.
There is also a CommonProduct associated with each Product.

CommonProduct:

Common_id   Price  Name
cs1         1.2$   Addional_Item1
cs2         5.0$   Additional_Item2

After a selection is made, the shopping cart will look like this:

 Qty  Name                 Price    
 1    Electronic Machine   256.7$
      Additional_item1
      Additional_item2     
 1    Scanner             505.0$
       Additional_item2  

I need implementation ideas for the above process. It is very tough for me to integrate Product with Common Product.

Does anyone know of a good way to do this using AJAX?

Answer 1

Just as a very general way of doing it:

Build web services with which to interface. Use JQuery to interact with the web services. Be careful to require some synchronicity to the methods. For example, you can't update quantity if the item is not in the cart, or you can increase quantity after the order is placed.

Answer 2

You should create a database table to store the items in a customers shopping cart:

CartItem id(Primary Key), customer_id, product_id, quantity

And another table to store the common products for each item in the cart:

CartCommonItem cart_item_id(Primary Key), common_id(Primary Key)

And then make a script that generates json, xml or even html for your jquery ajax request.

Answer 3

Building on what Greg said, you could build a simple js object that looks a little like this...

Cart = function(){

    this.add = function( productid ){
        //JQuery Ajax method via PUT
    }
    this.remove = function( id ){
        //JQuery Ajax method via DELETE
    }

}

This CRUD object would be the JS interface to your server side cart which could/should implement a RESTful interface.

As for displaying the common product, on the server return an XML response, that contains the common products. This XML response for the adding the Electronic Machine could something like this

<root>
   <product price="250.0">Electronic Machine</product>
   <commonproducts>
       <commonproduct price="1.2">additional_item 1</commonproduct>
       <commonproduct price="5.0">additional_item 2</commonproduct>
   </commonproducts>
</root>

Use Case: Buy Sanner

Cart = new Cart();
//Do ajax call
xmlResponse = Cart.add(1);

//Parse XML response and get an array of products
commonProducts = $(xmlResponse).find('commonProducts');

//Iterate over the array
$().each( commonProducts, function(v,i){
    //Format them as you please
})

An Alternative is to separate, this into two methods, and provide another interface for querying if a product has common products, and simply return a success or failure response to the CRUD methods.

Hopefully that was useful and made sense!

Answer 4

You can, but the better question here is should you?

In 2007, usability expert Jakob Neilsen studied AJAX carts and found that users mostly found them to be confusing.

Just a thought.