SimpleCart JS - items dropping out of shopping cart

[galahad2]

SimpleCart issue

I’m using SimpleCart Javascript-based shopping cart system on a site and have found a major problem which appears to be related to browser cookies and the ability of the code to successfully hold a certain amount of data in the cart.
Basically I can add up to 3 or 4 different items into the cart but if I try to add any more, although it initially says the item has been added and the number of items increments by 1, if I then go to the cart page the item isn’t there- it’s as if it drops out of the cart if I go to the cart page, or indeed any other page.
This happens regardless of the browser being used.
The problem is documented here along with some suggested solutions, which unfortunately didn’t work for me:
[stackoverflow.com...]
I tried setting the Local Storage method as suggested, and that actually made the issue worse- it dropped every item from the cart and no more could be added.
On further investigation I found that it’s definitely because of the amount of data sent through the browser via a cookie. This is the code from the SimpleCart JS file that sends the item into the cart and is supposed to keep it there unless removed:

function ShelfItem(){
this.id = "s" + simpleCart.nextId++;
}
ShelfItem.prototype = {

remove : function () {
simpleCart.Shelf.items[this.id] = null;
},
addToCart : function () {
var outStrings = [],
valueString,
field;

for( field in this ){
if( typeof( this[field] ) !== "function" && field !== "id" ){
valueString = "";

switch(field){
case "price":
if( this[field].value ){
valueString = this[field].value;
} else if( this[field].innerHTML ) {
valueString = this[field].innerHTML;
}
/* remove all characters from price except digits and a period */
valueString = valueString.replace( /[^(\d|\.)]*/gi , "" );
valueString = valueString.replace( /,*/ , "" );
break;
case "image":
valueString = this[field].src;
break;
case "Thumb_item":
break;
    case "Description":
break;
    case "description":
break;
     /* don't store "thumb" and "description" in the cookie */
default:
if( this[field].value ){
valueString = this[field].value;
} else if( this[field].innerHTML ) {
valueString = this[field].innerHTML;
} else if( this[field].src ){
valueString = this[field].src;
} else {
valueString = this[field];
}
break;
}
outStrings.push( field + "=" + valueString );
}
}
simpleCart.add( outStrings );
}
};

I experimented by setting the valueString to null. When I did that, obviously most of the fields didn’t get through into the shopping cart, but I found that now I could add up to 5 different items into the cart.
So the issue seems to be down to the amount of data that the Simple Cart can send through as a cookie.
Has anyone else had this issue with Simple Cart?
Apparently getting the site re-done with a proper ecommerce system is a non-starter as the client won’t pay for it.
Any help appreciated… thanks…

[Fotiman]

I've never used SimpleCart JS before, but this seems like a terrible solution. If you're going to rely on a solution that stores values in cookies, then you have be aware of the 4k cookie limit. In my opinion, the best solution (apart from a different solution) would be to modify the cart code to store less data, and then when/if you need to display more info to the user, use some unique values from the cart to fetch values from the server. I can't tell from this code how you're creating each ShelfItem, so I can't tell what "fields" each ShelfItem will have. Can you post how you're using it with some sample data?

My guess is that you'll want to trim down the cases in the switch statement to only include very specific information. For example, I would remove the default case entirely, then add only cases for the name and quantity. Don't store the price, as that should be dictated by the server (that is, you may need to request that info again from the server if you want to show what's in the cart, but it should not have any real semantic value). The result would be something more like this:

function ShelfItem() {
  this.id = "s" + simpleCart.nextId++;
}
ShelfItem.prototype = {

  remove: function() {
    simpleCart.Shelf.items[this.id] = null;
  },
  addToCart: function() {
    var outStrings = [],
      valueString,
      field;

    for (field in this) {
      if (typeof(this[field]) !== "function" && field !== "id") {
        valueString = "";

        switch (field) {
          case "name":
          case "quantity":
            if (this[field].value) {
              valueString = this[field].value;
            } else if (this[field].innerHTML) {
              valueString = this[field].innerHTML;
            }
            outStrings.push(field + "=" + valueString);
            break;
        }
      }
    }
    simpleCart.add(outStrings);
  }
};

[Fotiman]

Note also that I moved where the values get pushed onto outStrings. This prevents it from adding extra useless data that has no valueString (which, in and of itself should probably free up a lot of wasted space).

[galahad2]

Thanks. I actually did try breaking the code (with case:description, break - for example) as per one of the recommendations on the Stackoverflow site post... but that didn't work even though it was no longer passing through that particular data. I will try your solution and see how I get on. That said, I agree- it's a terrible solution for a shopping cart system!

[galahad2]

Ok- some progress. Can now add more than just a few items to the cart. Only thing I'm trying to sort now is that the image thumbnails for the products aren't being pulled through. I tried adding case "thumb": to the above so that it collected that as well, but on the shopping cart page it just shows a broken image link. However, that's a less serious problem... need to fix it though. Thanks for your help so far.