Magento 2 - Reload totals cart after ajax change quantity

magento 2 reload block ajax
magento 2 reload cart total
reload order summary magento 2
magento 2 ajax add to cart programmatically
magento 2 update price on quantity change
magento 2 adding quantity increment button in cart and mini cart
magento 2 ajax update mini cart
magento 2 add to cart ajax

I want to use ajax to change the quantity of one item on the cart magento 2 cart page.

I have added this javascript:

$('.cart.item .qty').on({
    change: function() {
        var post_url = $(this).attr('data-post-url');

        $.post(post_url, $(this).serialize(), function(data) {
            $(".form-cart").replaceWith(data.cart_html);
            $("#cart-totals").replaceWith(data.totals_html);
            $("#cart-totals").trigger('contentUpdated');
        }, "json");
    }
});

The value of data.totals_html is

<div id="cart-totals" class="cart-totals" data-bind="scope:'block-totals'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
        {
            "#cart-totals": {
                "Magento_Ui/js/core/app": {"components":{"block-totals":....}
</script>

When I change the quantity, the total component content is not refresh..

Anyone have an idea for dynamically update the total component after replace the html code?


Reload totals cart after ajax change quantity

  1. Step

In your custom them create ( Magento_Theme/layout/checkout_cart_index.xml )

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="cart.ajax.qty.update"  template="Magento_Theme::js.phtml" after="-"/>
    </referenceContainer>
</body>

2.Step

creat js.phtml file ( Magento_Theme/templates/js.phtml )

<script>
require ([
        'jquery',
    ],
    function ($) {
       $(window).on("load", function () {
            require([
                'custom'
            ]);
        });
    });

3. Step create custom.js file in theme web folder ( Namespace/Yourtheme/web/js/custom.js )

    define([
    'jquery',
    'Magento_Checkout/js/action/get-totals',
    'Magento_Customer/js/customer-data'
     ], function ($, getTotalsAction, customerData) {

    $(document).ready(function(){
    $(document).on('change', 'input[name$="[qty]"]', function(){
        var form = $('form#form-validate');
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            showLoader: true,
            success: function (res) {
                var parsedResponse = $.parseHTML(res);
                var result = $(parsedResponse).find("#form-validate");
                var sections = ['cart'];

                $("#form-validate").replaceWith(result);

                // The mini cart reloading
                customerData.reload(sections, true);

                // The totals summary block reloading
                var deferred = $.Deferred();
                getTotalsAction([], deferred);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err.Message);
            }
        });
       });
      });
    });

4.Step ( map your js file )

Create requirejs-config.js on your theme root ( Namespace/yourtheme/requirejs-config.js)

var config = {
   map: {
    '*': {
        custom:'js/custom'
    }
  }
};

Now the qty update work using ajax If have any issue ask in comment.

Magento 2 - Reload totals cart after ajax change quantity, Reload totals cart after ajax change quantity. Step. In your custom them create ( Magento_Theme/layout/checkout_cart_index.xml ) In Magento2 - We need to update main cart on change of quantity by Ajax without click on "Update Cart Button" and without reloading the page, Below my code in this code only update cart subtotal but not updated cart page summery sidebar subtotal.


You can consult this way to ajax re-load block totals in cart:

define([
    "jquery",
    'Magento_Checkout/js/action/get-payment-information',
    'Magento_Checkout/js/model/totals'
], function($, getPaymentInformationAction, totals) {
    $('.cart.item .qty').on({
        change: function() {
            var post_url = $(this).attr('data-post-url');
            $.post(post_url, $(this).serialize(), function(data) {
                //custom your update
                $(".form-cart").replaceWith(data.cart_html);
                $("#cart-totals").replaceWith(data.totals_html);
                //reload block total
                var deferred = $.Deferred();
                totals.isLoading(true);
                getPaymentInformationAction(deferred);
                $.when(deferred).done(function() {
                    totals.isLoading(false);
                });
                //end
            }, "json");
        }
    });
});

