Validation des conditions générales (module personnalisé)

9

J'ai créé un module personnalisé qui me permet de déplacer la case à cocher T&C sous les méthodes de paiement et le bouton de commande dans le div récapitulatif, comme ceci:

Vue de paiement

Maintenant, chaque fois que je sélectionne un mode de paiement, cochez la case des Termes et Conditions et appuyez sur `` Passer la commande '', ce qui suit apparaît:

Message d'erreur

J'ai essayé ce qui suit, mais malheureusement pas de chance:

Magento 2 - déplacer la position des conditions générales lors du paiement

La charge utile Ajax après avoir soumis la commande:

entrez la description de l'image ici

Lors de l'utilisation de la caisse sans module, le contenu de la charge utile (informations de paiement) a:

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

Lors de l'utilisation de mon module personnalisé, c'est comme suit:

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

Il est donc vide ... cela semble probablement être le problème. Comment puis-je réparer ça?

CODE

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 Condor
la source

Réponses:

3

Donc, après une absence de temps, j'ai trouvé ce qui fait que les accords ne sont pas validés.

Il y a ce fichier appelé agreements-assigner.js, situé dans

Module_CheckoutAgreements / view / frontend / web / js / model

Dans ce fichier, il y a une variable appelée agreementForm. Cette variable est affectée à la case à cocher des termes et accords. A l'origine comme ça:

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

Mais bien sûr, j'ai déplacé la case à cocher hors de son emplacement d'origine, donc ce chemin vers la case à cocher n'existe plus.

Si vous, par exemple, modifiez la variable comme suit:

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

Le fichier .js est capable de localiser la case à cocher de vos accords de paiement! Maintenant, votre commande peut être passée avec succès.

Une solution assez simple. J'essayais de le réparer en utilisant des fichiers .js et des trucs personnalisés, et j'ai totalement supervisé ce fichier ...;)

REMARQUE: ne modifiez pas directement le fichier principal. Copiez-le plutôt dans votre module ou thème et modifiez le fichier en fonction de vos besoins.

Condor
la source
@Bran, pouvez-vous s'il vous plaît me dire la version?
Ravi Dudhara
0

ajoutez la ligne suivante dans votre module personnalisé

app / code / Magento / CheckoutAgreements / view / frontend / web / js / view / checkout-accords.js ligne 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);
        }
    });
});

changement dans le fichier Magento / CheckoutAgreements / view / frontend / web / template / checkout / checkout-accords.html

Remplacer
'id': 'agreement_' + agreementId,
à la ligne 14

avec 

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

Remplacer

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

avec

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

en ligne 18

Référence : https://github.com/magento/magento2/commit/14b9b9813c9a16c0c45505885503cfb71bc4eb8d

lalit mohan
la source
J'utilise déjà la dernière version de Magento 2 (2.2.3). Dans cette version, tout le code est déjà comme vous l'avez mentionné. Cela vous est-il utile de partager mon code dans ma réponse?
Condor
salut @lalit mohan, j'utilise par défaut magento 2.2.4, obtenant la même erreur une fois que j'ai cliqué sur le bouton de commande. pouvez-vous s'il vous plaît expliquer en détail avec la réponse
jafar pinjar