web-dev-qa-db-ja.com

Magento 2-ajaxの数量変更後に合計カートをリロードします

Ajaxを使用して、カートmagento2カートページの1つのアイテムの数量を変更したいと思います。

私はこの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コードを置き換えた後、コンポーネント全体を動的に更新するアイデアはありますか？

phpjqueryajaxknockout.jsmagento2
5
Antony

ajax変更数量の後に合計カートをリロードします

  1. ステップ

カスタムで作成します（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.ステップ

js.phtmlファイルを作成します（Magento_Theme/templates/js.phtml）

<script>
require ([
        'jquery',
    ],
    function ($) {
       $(window).on("load", function () {
            require([
                'custom'
            ]);
        });
    });

3.テーマWebフォルダー（Namespace/Yourtheme/web/js/custom.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.ステップ（jsファイルをマップします）

テーマルート（Namespace/yourtheme/requirejs-config.js）にrequirejs-config.jsを作成します

var config = {
   map: {
    '*': {
        custom:'js/custom'
    }
  }
};

これで、ajaxを使用した数量更新が機能します。問題がある場合はコメントで質問してください。

3
Surendra Kumar Ahir

次のjsコードを実行するだけです-

require(
[
   'Magento_Checkout/js/model/quote',
   'Magento_Checkout/js/model/cart/totals-processor/default'
],
function(
   quote,
   totalsDefaultProvider
) {
     totalsDefaultProvider.estimateTotals(quote.shippingAddress());
  }
);

詳細については、 この記事 を参照してください。

免責事項：私はMexBS（この記事を公開した会社）のCEOです

0
Sveta Oksen

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);
            }
        });
    });
});
});

今ではうまく機能します

0
xCot

この方法を参考にして、カートにブロック合計を再ロードすることができます。

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");
        }
    });
});
0
De Nguyen