Validasi syarat dan ketentuan (modul khusus)


9

Saya telah membuat modul khusus yang memungkinkan saya memindahkan kotak centang T&C di bawah metode pembayaran dan tombol pesanan di dalam ringkasan ringkasan, seperti:

Tampilan checkout

Sekarang, setiap kali saya memilih metode pembayaran, centang kotak dari Syarat dan Ketentuan dan tekan 'Pesan', yang muncul berikut:

Pesan eror

Saya sudah mencoba yang berikut ini, tetapi sayangnya tidak berhasil:

Magento 2 - memindahkan syarat dan ketentuan posisi dalam checkout

Payload Ajax setelah mengirimkan pesanan:

masukkan deskripsi gambar di sini

Saat menggunakan checkout tanpa modul, konten payload (informasi pembayaran) memiliki:

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

Sementara saat menggunakan modul khusus saya, itu adalah sebagai berikut:

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

Karena itu kosong ... ini mungkin tampaknya menjadi masalah. Bagaimana cara saya memperbaikinya?

KODE

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

        });


    }
);

Jawaban:


3

Jadi, setelah absen sebentar saya menemukan apa yang menyebabkan perjanjian tidak divalidasi.

Ada file ini bernama agreements-assigner.js, terletak di

Module_CheckoutAgreements / view / frontend / web / js / model

Dalam file ini, ada variabel yang disebut agreementForm. Variabel ini ditugaskan ke kotak centang syarat dan perjanjian. Awalnya seperti ini:

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

Tapi tentu saja, saya memindahkan kotak centang dari lokasi aslinya, jadi jalur ke kotak centang ini tidak ada lagi.

Jika Anda, misalnya, ubah variabel sebagai berikut:

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

File .js dapat menemukan kotak centang perjanjian checkout Anda! Sekarang pesanan Anda dapat ditempatkan dengan sukses.

Perbaikan yang agak sederhana. Saya mencoba memperbaikinya menggunakan .js dan hal-hal khusus, dan sepenuhnya mengawasi file ini ...;)

CATATAN: jangan mengedit file inti secara langsung. Alih-alih menyalinnya ke modul atau tema Anda dan ubah file sesuai dengan kebutuhan Anda.


@Ran, Bisakah Anda jelaskan versinya?
Ravi Dudhara

0

tambahkan baris berikut di modul khusus Anda

app / code / Magento / CheckoutAgreements / view / frontend / web / js / view / checkout-agreement.js baris no- 48 hingga 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);
        }
    });
});

ubah file Magento / CheckoutAgreements / view / frontend / web / template / checkout / checkout-agreement.html

Ganti
'id': 'agreement_' + agreementId,
di baris 14

dengan

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

Menggantikan

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

dengan

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

pada baris 18

Referensi : https://github.com/magento/magento2/commit/14b9b9813c9a16c0c45505885503cfb71bc4eb8d


Saya sudah menggunakan versi terbaru Magento 2 (2.2.3). Dalam versi ini, semua kode sudah seperti yang Anda sebutkan. Apakah ada gunanya bagi Anda jika saya akan membagikan kode saya dalam jawaban saya?
Condor

hai @ lalit mohan, saya menggunakan magento 2.2.4 default, mendapatkan kesalahan yang sama setelah saya mengklik tombol pesanan tempat. bisa tolong jelaskan secara rinci dengan jawabannya
jafar pinjar
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.