Extending basic Javascript Cart to be multi dimensional

Question

I'm trying to do a 'quick' javascript shopping cart as a proof of concept by extending this nice little demo. http://www.99points.info/2010/12/ajax-shopping-cart-with-jquery-and-php/

I'm trying to extend into this the concept of item 'types' in the cart so you have items and options. You can add options as you like but only 1 of any item type - so I'm trying to turn the 'Arrays' value into a multidimensional array and really hitting my JavaScript knowledge wall.

The array I'm trying to build should (I think) look like this [itemtype][itemid];

[option][4567]
[item][1234]
[option][9874]
[option][14787]

If another 'item' is attempted to be added I want the previous one removed - then the new one can be added as normal. In the example the [itemid] here is used to traverse the DOM and get the values recalculate the cart / remove the ID from the DOM.

So in my attempt to do this I'm doing an if check before the example cart add/remove if call to basically see if an 'item' is in the array - which I can detect, then get the [itemid] identified so I can remove it from the array [and DOM].

So basically I'm not sure if I am pushing the values on correctly (though I am finding them) and when finding I'm not getting the itemID back.

$(document).ready(function() {

// Cart Calculator
var Arrays = new Array();

$("a.cart").click(function(event) {
    event.preventDefault();  
});


$('.cart').click(function(){

    var thisID = $(this).attr('id');

    var itemname  = $(this).find('.name').html();
    var itemprice = $(this).find('.price').html();
    var itemtype = $(this).find('.type').html();  // Added to track item type

    if(include(Arrays,itemtype) && (itemtype == "item")){
        //found an item in the cart
        var whereami = $.inArray(itemtype, Arrays);         
        // alert('Cart has '+itemtype+' in it already ' + whereami);
        alert(cartedItem+' - '+Arrays[whereami]);

    }

    if(include(Arrays,thisID)){

        var price    = $('#each-'+thisID).children(".shopp-price").find('em').html();
        var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
        quantity = parseInt(quantity)+parseInt(1);

        var total = parseInt(itemprice)*parseInt(quantity);

        $('#each-'+thisID).children(".shopp-price").find('em').html(total);
        $('#each-'+thisID).children(".shopp-quantity").html(quantity);

        var prev_charges = $('.cart-total span').html();
        prev_charges = parseInt(prev_charges)-parseInt(price);

        prev_charges = parseInt(prev_charges)+parseInt(total);
        $('.cart-total span').html(prev_charges);

        $('#total-hidden-charges').val(prev_charges);
        $('#total-'+itemtype+'-charges').val(prev_charges);

    }else{

        Arrays.push(thisID,thistype);

        var prev_charges = $('.cart-total span').html();
        prev_charges = parseInt(prev_charges)+parseInt(itemprice);

        $('.cart-total span').html(prev_charges);
        $('#total-hidden-charges').val(prev_charges);
        $('#total-'+itemtype+'-charges').val(prev_charges);

        $('.register .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="/Assets/remove.gif" class="remove" Title="Remove from Cart" /><br class="all" /></div>');

    }

    // alert(Arrays.join('\n'));

});     

$('.remove').livequery('click', function() {

    var deduct = $(this).parent().children(".shopp-price").find('em').html();
    var prev_charges = $('.cart-total span').html();

    var thisID = $(this).parent().attr('id').replace('each-','');

    var pos = getpos(Arrays,thisID);
    Arrays.splice(pos,1,"0")

    prev_charges = parseInt(prev_charges)-parseInt(deduct);
    $('.cart-total span').html(prev_charges);
    $('#total-hidden-charges').val(prev_charges);
    $(this).parent().remove();

    isdeath(prev_charges);

}); 

$('#Submit').livequery('click', function() {        
    var totalCharge = $('#total-hidden-charges').val();     
    $('#left_bar').html('Total Charges: $'+totalCharge);        
    return false;       
});         
 });    
});

function include(arr, obj) {
for(var i=0; i<arr.length; i++) {
if (arr[i] == obj) return true;
  }
}
function getpos(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return i;
}
}

The HTML for item on screen has been extened to include 'type' class so that can be brought in.

<div class="purchase"><div class="plastic">
<a href="" class="cart" id="10731">
 <span class="name">Box of Goodness</span>$<span class="price">85</span>
 <span class="type">item</span></a></div></div>

score 0 · Answer 1 · edited May 23 '17 at 11:43

I would reccomend that you create a custom JavaScript object for your item and give it an array property called options.

Then you could deal with adding or removing the item as a whole instead of using a wonky array approach.

Even better would be to skip the array and just define properties for all of the options.

Here is one example. So lets assume your "item" was a shirt.

var shirt = {};
shirt.type = 27;
shirt.size = "large";
shirt.color = "red";
shirt.options = []


shirt.color = "green";
shirt.options[0] = 45679;

alert(shirt.color);
alert(shirt.options[0]);

As you can see you can add properties on the fly and change them. You can even set properties to functions as well shirt.color = function () {Code here}.

Again this is one approach. There are several other ways to work with objects as well JavaScript(see the link above).

Extending basic Javascript Cart to be multi dimensional

1 Answers1