2

On Magento 2.2.3 and I have an issue regarding the terms and conditions validation on checkout. If you have two different payment method, you select one you click place order you will have the error message asking the user to check the T&C checkbox. Then you select the other payment method click on the place order button and Magento won't display the error message even if you don't check the T&C checkbox.

Here's the files I tried to update :

checkout-agreements.html

<div data-role="checkout-agreements">
<div class="checkout-agreements" data-bind="visible: isVisible">
    <!-- ko foreach: agreements -->
        <!-- ko if: ($parent.isAgreementRequired($data)) -->
        <div class="checkout-agreement required">
            <input type="checkbox" class="required-entry"
                   data-bind="attr: {
                                'id': $parent.getCheckboxId($parentContext, agreementId),
                                'name': 'agreement[' + agreementId + ']',
                                'value': agreementId
                                }"/>
            <label data-bind="attr: {'for': $parent.getCheckboxId($parentContext, agreementId)}">
                <button type="button"
                        class="action action-show"
                        data-bind="click: function(data, event) { return $parent.showContent(data, event) }"
                        >
                    <span data-bind="html: checkboxText"></span>
                </button>
            </label>
        </div>
        <!-- /ko -->
        <!-- ko ifnot: ($parent.isAgreementRequired($data)) -->
        <div class="checkout-agreement">
            <button type="button" class="action action-show"
                    data-bind="click: function(data, event) { return $parent.showContent(data, event) }">
                <span data-bind="html: checkboxText"></span>
            </button>
        </div>
        <!-- /ko -->
    <!-- /ko -->
    <div id="checkout-agreements-modal" data-bind="afterRender: initModal" style="display: none">
        <div class="checkout-agreements-item-content" data-bind="html: modalContent"></div>
    </div>
</div>

agreement-validator.js

define([
'jquery',
'mage/validation'
], function ($) {
'use strict';

var checkoutConfig = window.checkoutConfig,
    agreementsConfig = checkoutConfig ? checkoutConfig.checkoutAgreements : {},
    agreementsInputPath = '.payment-method._active div.checkout-agreements input';

return {
    /**
     * Validate checkout agreements
     *
     * @returns {Boolean}
     */
    validate: function () {
        var isValid = true;

        if (!agreementsConfig.isEnabled || $(agreementsInputPath).length === 0) {
            return true;
        }

        $(agreementsInputPath).each(function (index, element) {
            if (!$.validator.validateSingleElement(element, {
                errorElement: 'div'
            })) {
                isValid = false;
            }
        });

        return isValid;
    }
};

});

Thanks !

0

I have this problem too and sadly haven't found the right fix for it yet. But I do have a workaround which can work for some people.

In the backend go to:

Stores > Terms and Conditions > Select your terms and conditions > Applied > Automatically.

This makes it so that the terms are agreed to automatically if the customers clicks on 'Buy'. The checkbox disappears and is replaced with a link. For some countries the checkbox is required so I am still looking for the right solution. But this fix might be helpful for some people.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.