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 ) );
},

我修改了原始代码以包含产品图片和网址，不过就是这样。

我不太了解会话和对象，所以如果有人能够提供帮助，我希望能够学习一点。

非常感谢任何帮助。

干杯

Answer 1

您似乎想要添加以下内容：（假设购物车类是＆＃34;购物车＆＃34;，否则改变它）

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

可能会在$ form.on（＆＃39;提交＆＃39;）中将其放在所有内容中，如果代码实际上将其添加到购物车中。您可能想告诉客户为什么他们不能再添加它。

更好的解决方案可能是在页面加载时检查购物车中的商品并隐藏/停用＆＃34;添加到购物车＆＃34;现有项目的按钮。

EG：

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

然后添加＆＃34; checkCartItems（）＆＃34;在添加项目后重新检查addToCart函数的结束。

如何检查产品是否已经在购物车中并且在点击添加到购物车时不重复（JavaScript localStorage Cart）

1 个答案: