如何检查产品是否已经在购物车中，并且在单击“添加到购物车”（JavaScript localStorage Cart）时不复制它

我正在玩这个相当漂亮的JavaScript购物车：

它工作得很好，除了我不知道如何防止产品重复添加到购物车

我是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，不过就是这样

我不太了解会话和对象，所以如果有人能帮忙的话，我希望能了解一下

任何帮助都将不胜感激

---

干杯

看起来您需要添加以下内容： （假设cart类为“cart”，否则将其更改）

如果代码实际将其添加到购物车中，那么可能将其放在$form.on（'submit'）中。您可能想告诉客户为什么他们不能再添加

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

例如：

---

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

看起来您需要添加以下内容： （假设cart类为“cart”，否则将其更改）

如果代码实际将其添加到购物车中，那么可能将其放在$form.on（'submit'）中。您可能想告诉客户为什么他们不能再添加

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

例如：

---

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

当购物车中有项目时，购物车HTML是什么样子的？项目行是否具有某种与产品相关的属性？等等，你不希望我同时购买两个相同的项目吗？我必须退房，回去，再退房？这似乎是一种糟糕的用户体验。您可能想要修改_addToCart，我不完全确定所有内容的结构，所以我不确定您需要如何检查。。。console.log（items）为您提供了什么？为什么不在“添加到购物车”中循环“items”，看看产品名称是否在那里？@Craig每个item HTML都是这样输出的item name A

@Gerrit0它没有用于购物目的，没有使用数量或价格。只是项目，选择或不选择。当购物车中有项目时，购物车HTML是什么样子的？项目行是否具有某种与产品相关的属性？等等，你不希望我同时购买两个相同的项目吗？我必须退房，回去，再退房？这似乎是一种糟糕的用户体验。您可能想要修改_addToCart，我不完全确定所有内容的结构，所以我不确定您需要如何检查。。。console.log（items）为您提供了什么？为什么不在“添加到购物车”中循环“items”，看看产品名称是否在那里？@Craig每个item HTML都是这样输出的item name A

@Gerrit0它没有用于购物目的，没有使用数量或价格。只是项目，无论是否选中。

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

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