Convalida dei termini e condizioni (modulo personalizzato)


9

Ho creato un modulo personalizzato che mi consente di spostare la casella di controllo T&C sotto i metodi di pagamento e il pulsante di ordine posto all'interno del div riepilogo, in questo modo:

Vista di pagamento

Ora, ogni volta che seleziono un metodo di pagamento, seleziona la casella da Termini e condizioni e premo 'Effettua ordine', si apre il seguente messaggio:

Messaggio di errore

Ho provato quanto segue, ma purtroppo senza fortuna:

Magento 2 - sposta la posizione dei termini e delle condizioni in checkout

Il payload Ajax dopo l'invio dell'ordine:

inserisci qui la descrizione dell'immagine

Quando si utilizza il checkout senza il modulo, il contenuto del payload (informazioni di pagamento) ha:

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

Mentre usando il mio modulo personalizzato, è come segue:

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

Quindi è vuoto ... questo probabilmente sembra essere il problema. Come posso risolvere questo problema?

CODICE

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

        });


    }
);

Risposte:


3

Quindi, dopo essere stato assente per un po ', ho scoperto che cosa rende non validi gli accordi.

C'è questo file chiamato agreements-assigner.js, che si trova in

Module_CheckoutAgreements / view / frontend / web / js / modello

In questo file, c'è una variabile chiamata agreementForm. Questa variabile è assegnata alla casella di controllo dei termini e degli accordi. Inizialmente così:

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

Ma, naturalmente, ho spostato la casella di controllo dalla posizione originale, quindi questo percorso alla casella di controllo non esiste più.

Se, ad esempio, si modifica la variabile come segue:

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

Il file .js è in grado di individuare la casella di controllo degli accordi di pagamento! Ora il tuo ordine può essere effettuato con successo.

Una soluzione piuttosto semplice. Stavo cercando di risolverlo usando .js e cose personalizzate e ho completamente supervisionato questo file ...;)

NOTA: non modificare direttamente il file principale. Piuttosto copiarlo sul modulo o sul tema e modificare il file in base alle proprie esigenze.


@Bran, puoi per favore dirmi la versione?
Ravi Dudhara,

0

aggiungi la seguente riga nel tuo modulo personalizzato

app / code / Magento / CheckoutAgreements / view / frontend / web / js / view / checkout-accordi.js linea n. 48-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);
        }
    });
});

modifica nel file Magento / CheckoutAgreements / view / frontend / web / template / checkout / checkout-accordi.html

Sostituisci
'id': 'agreement_' + agreementId,
nella riga 14

con

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

Sostituire

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

con

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

nella riga 18

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


Uso già l'ultima versione di Magento 2 (2.2.3). In questa versione, tutto il codice è già come hai detto. Ti sarebbe utile se condividessi il mio codice nella mia risposta?
Condor,

ciao @lalit mohan, sto usando magento 2.2.4 predefinito, ricevendo lo stesso errore dopo aver fatto clic sul pulsante di ordinamento del posto. puoi per favore spiegare in dettaglio con la risposta
jafar pinjar,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.