0

この素敵な小さなデモを拡張することにより、概念実証として「クイック」javascript ショッピング カートを作成しようとしています。 http://www.99points.info/2010/12/ajax-shopping-cart-with-jquery-and-php/

カート内のアイテムの「タイプ」の概念をこれに拡張しようとしているので、アイテムとオプションがあります。好きなようにオプションを追加できますが、任意の項目タイプの 1 つだけです。そのため、'Arrays' 値を多次元配列に変換しようとしていて、JavaScript の知識の壁に実際にぶつかっています。

私が構築しようとしている配列は、(私が思うに) この [itemtype][itemid]; のように見えるはずです。

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

別の「アイテム」を追加しようとした場合、前のアイテムを削除したい場合は、新しいアイテムを通常どおり追加できます。この例では、[itemid] を使用して DOM をトラバースし、値を取得してカートを再計算し、DOM から ID を削除します。

したがって、これを行うために、例のカートの追加/削除の if 呼び出しの前に if チェックを行って、基本的に「アイテム」が配列内にあるかどうかを確認します-これを検出して、識別された [itemid] を取得します配列[およびDOM]から削除できます。

したがって、基本的に、値を正しくプッシュしているかどうかはわかりませんが(見つけていますが)、見つけたときに itemID が返されません。

$(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;
}
}

画面上のアイテムの HTML が拡張され、'type' クラスが含まれるようになりました。

<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>
4

1 に答える 1

0

アイテムのカスタムJavaScriptオブジェクトを作成し、optionsという配列プロパティを指定することをお勧めします。

次に、不安定な配列アプローチを使用する代わりに、アイテム全体を追加または削除することに対処できます。

さらに良いのは、配列をスキップして、すべてのオプションのプロパティを定義することです。

これが一例です。それで、あなたの「アイテム」がシャツだったとしましょう。

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]);

ご覧のとおり、プロパティをその場で追加して変更できます。プロパティを関数に設定することもできますshirt.color = function () {Code here}。

繰り返しますが、これは1つのアプローチです。JavaScriptだけでなく、オブジェクトを操作する方法は他にもいくつかあります（上記のリンクを参照）。

于 2012-12-24T18:14:53.643 に答える