Jquery Shopping Cart插件：实现会话管理

Question

Am using jquery shopping cart http://plugins.jquery.com/project/smartcart2 Can anyone help me in implementing onAdded, onRemoved, onUpdated methods in order to make Ajax call to maintain session on the server side. I make the Ajax request on the server whenever an object is added/removed/updated and get the data back in JSON format. I update the qty like obj.attr("qty", eval(msg)[1]); with the updates from server. However, if i hit refresh or the table data is repopulated the cart items are no longer there. So, the question really is how to populate the data from session so that the product would still remain in the shopping cart upon refresh etc.

$('#SmartCart').smartCart({ 
onAdded: function(pObj,quantity){ cartAdded(pObj,quantity);}, 
onRemoved: function(pObj){ cartRemoved(pObj);},
onUpdated: function(pObj,quantity){ cartUpdated(pObj,quantity); },
});

function cartAdded(obj,qty){
var product_id = obj.attr("pid");
var quantity = qty; 
// Ajax calls for adding product to cart
function(pObj,quantity){
    cartAdded(pObj,quantity);}
}

function cartRemoved(obj){
var product_id = obj.attr("pid");
// Ajax call for removing product from cart
}

function cartUpdated(obj,qty){
var product_id = obj.attr("pid");
var quantity = qty; 
// Ajax call for updating product on cart
}

function cartAdded(obj,qty){
            var partNum = obj.attr("partNumber");
            var quantity = qty;                
         $.ajax({
        type: 'POST',
        url: "json/sessionManager",
        data : "partNum=" + partNum + "&qty=" + quantity,
        dataType: "text/json",
        success: function(msg){
            obj.attr("qty", msg[1]);
        },
        error: function(httpRequest, textStatus, errorThrown) {
           alert("status=" + textStatus + ",error=" + errorThrown);
        }
    });  
        }

I would highly appreciate recommendations around the same.

Answer 1

1. Implement your cart on server side.
2. Keep your cart objects (products) in a collection or something.

3. Every time an Ajax request arrives to server side:

   • Get data (product_id,quantity, ...etc) from request.
   • Get operation type (add,remove ..).
   • Check for data validity.
   • Do required server side business (update db, call web-service etc).
   • If everything is fine add/remove specified product to/from your collection.
   • Convert your server side cart to JSON and write to response of Ajax call.

4. Every time an JSON response arrives to client side:

   • Update your cart with new data.

---

For the Ajax part. Use jQuery Ajax() function

$.ajax({
   type: "POST",
   url: "cart.jsp",
   data: "p_id=SKU001&quantity=4",
   success: function(msg){
     alert( "FOUR SKU001 ADDED TO CART");
   }
 });

---

Edit: Ooh i see. product_id is undefined means your obj.attr("pid"); is not working.

This plug-in uses hidden HTML inputs for product definitions. (plain stupid if you ask me) This inputs have some pseudo attributes which you can get by obj.attr("pid"); . If there is no input in your form or your input does not have that pseudo attributes your code fails.

BE SURE YOUR HIDDEN HTML INPUTS HAS THIS PSEUDO ATTRIBUTES.

For example:

<div id="SmartCart" class="scMain">
  <input type="hidden" pimage="products/product1.jpg" pprice="2299.99" pdesc="" 
    pcategory="Computers" pname="Apple MacBook Pro MA464LL/A 15.4" pid="100">

  <input type="hidden" pimage="products/product6.jpg" pprice="2699.99" pdesc="" 
    pcategory="Computers" pname="Sony VAIO 11.1&quot; Notebook PC" pid="101">
  <input type="hidden" pimage="products/product3.jpg" pprice="550.00" pdesc="" 
    pcategory="Cameras" pname="Canon Digital Rebel" pid="102">
</div>

From the authors documentation:

Description:Text marked bold are the pseudo attributes that describes about the product. Like product name, price, description etc.

• pid : Product ID
• pname : Name of the product
• pdesc : Description of the product
• pprice : Price of the product
• pimage : Product image source
• pcategory : Category of the product

You can add more product details by adding new attributes to the input element, and so you can show them on product list or cart by editing the template. You can customize the pseudo attribute names, and configure it on the plug-in file on the Attribute Settings section.

Edit2: I think you have difficulties in this section of my recommendations.

Every time an JSON response arrives to client side:

Update your cart with new data.

Hidden inputs below are your data. Open another question on stackoverflow and ask

how can i modify (Create, Update, Delete) this inputs in jQuery

<div id="SmartCart" class="scMain">
  <input type="hidden" pimage="products/product1.jpg" pprice="2299.99" pdesc="" 
    pcategory="Computers" pname="Apple MacBook Pro MA464LL/A 15.4" pid="100">

  <input type="hidden" pimage="products/product6.jpg" pprice="2699.99" pdesc="" 
    pcategory="Computers" pname="Sony VAIO 11.1&quot; Notebook PC" pid="101">
  <input type="hidden" pimage="products/product3.jpg" pprice="550.00" pdesc="" 
    pcategory="Cameras" pname="Canon Digital Rebel" pid="102">
</div>

because after solving your first question asking another in the same post is bad practice .