Validación de los términos y condiciones (módulo personalizado)

9

Creé un módulo personalizado que me permite mover la casilla de verificación de T&C debajo de los métodos de pago y el botón de orden de ubicación dentro del div de resumen, así:

Vista de pago

Ahora, cada vez que seleccione un método de pago, marque la casilla de los Términos y condiciones y presione 'Realizar pedido', aparecerá lo siguiente:

Mensaje de error

He intentado lo siguiente, pero desafortunadamente no tuve suerte:

Magento 2: mover los términos y condiciones de posición en el pago

La carga útil de Ajax después de enviar el pedido:

ingrese la descripción de la imagen aquí

Cuando se utiliza el proceso de pago sin el módulo, el contenido de la carga útil (información de pago) tiene:

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

Mientras uso mi módulo personalizado, es como sigue:

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

Por lo tanto, está vacío ... este probablemente parece ser el problema. ¿Cómo puedo solucionar esto?

CÓDIGO

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

        });


    }
);
magento2 module checkout magento2.2.3 terms-and-conditions Cóndor
fuente

Respuestas:

3

Entonces, después de estar ausente por un tiempo, descubrí qué causa que los acuerdos no sean validados.

Hay este archivo llamado agreements-assigner.js, ubicado en

Module_CheckoutAgreements / view / frontend / web / js / model

En este archivo, hay una variable llamada agreementForm. Esta variable se asigna a la casilla de verificación de los términos y acuerdos. Originalmente así:

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

Pero, por supuesto, moví la casilla de verificación de su ubicación original, por lo que esta ruta a la casilla de verificación ya no existe.

Si, por ejemplo, cambia la variable de la siguiente manera:

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

¡El archivo .js puede localizar su casilla de verificación de acuerdos de pago! Ahora su pedido se puede realizar con éxito.

Una solución bastante simple. Estaba tratando de arreglarlo usando .js personalizados y esas cosas, y supervisé totalmente este archivo ...;)

NOTA: no edite el archivo central directamente. En lugar de eso, cópielo en su módulo o tema y modifique el archivo según sus necesidades.

Cóndor
fuente
@Bran, ¿puedes decirme la versión?
Ravi Dudhara
0

agregue la siguiente línea en su módulo personalizado

app / code / Magento / CheckoutAgreements / view / frontend / web / js / view / checkout-assets.js línea no- 48 a 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);
        }
    });
});

cambio en el archivo Magento / CheckoutAgreements / view / frontend / web / template / checkout / checkout-assets.html

Reemplazar
'id': 'agreement_' + agreementId,
en la línea 14

con 

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

Reemplazar

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

con

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

en la línea 18

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

lalit mohan
fuente
Ya uso la última versión de Magento 2 (2.2.3). En esta versión, todo el código ya está como mencionaste. ¿Te sirve si comparto mi código en mi respuesta?
Cóndor
hola @lalit mohan, estoy usando el magento 2.2.4 predeterminado, obteniendo el mismo error una vez que hice clic en el botón de pedido. ¿Puedes explicarlo en detalle con la respuesta?
Jafar pinjar