Magento 2 - 在ajax更改数量后重新加载总计
[英]Magento 2 - Reload totals cart after ajax change quantity
问题描述
我想使用ajax来更改购物车magento 2购物车页面上的一个商品的数量。
我添加了这个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");
}
});
data.totals_html的值是
<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>
当我更改数量时，总组件内容不刷新..
任何人都有想法在更换html代码后动态更新总组件？
4 个解决方案
解决方案1
3 2018-07-18 17:06:55
ajax更改数量后重新加载总计
- 步
在你的自定义中创建它们（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文件（Magento_Theme / templates / js.phtml）
<script>
require ([
'jquery',
],
function ($) {
$(window).on("load", function () {
require([
'custom'
]);
});
});
3.在主题web文件夹中创建custom.js文件（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（映射你的js文件）
在主题根目录上创建requirejs-config.js（Namespace / yourtheme / requirejs-config.js）
var config = {
map: {
'*': {
custom:'js/custom'
}
}
};
现在使用ajax的qty更新工作如果有任何问题请在评论中提问。
解决方案2
0 2017-07-05 14:56:08
您可以通过这种方式咨询ajax在购物车中重新加载块总计：
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");
}
});
});
解决方案3
0 2018-11-10 16:12:23
只需运行以下js代码 -
require(
[
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/cart/totals-processor/default'
],
function(
quote,
totalsDefaultProvider
) {
totalsDefaultProvider.estimateTotals(quote.shippingAddress());
}
);
有关更多信息，请参阅此文章 。
免责声明：我是MexBS的首席执行官（发表这篇文章的公司）
解决方案4
0 2019-06-11 11:32:33
将cartQtyUpdate.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);
/* 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);
}
});
});
$(document).on('click', '.alo_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);
}
});
});
});
});
现在它运作良好
Magento-无法更改数量时更新购物车
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.