Menu
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?
347
Reload totals cart after ajax change quantity
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.
124
You can consult this way to ajax re-load block totals in cart:
define([
"jquery",
'Magento_Checkout/js/action/get-payment-information',
'Magento_Checkout/js/model/totals'
], function($, getPaymentInformationAction, totals) {
$('.cart.item .qty').on({
change: function() {
var post_url = $(this).attr('data-post-url');
$.post(post_url, $(this).serialize(), function(data) {
//custom your update
$(".form-cart").replaceWith(data.cart_html);
$("#cart-totals").replaceWith(data.totals_html);
//reload block total
var deferred = $.Deferred();
totals.isLoading(true);
getPaymentInformationAction(deferred);
$.when(deferred).done(function() {
totals.isLoading(false);
});
//end
}, "json");
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
