Magento – How to refresh total sidebar when change qty by ajax in cart page

Just a quick update. I finished this by using regular expression.I still think if we only get the JSON formatted data for the quote data from the controller than that should be better for performance. Thank you.

Solution:

require(['jquery', 'Magento_Customer/js/customer-data',
    'jquery/jquery-storageapi'], function ($) {
    // $("#submitbutton").hide();

    var spinner = $('.ajax-checkout-cart-loader');
    var form = $('form#form-validate');
    var qtyfields = $('#cart-<?php echo $_item->getId() ?>-qty');
    var changeDected = 0;

       $('.page.messages').each(function () {
           var thismessage = $(this);
           thismessage.attr('id', 'messages');
       });

       /*
       form.find(qtyfields).each(function (e) {
           var thisfield = $(this);
           //console.log(thisfield);
           $(this).change(function () {
               spinner.css("display", "block");
               console.log('change detected');
               form.submit();
           });
       });
        */

    form.on('submit', function (e) {

        e.preventDefault();
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            type: 'post',
            success: function (response) {
                var parsedResponse = $.parseHTML(response);
                var itemSubtotal = $(parsedResponse).find(".ajax-subtotal").text();

                var itemSubtotalArray = itemSubtotal.split(" ");


                if(itemSubtotalArray.length !== 1) {
                    itemSubtotalArray = itemSubtotalArray.filter(s => s.replace(/\s+/g, '').length !== 0);
                    //console.log(itemSubtotalArray);

                } else {
                    location.reload();
                }

                //console.log(itemSubtotalArray.length);
                var ajaxSubtototal = $('.ajax-subtotal');

                for (i=0; i <= itemSubtotalArray.length - 1; i++) {

                        ajaxSubtototal.eq(i).find('span.price').text(itemSubtotalArray[i]);

                }

                var quoteDataRegexp = /\"quoteData\":(.*)/;
                var quoteDataMatch = quoteDataRegexp.exec(response);

                var grandTotalRegexp = /\"grand_total\":\"(.*?)\",/;
                var subTotalRegexp = /\"subtotal\":\"(.*?)\",/;
                var taxRegexp = /\"tax_amount\":\"(.*?)\",/;
                var cadRegexp = /\"Discount \(CAD Discount\)\",\"value\":\"(.*?)\",/;


                var grandTotalMatch = grandTotalRegexp.exec(quoteDataMatch[1]);
                var subTotalMatch = subTotalRegexp.exec(quoteDataMatch[1]);
                var taxMatch = taxRegexp.exec(quoteDataMatch[1]);
                var cadDiscountMatch = cadRegexp.exec(quoteDataMatch[1]);

                /* subtotal for each item in the table */

                /* data set for the Knockout data bar */
                //var total =  checkoutConfig2.match(/\"row_total_incl_tax\"/).text();
                var grandTotal = parseFloat(Math.round(grandTotalMatch[1] * 100) / 100).toFixed(2);
                var subTotalbar = parseFloat(Math.round(subTotalMatch[1] * 100) / 100).toFixed(2);
                var taxTotal = parseFloat(Math.round(taxMatch[1] * 100) / 100).toFixed(2);
                var discountTotal = parseFloat(Math.round(cadDiscountMatch[1] * 100) / -100).toFixed(2);
                //console.log(grandTotal);

                $('.totals.sub').find('span.price').text("$" + subTotalbar);
                $('.totals-tax').find('span.price').text("$" + taxTotal);
                $('.grand.totals').find('span.price').text("$" + grandTotal);
                $('.totals:nth-child(2)').find('span.price').text("-$" + discountTotal);

                spinner.css("display", "none");

                //location.reload();

            },
            error: function () {
                console.log('error');
            }
        });
        //console.log('form submitted');

    });

});

Hope you doing well.

Please try with this JavaScript code.Hope this will help you.

define(
    [
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/shipping-rate-processor/new-address',
        'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
        'Magento_Checkout/js/model/shipping-rate-registry'

    ],
    function (quote, defaultProcessor, customerAddressProcessor, rateRegistry) {
       'use strict';

       var processors = [];

       rateRegistry.set(quote.shippingAddress().getCacheKey(), null);

       processors.default =  defaultProcessor;
       processors['customer-address'] = customerAddressProcessor;

       var type = quote.shippingAddress().getType();

       if (processors[type]) {
          processors[type].getRates(quote.shippingAddress());
       } else {
          processors.default.getRates(quote.shippingAddress());
       }

    }
);