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

Question

I'm new in Shopify. I try many script today but no success. I haven't found any relevant tutorial or documentation how to create mini cart to add product line items on click variant by AJAX. I want to click product a variant and it will add product min cart details in popup [Note: it's not cart page.].

Here is the example of image

Here is my code:

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

This code is working when item count == 0. If item count == 1 it appending two items (new product and old product) so total three products in mini cart. I don't understand how can I fix this issue.

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

Example working site: https://www.gymshark.com/ (I want like this one).

Answer 1

From you description, the only problem you seem to have is repeated product data when product count in cart is greater than one. The reason for this is the data returned by cart.json and jQuery append.

As per Shopify AJAX API docs, cart.json returns the data of whole cart. So on each product add,, you fetch the whole cart again and append it via jQuery to existing content. Simple fix for this is to replace entire HTML instead of using append.

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

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

jQuery .html() Docs