Magento 2: Update cart using ajax when quantity change, Here we are discussing to update cart without clicking Update Cart Button. 2. Create registration.php file at app/code/MageMonkey/AutoUpdateCartAjax and file at app/code/MageMonkey/AutoUpdateCartAjax/etc/ and add following code: If you increse or decrease quantity, it will auto update cart total and minicart. Quantity update by AJAX for Magento 2 The module allows to update quantity on the shopping cart page 'checkout/cart/' by AJAX. After the update recalculate totals and rebuild mini shopping cart.


Just run the following js code -

require(
[
   'Magento_Checkout/js/model/quote',
   'Magento_Checkout/js/model/cart/totals-processor/default'
],
function(
   quote,
   totalsDefaultProvider
) {
     totalsDefaultProvider.estimateTotals(quote.shippingAddress());
  }
);

For more information, please refer to this article.

Disclaimer: I am the CEO of MexBS (The company who published this article)

Update Cart automatically Using Increment and decr, I have included + and - to increment and decrement the quantity of a /​40002976/magento-2-reload-totals-cart-after-ajax-change-quantity. We applied shipping rate to grand total but not display directly on cart page. So, we need to reload the page and then after the display that shipping rate. Now, We need to load or update cart total table on cart page of Magento using ajax.


Change the code in cartQtyUpdate.js to this one

define([
'jquery',
'Magento_Checkout/js/action/get-totals',
'Magento_Customer/js/customer-data'
], function ($, getTotalsAction, customerData) {

$(document).ready(function(){
    $(document).on('change', 'input[name$="[qty]"]', function(){
        var form = $('form#form-validate');
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            showLoader: true,
            success: function (res) {
                var parsedResponse = $.parseHTML(res);
                var result = $(parsedResponse).find("#form-validate");
                var sections = ['cart'];

                $("#form-validate").replaceWith(result);

                /* Minicart reloading */
                customerData.reload(sections, true);

                /* Totals summary reloading */
                var deferred = $.Deferred();
                getTotalsAction([], deferred);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err.Message);
            }
        });
    });
    $(document).on('click', '.alo_qty', function() {
        var form = $('form#form-validate');
        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            showLoader: true,
            success: function (res) {
                var parsedResponse = $.parseHTML(res);
                var result = $(parsedResponse).find("#form-validate");
                var sections = ['cart'];

                $("#form-validate").replaceWith(result);

                /* Minicart reloading */
                customerData.reload(sections, true);

                /* Totals summary reloading */
                var deferred = $.Deferred();
                getTotalsAction([], deferred);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err.Message);
            }
        });
    });
});
});

now it works well

Solved: Ajax cart update won't work second time, Re: Checkoutsession not updated after Ajax call. Sorry this one became a duplicate as was reported as spam this morning. It's solved in https  Update Cart automatically Using Increment and decrement Button in cart page I have included + and - to increment and decrement the quantity of a product in the cart page. Now i need to update it automatically without clicking the update shopping cart button.


Update cart totals by js on checkout page magento2, After this total is not reflecting/updating on summery block, then to update amount by JS after your request without reloading your page, you can  The AJAX Cart extension for Magento 2, provides a better shopping experience by allowing customers to add any product type to the cart without page reloads. Shoppers can add products to the cart directly from any page, such as home, CMS, category pages, and any additional pages at your site.


Magento 2: Update Item QTY in Cart Page Using AJAX, Magento 2: Update Item QTY in Cart Page Using AJAX. June 12, 2019 June 14, 2019 Create a new php file named registration.php in the following file path,. File Path: This is for reloading the totals summary */. var deferred = $.Deferred​();. Product Overview. Ajax Cart Pro is a Magento Extension that allows users to add, remove and update products from your Magento eCommerce store in a much easy way, without needing to reload the cart continuously using Ajax pop-up.


Magento 2 : Update Cart summary html, When I use a bullet to increase qty then I use ajax to update cart. After /how-to-​reload-shopping-cart-summary-via-ajax-in-magento-2-2#answer-233124 by simply triggering the Magento estimateTotals function, by using the following code: Magento AJAX Cart is a Great Plugin that changes the default behavior of Magento Cart Page, allowing a buyer to see the Total price calculation when change the Quantity of a product, without need to manually click on “Update cart” button. Automatically reload and recalculate Cart using AJAX when quantity changes.