Magento 2: Update cart using ajax when quantity change

Here we are discussing to update the cart without clicking the Update Cart Button.
Or we can say ajax cart update.

I have created a custom module to implement such functionality.
Here I have used MageMonkey as vendor and AutoUpdateCartAjax as the module name.

Please follow the below steps:
1. Create MageMonkey/AutoUpdateCartAjax directories in app/code.

2. Create registration.php file at app/code/MageMonkey/AutoUpdateCartAjax and add following code:

<?php
MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'MageMonkey_AutoUpdateCartAjax',
    __DIR__
);

3. Create module.xml file at app/code/MageMonkey/AutoUpdateCartAjax/etc/ and add following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MageMonkey_AutoUpdateCartAjax" setup_version="1.0.0" />
</config>

4. Create checkout_cart_index.xml file at app/code/MageMonkey/AutoUpdateCartAjax/view/frontend/layout and add following code:

<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="MagentoFrameworkViewElementTemplate" name="cart.auto.update.qty"  template="MageMonkey_AutoUpdateCartAjax::js.phtml" after="-"/>
        </referenceContainer>
    </body>
</page>

5. Create js.phtml file at app/code/MageMonkey/AutoUpdateCartAjax/view/frontend/templates and add following code:

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

6. Create cartQtyUpdate.js file at app/code/MageMonkey/AutoUpdateCartAjax/view/frontend/web/js and add following code:

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

7. Create requirejs-config.js file at app/code/MageMonkey/AutoUpdateCartAjax/view/frontend/ and add following code:

var config = {
    map: {
        '*': {
            ajaxQty: 'MageMonkey_AutoUpdateCartAjax/js/cartQtyUpdate'
        }
    }
};

8. Run below commands to enable this custom module.

php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush

Now, you can check your cart page. If you increase or decrease quantity, it will auto-update cart total and mini cart.

Fill the below form if you need any Magento relate help/advise/consulting.

With Only Agency that provides a 24/7 emergency support.

Let’s initiate a discussion!!

With Only Agency that provides a 24/7 emergency support.