3

I am trying to add a required checkbox to the checkout summary of magento2, above the submit order button. I have managed to place the checkbox, but the order can still be submitted even if the checkbox is not checked. I have tried everything / searched everywhere but cant seem to figure this one out.

Problem:

  • Order can be submitted if checkbox is unchecked

Question: How do I add a 'required' validation for the checkbox, comparable to the terms & conditions in the image below: checkout two boxes with and without required validation

Thanks for the help!

My code: (note: might have allot of redundant 'required' attempts, some css classes are just for styling, even though they make no sense functionally)

(1) app/code/vendor/module/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <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">
                                            <!-- Modifying an existing step-->
                                            <item name="summary" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="itemsAfter" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="productcheck" xsi:type="array">
                                                                <item name="validation" xsi:type="array">
                                                                    <item name="required-entry" xsi:type="boolean">true</item>
                                                                </item>
                                                                <item name="component" xsi:type="string">AquiveMedia_CustomCheckBoxesCheckout/js/view/productCheck</item>
                                                            </item>
                                                           <item name="nocancel" xsi:type="array">
                                                                <item name="validation" xsi:type="array">
                                                                    <item name="required-entry" xsi:type="boolean">true</item>
                                                                </item>
                                                                <item name="component" xsi:type="string">AquiveMedia_CustomCheckBoxesCheckout/js/view/productCheck</item>
                                                            </item>             
                                                        </item>
                                                    </item>
                                                </item>    
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

(2) app/code/vendor/module/view/frontend/web/js/view/productCheck.js

define(
    [
    'ko',
    'uiComponent'
    ],
    function (ko, Component) 
   {
    "use strict";
   
    return Component.extend({
    defaults: 
   {
    template: 'AquiveMedia_CustomCheckBoxesCheckout/nocancel'
    }
    });
    }
   );

(3) app/code/vendorname/modulename/view/frontend/web/template/productcheck.html

<div class="payment-method">
    <div class="fieldset checkout-agreements">
        <div class="field required checkout-agreement">
            <input type="checkbox" class="required required-entry label" name="nocancel" data-validate="{required:true}" data-bind="attr: {id: 'nocancel'}"/>
            <label class="label" data-bind="attr: {for: 'nocancel'}"><span data-bind="i18n: 'Custom checkbox 2'"></span></label>
        </div>
    </div>
</div>
Improve this question
3

2 Answers 2

Reset to default
1

Is it possible that Magento/knockout does not know when to validate your checkbox? I think what is missing here could be the requirejs-config which could help Magento/knockout understand in which step you would like the validation.

For instance, if you would like it validated just before the order is placed you could do the following: create a (view\frontend)requirejs-config.js with

var config = {
config: {
    mixins: {
        'Magento_Checkout/js/action/place-order': {
            'AquiveMedia_CustomCheckBoxesCheckout/js/model/no-cancel-mixin': true
        }
    }
}
};

So now you need a no-cancel-mixin where you validate your checkbox (or multiple checkboxes). Your no-cancel-mixin.js:

define([
   'jquery',
   'mage/utils/wrapper',
   'AquiveMedia_CustomCheckBoxesCheckout/js/model/no-cancel'
], function ($, wrapper, noCancel) {
  'use strict';

 return function (placeOrderAction) {

    return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, messageContainer) {
        noCancel(paymentData); // so this is your function that you can use to validate things

        return originalAction(paymentData, messageContainer);
    });
};
});

Then of course you need the noCancel function:

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

var noCancel = window.getyourCheckboxhere;

/** Override default place order action and add agreement_ids to request */
return function (paymentData) {
    var someOtherVar;

    // do some validation here
    console.log('hello no-cancel');
    return false; // or true
   };
});

Now in your console you will find the "hello no-cancel" sentence. And you can play around with various validation methods.

I have used magento2 - before place order to create the above example. But you could also use the set payment information step:

'Magento_Checkout/js/action/set-payment-information': {
            'Magento_CheckoutAgreements/js/model/set-payment-information-mixin': true
 }

Good luck!

Improve this answer
0
0

simply disable the submit order button until unless they click on terms & conditions then unable it using js.

on page load disable it by css and on click checkbox enable it.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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