We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

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:


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" />

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

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

    require ([
        function ($) {
            $(window).on("load", function () {

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

], function ($, getTotalsAction, customerData) {

        $(document).on('change', 'input[name$="[qty]"]', function(){
            var form = $('form#form-validate');
                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'];


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

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

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.

CONTACT US to get Magento programming solutions by hiring a certified Magento expert.

Fill the below form if you have any Magento programming need.

    Recent Articles
    Get a Free Quote

      Let’s initiate a discussion!!