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>
-
check this link magento.stackexchange.com/questions/222416/…Devidas– Devidas2021年06月22日 08:34:30 +00:00Commented Jun 22, 2021 at 8:34
-
I am not really seeing how that link helps me. Could you explain?JerGrun– JerGrun2021年06月22日 08:40:35 +00:00Commented Jun 22, 2021 at 8:40
-
check terms and condition validation. how Magento validateDevidas– Devidas2021年06月22日 08:49:24 +00:00Commented Jun 22, 2021 at 8:49
2 Answers 2
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!
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.