如何通过 AJAX 在 shopify 迷你购物车弹出窗口中附加产品订单项？

Question

我是 Shopify 新手。我今天尝试了很多脚本但没有成功。我还没有找到任何相关教程或文档如何创建迷你购物车以通过 AJAX 在点击变体上添加产品线项目。我想单击产品变体，它会在弹出窗口中添加产品最小购物车详细信息 [注意：它不是购物车页面。]。

这里是图片示例

这是我的代码：

$(function(){
    $('.varients-item').on('click', function(){
        var cartCount = {{ cart.item_count }};
        var obj = $(this);
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            data: {
                quantity: 1,
                id: $(this).attr("data-variant")
            },
            dataType: 'json',
            success: function (data) {
                $.ajax({
                    type: 'GET',
                    dataType: 'jsonp',
                    url: '/cart.json',
                    success: function(cart){
                        $('.cart-item-count span').html(cart.item_count);
                        cartCount++;
                        var newCartCount = $('.cart-item-count span').html(cartCount);
                        var item_count = cart['item_count'];
                        var total_price = cart['total_price']/100;

                        var cart_list = [];

                        for( var i = 0; i < item_count; i++ ){
                            if ( cart['items'][i]['id'] != null ) {
                                var item_id = cart['items'][i]['id'];
                                var product_title = cart['items'][i]['product_title'];
                                // var product_title = data['items'][i]['title'];
                                var product_handle = cart['items'][i]['handle'];
                                var quantity = cart['items'][i]['quantity'];
                                var line_price = cart['items'][i]['price']/100;
                                var url = cart['items'][i]['url'];
                                var image_url = cart['items'][i]['image'];
                                var variants = cart['items'][i]['variant_options'];

                                if ( product_title == 'Gift Wrap' ) {
                                    var product_url = product_title;
                                } else {
                                    var product_url = '<a href="' + url + '">' + product_title + '</a>';
                                }

                                var options = [];
                                for ( var o = 0; o < variants.length; o++ ) {
                                    var selected = cart['items'][i]['variant_options'][o];
                                    if ( selected !== 'Default Title' ) {
                                        options.push( selected + '<br>' );
                                    }
                                }
                                var selected_options = options.join('');

                                cart_list.push(
                                    '<div class="cartpopup-item d-flex flex-row">\
                                        <div class="cartpopup-item-image">\
                                            <a href="' + url + '">\
                                                <img class="img-fluid d-block" src="' + image_url + '"  alt="' + product_title + '" />\
                                            </a>\
                                        </div>\
                                        <div class="cartpopup-item-content d-flex flex-column">\
                                            <h5>' + product_url + '</h5>\
                                            <span class="variant">' + selected_options + '</span>\
                                            <span class="price">' + line_price.toFixed(2) + '</span>\
                                            <div class="quantity-box d-flex flex-row">\
                                                <button class="quantity-button qminus" role="button" type="button"><i class="fal fa-minus"></i></button>\
                                                <input type="number" name="updates[]" id="updates_' + item_id + '" value="' + quantity + '" min="1" />\
                                                <button class="quantity-button qminus" role="button" type="button"><i class="fal fa-plus"></i></button>\
                                            </div>\
                                            <div class="d-flex flex-row">\
                                                <a class="remove" href="/cart/change?line=' + item_count + '&amp;quantity=0">Remove</a>\
                                            </div>\
                                        </div>\
                                        <!--<div class="col span_6">' + product_url + '<br>' + selected_options + '</div>\
                                        <div class="col span_3 text-right">$'+ line_price.toFixed(2) +'<br>x ' + quantity + '<input type="hidden" id="updates_' + item_id + '" value="' + quantity + '" />\
                                        </div>-->\
                                    </div>'
                                    );
                            } //endif
                        } // endfor

                        $('.cartpopup-body').append( cart_list.join('') );
                    }
                });
            }
        });
    });
});

此代码在 item count == 0 时有效。如果 item count == 1 它附加了两个项目（新产品和旧产品），那么迷你购物车中共有三个产品。我不明白如何解决这个问题。

Note: Shopify plugin / App shouldn't use for the solution and I'm using custom theme by Themekit.

示例工作站点：https://www.gymshark.com/（我想要这个）。

Answer 1

根据您的描述，您似乎遇到的唯一问题是当购物车中的产品数量大于 1 时产品数据重复。原因是cart.json和jQuery append.

返回的数据

根据Shopify AJAX API docs，cart.json returns整个购物车的数据。因此，在每次添加产品时，您再次获取整个购物车并通过 jQuery 将其附加到现有内容。解决这个问题的简单方法是替换整个 HTML 而不是使用 append.

// change. this
$('.cartpopup-body').append( cart_list.join('') );

// to this
$('.cartpopup-body').html( cart_list.join('') );

jQuery .html() Docs

如何通过 AJAX 在 shopify 迷你购物车弹出窗口中附加产品订单项？

how to append products line item in shopify mini cart popup on click variant by AJAX?

ajax

jquery

liquid

shopify