Shopping cart in javascript object, with an array of json object quantity of items

Question

I'm facing some problems with some shopping cart in javascript/json and ASP MVC

Scenario: The main function is to order products but is not a normal shopping cart for 1 user, it can be for 2 users, 3 users, 1 user etc, but ONLY 1 shopping cart (javascript object). Thats something that depends for specific Buyer . So the main problem is that if the Buyer buy a "cake" for user1, and then wants to buy somethin to user2 with different date and same "cake", the product will be "2 cakes" but for the second user, and the first user lost the "cake".

I need to make the cake user specific and date specific too. So if Buyer buy a cake for user1 for 2014/05/01 (using a datepicker for example), and then buy a cake for user2 for 2014/05/02 (using a datepicker for example), the quantity of the product will be 1 for every user and not 2 cakes with the quantity in the array.

Actually I'm using a javascript object for the shopping cart like this

var ShoppingCart = {
    BuyerID: 1, //I will handle this later
    StoreID: 1,
    Total: 0,
    ShoppingCartItems: [] //array with json objects
};

Then I'm using a function to push to the array the elements I need on a button

function AddItem (ProductID,ProductName, Description, Price, Quantity, StoreID){
       var UserID = $("#hiddenUserID").val(); //e.g. = 1
       var ProductDate = $("#hiddenDateField").val(); //e.g. = 2014/05/01
         ShoppingCartItems.push({
            "ProductID": ProductoID,
            "ProductName": ProductName,
            "Description": Description,
            "Price": Price,
            "Quantity": Quantity,
            "StoreID": StoreID,
            "UserID": UserID, //this will change later
            "ProductDate": ProductDate //this will change if the buyer choose another day
        })
}

This function works everytime the Buyer clicks on a button. The products are loaded with ajax, that's not the problem. After the user select from products a new array will be created with the product selected and all the specifications I use. So I have 2 problems

If the Buyer choose for example 1 cake, but he forgot he needed 2 cakes, if he click again the 2nd cake the array will push a new element or another product with quantity of 1

• 1 Cake (for userID = 1, and date 2014/05/01)
• 1 Cake (for userID = 1, and dae 2014/05/01)

I want if the product with the same ProductID, userID and date, update the quantity to 2 cakes because the second problems originates from the first one, I need to update quantity by the ProductID, userID and date because if the Buyer is planning to buy a cake for every user, the product needs to be separated, for example this way it's wrong:

---

Products for userID = 1

• 1 cake (for userID = 1, date 2014/05/01)
• 1 cake (for userID = 1, date 2014/05/02)
• 1 cake (for userID = 1, date 2014/05/02)

Products for userID = 2

• 1 cake (for userID = 2, date 2014/05/01)

---

I want the array to have the quantity separated for productID, userID and date so each product need to have a "link" between the userID, and the date to have something like this:

Products for userID = 1

• 1 cake (for userID = 1, date 2014/05/01)
• 2 cake (for userID = 1, date 2014/05/02)

Products for userID = 2

• 1 cake (for userID = 2, date 2014/05/01)

So If the user1 and user 2 have the same product for the same date, I need a validation to separate the quantity for each product by userID and DATE, that's the big problem.

---

Actually Im using MVC so this way is the best way to send with json and ajax to a specific model (for modelstate.isvalid). So this code is "tested" with the things I need for correct data to the database. Hope someone can help me with this.

Thanks in advance

Answer 1

When you push a new item to the cart you need to compare it's properties to the objects in the cart and if the product id, user id, and date match, then you want to add the new quantity to the old quantity of the old object in the array instead of pushing a new one. Alternatively you could post process the cart array after an item is added and merge duplicates while adding their quantities. I'm not sure which method is better.

function AddItem (ProductID,ProductName, Description, Price, Quantity, StoreID) {
  var merged = false;
  var UserID = $("#hiddenUserID").val(); //e.g. = 1
  var ProductDate = $("#hiddenDateField").val(); //e.g. = 2014/05/01
  var newItemObj = {
    "ProductID": ProductID,
    "ProductName": ProductName,
    "Description": Description,
    "Price": Price,
    "Quantity": Quantity,
    "StoreID": StoreID,
    "UserID": UserID,
    "ProductDate": ProductDate
  };
  // loop through items in cart
  for ( var i = 0; i < ShoppingCartItems.length; i++ ) {

    // if product ID, user ID, and date are the same
    if ( ShoppingCartItems[i].ProductID   == newItemObj.ProductID &&
         ShoppingCartItems[i].UserID      == newItemObj.UserID &&
         ShoppingCartItems[i].ProductDate == newItemObj.ProductDate ) {

      // add the quantity of the new obj to the old one
      ShoppingCartItems[i].Quantity += newItemObj.Quantity;

      // if two items are merged, set a flag
      merged = true;
    }
  };
  // if no merge happened, just add the item normally
  if ( !merged ) {
    ShoppingCartItems.push( newItemObj );
  }
}