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
