契約条件の検証(カスタムモジュール)


9

次のように、T&Cチェックボックスを支払い方法の下に移動し、概要div内の注文ボタンを配置できるようにするカスタムモジュールを作成しました。

チェックアウトビュー

これで、支払い方法を選択するたびに、利用規約のチェックボックスをオンにして[注文]を押すと、次のポップアップが表示されます。

エラーメッセージ

私は以下を試しましたが、残念ながら運がありません:

Magento 2-チェックアウトでの契約条件の位置の移動

注文を送信した後のAjaxペイロード:

ここに画像の説明を入力してください

モジュールなしでチェックアウトを使用する場合、ペイロードのコンテンツ(支払い情報)は次のようになります。

extension_attributes: {agreement_ids: ["1"]}
agreement_ids: ["1"]

私のカスタムモジュールを使用しているとき、それは次のとおりです:

extension_attributes: {agreement_ids: [""]}
agreement_ids: [""]

したがって、それは空です...これはおそらく問題のようです。どうすれば修正できますか?

コード

module.xml

<?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="Vendor_Checkout" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Checkout::css/checkout.css"/>
    </head>
    <body>


        <!-- Disabling the T&C checkbox under payment methods -->
        <referenceBlock name="checkout.root">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="billing-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="payment" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="payments-list" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="before-place-order" xsi:type="array">
                                                                        <item name="componentDisabled" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>

        <!-- Moving terms and conditions after payment methods -->
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="agreements" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
                                                                    <item name="sortOrder" xsi:type="string">100</item>
                                                                    <item name="displayArea" xsi:type="string">before-place-order</item>
                                                                    <item name="dataScope" xsi:type="string">checkoutAgreements</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                </item>
                                                                <item name="agreements-validator" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>

        <!-- Moving place order button to sidebar -->
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="component" xsi:type="string">Vendor_Checkout/js/view/payment</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="template" xsi:type="string">Vendor_Checkout/button</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>



    </body>
</page>

web / template / button.html

<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
    <button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
        <span data-bind="i18n: 'Place Order'">Place Order</span>
    </button>
</div>
<!-- /ko -->

web / js / view / payment.js

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/summary',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function(
        $,
        ko,
        Component,
        stepNavigator
    ) {
        'use strict';
        console.log('Running');
        return Component.extend({

            isVisible: function () {
                return stepNavigator.isProcessed('shipping');
            },
            initialize: function () {
                $(function() {
                    $('body').on("click", '#place-order-trigger', function () {

                        // Parse JSON here somehow?
                        $(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );

                    });
                });
                var self = this;
                this._super();
            }

        });


    }
);

回答:


3

それで、しばらく不在だった後、合意が検証されない原因を見つけました。

このファイルが存在呼ばれagreements-assigner.js、にあります

Module_CheckoutAgreements / view / frontend / web / js / model

このファイルには、という変数がありますagreementForm。この変数は、契約条件のチェックボックスに割り当てられています。もともとこのように:

agreementForm = $('.payment-method._active div[data-role=checkout-agreements] input');

もちろん、チェックボックスを元の場所から移動したため、チェックボックスへのこのパスはもう存在しません。

たとえば、次のように変数を変更したとします。

agreementForm = $('div[data-role=checkout-agreements] input');

.jsファイルは、チェックアウト契約のチェックボックスを見つけることができます!これで注文を成功させることができます。

かなり単純な修正。私はカスタムの.jsなどを使用してそれを修正しようとしていて、このファイルを完全に監視していました...;)

注:コアファイルを直接編集しないでください。それをモジュールまたはテーマにコピーし、必要に応じてファイルを変更してください。


@ブラン、バージョンを教えてください。
Ravi Dudhara、

0

カスタムモジュールに次の行を追加します

app / code / Magento / CheckoutAgreements / view / frontend / web / js / view / checkout-agreements.js line no- 48 to 77

 /**
         * build a unique id for the term checkbox
         *
         * @param {Object} context - the ko context
         * @param {Number} agreementId
         */
        getCheckboxId: function (context, agreementId) {
            var paymentMethodName = '',
                paymentMethodRenderer = context.$parents[1];

            // corresponding payment method fetched from parent context
            if (paymentMethodRenderer) {
                // item looks like this: {title: "Check / Money order", method: "checkmo"}
                paymentMethodName = paymentMethodRenderer.item ?
                  paymentMethodRenderer.item.method : '';
            }

            return 'agreement_' + paymentMethodName + '_' + agreementId;
        },

        /**
         * Init modal window for rendered element
         *
         * @param {Object} element
         */
        initModal: function (element) {
            agreementsModal.createModal(element);
        }
    });
});

ファイルMagento / CheckoutAgreements / view / frontend / web / template / checkout / checkout-agreements.htmlの変更


'id': 'agreement_' + agreementId,
14行目で交換

 'id': $parent.getCheckboxId($parentContext, agreementId),

交換する

<label data-bind="attr: {'for': 'agreement_' + agreementId}">

<label data-bind="attr: {'for': $parent.getCheckboxId($parentContext, agreementId)}">

線18

参照https : //github.com/magento/magento2/commit/14b9b9813c9a16c0c45505885503cfb71bc4eb8d


Magento 2(2.2.3)の最新バージョンをすでに使用しています。このバージョンでは、すべてのコードは既に述べたとおりです。私の回答でコードを共有する場合、それは役に立ちますか?
コンドル

こんにちは@lalit mohan、私はデフォルトのmagento 2.2.4を使用しています。注文ボタンをクリックすると同じエラーが発生します。答えを詳しく説明してください
jafar pinjar '11 / 12/18
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.