Magento 2.2 – How to Reload Shopping Cart Summary via Ajax

magento-2.1magento2magento2.2magento2.2.4

I am adding quantity increment/decrement buttons on shopping cart page. How can I reload cart summery (subtotal/shipping rate/grand total/discount/tax section) via ajax ?

I have added below code in app/degign/frontend/Theme Vendor/Theme/Magento_checkout/templates/cart/item/default.phtml to add +/- buttons

<div class="control qty">
    <button type="button"   id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty"></button>
    <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
           name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
           data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
           value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
           type="number"
           size="4"
           title="<?= $block->escapeHtml(__('Qty')) ?>"
           class="input-text qty"
           data-validate="{required:true,'validate-greater-than-zero':true}"
           data-role="cart-item-qty"/>
    <button type="button"  id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"></button>
</div>

And added below javascript in cart.phtml

<script>
require([
    'jquery', 
    'Magento_Customer/js/customer-data',
    'jquery/jquery-storageapi',
    'Magento_Checkout/js/action/get-totals'

    ], function ($, customerData, storageApi, getTotalsAction) {
    // $("#submitbutton").hide();
    var form = $('form#form-validate');
    var qtyfields = $('input.qty');
    $('.page.messages').each(function () {
        var thismessage = $(this);
        thismessage.attr('id', 'messages');
    });

    form.find(qtyfields).each(function (e) {
        var thisfield = $(this);
        $(this).change(function () {
            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 (res) {

                //code to reload cart item section
                var parsedResponse = $.parseHTML(res);
                var result = $(parsedResponse).find("#form-validate");
                $("#form-validate").replaceWith(result);

                //below two lines refershing cart summary
                var deferred = $.Deferred();
                getTotalsAction([], deferred);

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

But cart summary is not reloading after quantity change.

Best Answer

Finally I got the solution.

I have added below code in app/degign/frontend/Theme Vendor/Theme/Magento_checkout/templates/cart/item/default.phtml to add +/- buttons

<div class="control qty">
    <button type="button"   id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty"></button>
    <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
           name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
           data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
           value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
           type="number"
           size="4"
           title="<?= $block->escapeHtml(__('Qty')) ?>"
           class="input-text qty"
           data-validate="{required:true,'validate-greater-than-zero':true}"
           data-role="cart-item-qty"/>
    <button type="button"  id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty"></button>
</div>

Then I overrides shopping-cart.js to app/design/frontend/Theme Vendor/Theme/Magento_Checkout/web/js/shopping-cart.js and added my javascript code there.

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'jquery/ui',
    'Magento_Checkout/js/action/get-totals' //additionally added
], function ($, jQueryUi, getTotalsAction) {
    'use strict';

    //code to update quantity starts
    $(document).ready(function(){
        $('.increaseQty, .decreaseQty').on("click",function(){ 
            var $this = $(this);
            var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');          
            var currentQty = $("#cart-"+ctrl+"-qty").val();
            if($this.hasClass('increaseQty')){
                var newAdd = parseInt(currentQty)+parseInt(1);
                 $("#cart-"+ctrl+"-qty").val(newAdd);
                 $('input.qty').trigger('change');
            }else{
                 if(currentQty>1){
                    var newAdd = parseInt(currentQty)-parseInt(1);
                    $("#cart-"+ctrl+"-qty").val(newAdd);
                    $('input.qty').trigger('change');
                 }
            }
        });

        var form = $('form#form-validate');
        var qtyfields = $('input.qty');
        $('.page.messages').each(function () {
            var thismessage = $(this);
            thismessage.attr('id', 'messages');
        });

        form.find(qtyfields).each(function (e) {
            var thisfield = $(this);
            $(this).change(function () {
                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 (res) {
                    var parsedResponse = $.parseHTML(res);
                    var result = $(parsedResponse).find("#form-validate");
                    $("#form-validate").replaceWith(result);

                    var deferred = $.Deferred();
                    getTotalsAction([], deferred);

                },
                error: function () {
                    console.log('error');
                }
            });
            console.log('form submitted');
        });
    });
    //code to update quantity ends

    $.widget('mage.shoppingCart', {
        /** @inheritdoc */
        _create: function () {
            var items, i;

            $(this.options.emptyCartButton).on('click', $.proxy(function () {
                $(this.options.emptyCartButton).attr('name', 'update_cart_action_temp');
                $(this.options.updateCartActionContainer)
                    .attr('name', 'update_cart_action').attr('value', 'empty_cart');
            }, this));
            items = $.find('[data-role="cart-item-qty"]');

            for (i = 0; i < items.length; i++) {
                $(items[i]).on('keypress', $.proxy(function (event) { //eslint-disable-line no-loop-func
                    var keyCode = event.keyCode ? event.keyCode : event.which;

                    if (keyCode == 13) { //eslint-disable-line eqeqeq
                        $(this.options.emptyCartButton).attr('name', 'update_cart_action_temp');
                        $(this.options.updateCartActionContainer)
                            .attr('name', 'update_cart_action').attr('value', 'update_qty');

                    }
                }, this));
            }
            $(this.options.continueShoppingButton).on('click', $.proxy(function () {
                location.href = this.options.continueShoppingUrl;
            }, this));
        }
    });

    return $.mage.shoppingCart;
});

Hope this will help others :)

Related Solutions

Magento 2 – JS Modal Popup Close Event

You don't have to extend the modal.

You simply have to listen for the 'modalclosed' event on the DOM element on which the modal had been invoked. In fact the modal() function returns this element which makes the code trivial.

$('#popup-modal').on('modalclosed', function() { 
  /*insert code here*/ 
});

Magento2 Ajax Cart Validation on Quantity Change

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');

    });

});

Best Answer

Related Solutions

Magento 2 – JS Modal Popup Close Event

Magento2 Ajax Cart Validation on Quantity Change

Related Topic