I am new to magento2. I want to create a custom checkbox for a required option without checked checkbox customer cannot place an order.
How to create terms and conditions checkbox custom field using custom code.
I have an issue with magento2 default terms and conditions it is not working.
Magento2 – How to Create Custom Checkbox Field for Terms and Conditions in One Page Checkout
checkoutmagento2onepage-checkout
Related Solutions
Follow this step :
=> Step 1:
Create a checkout_index_index.xml
file in :
app/code/VendorName/PlaceOrder/view/frontend/layout path
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="VendorName_PlaceOrder::css/place_order_button.css"/>
</head>
<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">
<item name="summary" xsi:type="array">
<item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/summary</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_PlaceOrder/summary</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
=> Step 2:
Create a file summary.html
in the path
app/code/VendorName/PlaceOrder/view/frontend/web/template
<div class="opc-block-summary" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order Summary'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- 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>Place Order</span>
</button>
</div>
<!-- /ko -->
=> Step 3:
Create a file summary.js in the path
app/code/VendorName/PlaceOrder/view/frontend/web/js/view
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/summary',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
) {
'use strict';
return Component.extend({
isVisible: function () {
return stepNavigator.isProcessed('shipping');
},
initialize: function () {
$(function() {
$('body').on("click", '#place-order-trigger', function () {
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
});
});
var self = this;
this._super();
}
});
}
);
=> Step 4 :
For moving terms & condition checkbox in checkout_index_index.xml
:
<?xml version="1.0"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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">
<item name="summary" 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>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
So, after being absent for a while I've found what causes the agreements to not be validated.
There is this file called agreements-assigner.js
, located in
Module_CheckoutAgreements/view/frontend/web/js/model
In this file, there is a variable called agreementForm
. This variable is assigned to the checkbox of the terms and agreements. Originally like this:
agreementForm = $('.payment-method._active div[data-role=checkout-agreements] input');
But of course, I moved the checkbox out of it's original location, so this path to the checkbox does not exist anymore.
If you, for example, change the variable as follows:
agreementForm = $('div[data-role=checkout-agreements] input');
The .js-file is able to locate your checkout agreements checkbox! Now your order can be placed succesfully.
A rather simple fix. I was trying to fix it using custom .js and stuff, and totally oversaw this file... ;)
NOTE: do not edit the core file directly. Rather copy it to your module or theme and alter the file according to your needs.
Best Answer
Create New column 'agree' in 'quote' and 'sales_order' table at DB. and
Vendor\Module\etc\extension_attributes.xml
Vendor\Module\view\frontend\layout\checkout_index_index.xml
Vendor\Module\view\frontend\web\js\checkout\customJs.js
Vendor\Module\view\frontend\web\template\checkout\customCheckbox.html
Vendor\Module\Controller\Checkout\saveInQuote.php
Vendor\Module\etc\events.xml
Vendor\Module\Observer\PlaceOrder.php