Magento 2 - Reload totals cart after ajax change quantity
I want to use ajax to change the quantity of one item on the cart magento 2 cart page.
I have added this javascript:
$('.cart.item .qty').on({
change: function() {
var post_url = $(this).attr('data-post-url');
$.post(post_url, $(this).serialize(), function(data) {
$(".form-cart").replaceWith(data.cart_html);
$("#cart-totals").replaceWith(data.totals_html);
$("#cart-totals").trigger('contentUpdated');
}, "json");
}
});
The value of data.totals_html is
<div id="cart-totals" class="cart-totals" data-bind="scope:'block-totals'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"#cart-totals": {
"Magento_Ui/js/core/app": {"components":{"block-totals":....}
</script>
When I change the quantity, the total component content is not refresh..
Anyone have an idea for dynamically update the total component after replace the html code?
Answer
Reload totals cart after ajax change quantity
- Step
In your custom them create ( Magento_Theme/layout/checkout_cart_index.xml )
<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="Magento\Framework\View\Element\Template" name="cart.ajax.qty.update" template="Magento_Theme::js.phtml" after="-"/>
</referenceContainer>
</body>
2.Step
creat js.phtml file ( Magento_Theme/templates/js.phtml )
<script>
require ([
'jquery',
],
function ($) {
$(window).on("load", function () {
require([
'custom'
]);
});
});
3. Step create custom.js file in theme web folder ( Namespace/Yourtheme/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.Step ( map your js file )
Create requirejs-config.js on your theme root ( Namespace/yourtheme/requirejs-config.js)
var config = {
map: {
'*': {
custom:'js/custom'
}
}
};
Now the qty update work using ajax If have any issue ask in comment.