javascript - 单击“添加到购物车”时如何检查产品是否已在购物车中并且不重复它(JavaScript localStorage Cart)

Question

我正在玩这个 JavaScript 购物车，它非常漂亮: https://github.com/gabrieleromanato/jQuery-sessionStorage-shopping-cart

它运行良好，只是我不知道添加到购物车时如何防止产品重复。

我是 JS 的新手，所以对别人来说显而易见的事情对我来说却不一定。

我不确定具体在哪里进行修改，以下是一些值得关注的可疑区域:

// Adds items to the shopping cart
handleAddToCartForm: function() {
    var self = this;
    self.$formAddToCart.each(function() {
        var $form = $( this );
        var $product = $form.parent();
        var price = self._convertString( $product.data( "price" ) );
        var name =  $product.data( "name" );
        var image =  $product.data( "image" );
        var url =  $product.data( "url" );

        $form.on( "submit", function() {
            var qty = self._convertString( $form.find( ".qty" ).val() );
            var subTotal = qty * price;
            var total = self._convertString( self.storage.getItem( self.total ) );
            var sTotal = total + subTotal;
            self.storage.setItem( self.total, sTotal );
            self._addToCart({
                product: name,
                image: image,
                url: url,
                price: price,
                qty: qty
            });
            var shipping = self._convertString( self.storage.getItem( self.shippingRates ) );
            var shippingRates = self._calculateShipping( qty );
            var totalShipping = shipping + shippingRates;

            self.storage.setItem( self.shippingRates, totalShipping );
        });
    });
},

/* Add an object to the cart as a JSON string
 * @param values Object the object to be added to the cart
 * @returns void
 */

_addToCart: function( values ) {
    var cart = this.storage.getItem( this.cartName );

    var cartObject = this._toJSONObject( cart );
    var cartCopy = cartObject;
    var items = cartCopy.items;
    items.push( values );

    this.storage.setItem( this.cartName, this._toJSONString( cartCopy ) );
},

我修改了原始代码以包含产品图像和 URL，但仅此而已。

我不太了解 session 和对象，因此希望在有人能够提供帮助的情况下了解一些相关知识。

任何帮助将不胜感激。

干杯

Answer 1

看起来您需要添加以下内容: (假设购物车类别为“cart”，否则请更改)

if($('.cart td.name p').indexOf(name) == -1) {
    // Item not already in the cart
}

可能将其放在所有内容周围的 $form.on('submit') 中，如果代码实际上将其添加到购物车的位置。您可能想告诉客户为什么他们不能再次添加该内容。

更好的解决方案可能是在页面加载时检查购物车中的商品，并隐藏/禁用现有商品的“添加到购物车”按钮。

EG:

function checkCartItems(){
    $('.cart td.name p').each(function(){
        var itemName = $(this).text();
        $('[data-name="'+itemName+'"]').addClass('disabled').attr('disabled', 'disabled'); 
    });
}
checkCartItems();

然后将“checkCartItems()”添加到addToCart函数的末尾，以便在添加项目后重新检查。