1

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.

  • Issue with default terms and condition means? – Keyur Shah Apr 22 '18 at 18:15
  • Issue with custom theme, we are using amasty one page checkout and default magento2 terms and conditions not working with amasty. So thats why we want create custom terms and conditions checkbox. – Web developer Apr 23 '18 at 5:56
2

Just following devdocs (official magento documentation). I Break it into two

  1. How to do it.
  2. How it's work.

checkout is implemented using UI components. it can customize each step by changing the JavaScript implementation or template for a component, adding, removing or disabling a component.

1.Create Js file let consider it your yourcustom.js under VendorNameSpace/ModuleName/view/frontend/web/js/view folder

define(
    [
        'ko',
        'uiComponent'
    ],
    function (ko, Component) {
        "use strict";

        return Component.extend({
            defaults: {
                template: 'VendorNameSpace_ModuleName/yourtemplatefileName'
            },
            isRegisterNewsletter: true
        });
    }
);

Create yourtemplatefileName.html under YourVendorName/ModuleName/view/frontend/web/template folder

<div class="col-mp mp-12">
    <input type="checkbox" name="newsletter" data-bind="checked: isRegisterNewsletter, attr: {id: 'place-order-newsletter'}"/>
    <label data-bind="attr: {for: 'place-order-newsletter'}"><span data-bind="i18n: 'Custom checkbox'"></span></label>
</div>

component contains a js and take a html file as its template.

Add component to checkout page layout YourVendorName/ModuleName/view/frontend/layout/checkout_index_index.xml

<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="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <!-- Modifying an existing step-->
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="before-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="newsletter" xsi:type="array">
                                                                        <item name="component" xsi:type="string">YourVendorName_ModueName/js/view/yourcustom</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>

                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

In your custom module directory. <your_module_dir>/view/frontend/layout/checkout_index_index.xml. (For your checkout customization to be applied correctly, your custom module should depend on the Magento_Checkout module. you must add composer.json to add dependency

     {
      "name": "vendorname/modulename",
      "description": "custom checkout adding checkbox component",
      "license": "GPL-3.0",
      "type": "magento2-module",
      "version": "1.0.0",
      "authors": [
        {
          "email": "youremailid@gmail.com",
          "name": "yourname"
        }
      ],
      "keywords": [
        "magento2-module"
      ],
      "minimum-stability": "dev",
      "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/framework": "*",
        "magento/module-checkout": ">100.0",
      },
      "autoload": {
        "files": [
          "registration.php"
        ],
        "psr-4": {
          "VendorName\\ModuleName\\": ""
        }
      }
    }

2. How it's work **component is just javascript file as below but further more **

<item name="shipping_policy" xsi:type="array">
  <item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
</item>

when open it

vendor/magento/module-shipping/view/frontend/web/js/view/checkout/shipping/shipping-policy.js

/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'uiComponent',
    'Magento_Shipping/js/model/config'

], function (Component, config) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Shipping/checkout/shipping/shipping-policy'
        },
        config: config()
    });
});

it's define template here

vendor/magento/module-shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html
  • We have checked but default terms and conditions have problems with amasty one page checkout. So we want create custom terms and conditions checkbox. How to create terms and conditions with amasty one page checkout with required options checkbox. – Web developer Apr 23 '18 at 5:59
  • updated answer if Amasty doesn't have setting options for terms and conditions – lalit mohan Apr 23 '18 at 6:14
  • No there is no settings with amasty for terms and conditions . I go through the store - >terms and conditions but we have problems when we enable term and conditions through the store configuration it is show term and conditions for every payment method. So thats why we want create custom terms and conditions. – Web developer Apr 23 '18 at 6:16
  • How to create custom HTML checkbox with required fields when customer click on place order button without checked checkbox then we need to show error messages too without default magento2 code – Web developer Apr 23 '18 at 16:48
  • 1
    I'm pretty sure that in Vendor_Module/web/template you can only have html templates and not phtml as in your example (yourtemplatefileName.phtml) – Zankar Mar 7 at 12:15

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.