cancel
Showing results for 
Search instead for 
Did you mean: 

Update Cart automatically Using Increment and decrement Button in cart page

Re: Update Cart automatically Using Increment and decrement Button in cart page

1. I have created the layout file(checkout_cart_index.xml) in Magento_Checkout/layout. Then i added the below code to call the js.phtml

<referenceContainer name="content">

        <block class="Magento\Framework\View\Element\Template" name="cart.ajax.qty.update"  template="Magento_Theme::js.phtml" after="-"/>

    </referenceContainer>

2. I have created the js.phtml file ( Magento_Theme/templates/js.phtml ) and the code for the js.phtml

<script>require ([

        'jquery',

    ],

    function ($) {

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

            require([

                'custom'

            ]);

        });

    });

  3. Then created custom.js (Samplestore/theme/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. Finally mapped the js using requirejs-config.js (Samplestore/theme/requirejs-config.js). And the code here

var config = {   map: {

    '*': {        custom:'js/custom'

    }

  }

};

Kindly review and suggest the solution