Как создать пользовательское поле флажка для условий и положений на странице оформления заказа на одной странице magento2

Я новичок в magento2. Я хочу создать пользовательский флажок для требуемого параметра без установленного флажка клиент не может разместить заказ. Как создать пользовательское поле "Условия и положения" с помощью пользовательского кода. У меня проблема с правилами и условиями magento2 по умолчанию, они не работают.

1 answers

Просто следуя devdocs (официальная документация magento). Я разбиваю его на две части

  1. Как это сделать.
  2. Как это работает.

Проверка реализована с использованием компонентов пользовательского интерфейса. он может настраивать каждый шаг, изменяя реализацию или шаблон JavaScript для компонента, добавляя, удаляя или отключая компонент.

1. Создайте файл Js, пусть он будет вашим yourcustom.js под VendorNameSpace/ModuleName/view/frontend/web/js/view папка

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

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

Создать yourtemplatefileName.html в папке YourVendorName/ModuleName/view/frontend/web/template 

<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>

Компонент содержит js и использует html-файл в качестве шаблона.

Добавить компонент в макет страницы оформления заказа 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>

В каталоге пользовательских модулей. <your_module_dir>/view/frontend/layout/checkout_index_index.xml. (Для правильной настройки оформления заказа ваш пользовательский модуль должен зависеть от модуля Magento_Checkout. вы должны добавить composer.json, чтобы добавить зависимость 

     {
      "name": "vendorname/modulename",
      "description": "custom checkout adding checkbox component",
      "license": "GPL-3.0",
      "type": "magento2-module",
      "version": "1.0.0",
      "authors": [
        {
          "email": "[email protected]",
          "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. Как это работает **компонент - это просто файл javascript, как показано ниже, но еще больше **

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

Когда откроешь его 

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()
    });
});

Это шаблон определения здесь 

vendor/magento/module-shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html
 3
Author: lalit mohan, 2019-03-22 10:17:55