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.
CONTACT US to get Magento programming solutions by hiring a certified Magento expert.
