วิธีเพิ่มฟิลด์ที่กำหนดเองไปยังหน้าชำระเงินใน Magento2

ฉันต้องเพิ่มสองฟิลด์ที่กำหนดเองในแต่ละขั้นตอนการจัดส่งและการชำระเงินของหน้าชำระเงินใน Magento 2 และข้อมูลควรถูกบันทึกไว้ในตารางที่จำเป็น

ทำอย่างไรใน Magento 2

วันนี้ฉันจะอธิบายวิธีเพิ่มฟิลด์ที่กำหนดเองในทุกขั้นตอนของหน้าเช็คเอาต์และบันทึกหลังจากสั่งซื้อแล้วและวิธีใช้ข้อมูลที่โพสต์หลังจากสั่งซื้อ

ฟิลด์ที่ 1 delivery_date : - ที่ลูกค้าจะพูดถึง ณ วันที่ส่งมอบในขั้นตอนการจัดส่ง

ลำดับที่2ความคิดเห็น: - จะอยู่ในขั้นตอนการชำระเงินและหลังจากทำการสั่งซื้อความคิดเห็นนี้จะถูกเพิ่มลงในประวัติการสั่งซื้อความคิดเห็น

ขั้นตอนที่ 1 : - ตรวจสอบให้แน่ใจว่ามีการเพิ่ม delivery_date ในตารางความต้องการทั้งหมดเช่นใบเสนอราคาsales_orderและsales_order_gridผ่านการติดตั้งหรืออัพเกรดสคริปต์

<?php

namespace Sugarcode\Deliverydate\Setup;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;

/**
 * @codeCoverageIgnore
 */
class InstallSchema implements InstallSchemaInterface
{

    /**
     * {@inheritdoc}
     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
     */
    public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $installer = $setup;
        $installer->startSetup();

        $installer->getConnection()->addColumn(
            $installer->getTable('quote'),
            'delivery_date',
            [
                'type' => 'datetime',
                'nullable' => false,
                'comment' => 'Delivery Date',
            ]
        );

        $installer->getConnection()->addColumn(
            $installer->getTable('sales_order'),
            'delivery_date',
            [
                'type' => 'datetime',
                'nullable' => false,
                'comment' => 'Delivery Date',
            ]
        );

        $installer->getConnection()->addColumn(
            $installer->getTable('sales_order_grid'),
            'delivery_date',
            [
                'type' => 'datetime',
                'nullable' => false,
                'comment' => 'Delivery Date',
            ]
        );

        $setup->endSetup();
    }
}

ขั้นตอนที่ 2 : - การเพิ่มฟิลด์ที่กำหนดเองในขั้นตอนการจัดส่งและการชำระเงินเราสามารถบรรลุสองวิธีหนึ่งจากlayout xmlและอื่น ๆ คือปลั๊กอินด้านล่างเป็นวิธีการเพิ่มฟิลด์ผ่านปลั๊กอิน

เราสร้างdi.xmlไฟล์ในโมดูลของเรา -Sugarcode/Deliverydate/etc/frontend/di.xml

เราใช้พื้นที่ส่วนหน้าเพื่อรักษาความสะอาดปลั๊กอินของเราควรทำงานเฉพาะที่ส่วนหน้า

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="add-delivery-date-field"
                type="Sugarcode\Deliverydate\Model\Checkout\LayoutProcessorPlugin" sortOrder="10"/>
    </type>
</config>

Sugarcode \ ปลั๊กอิน \ ร้า \ LayoutProcessor.php

<?php
namespace Sugarcode\Plugin\Checkout;


class LayoutProcessor
{

    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $scopeConfig;

    /**
     * @var \Magento\Checkout\Model\Session
     */
    protected $checkoutSession;

    /**
     * @var \Magento\Customer\Model\AddressFactory
     */
    protected $customerAddressFactory;

    /**
     * @var \Magento\Framework\Data\Form\FormKey
     */
    protected $formKey;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\CheckoutAgreements\Model\ResourceModel\Agreement\CollectionFactory $agreementCollectionFactory,
        \Magento\Checkout\Model\Session $checkoutSession,
        \Magento\Customer\Model\AddressFactory $customerAddressFactory
    ) {
        $this->scopeConfig = $context->getScopeConfig();
        $this->checkoutSession = $checkoutSession;
        $this->customerAddressFactory = $customerAddressFactory;
    }
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['before-form']['children']['delivery_date'] = [
             'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/date',
                'options' => [],
                'id' => 'delivery-date'
            ],
            'dataScope' => 'shippingAddress.delivery_date',
            'label' => 'Delivery Date',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 200,
            'id' => 'delivery-date'
        ];


            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list']['children']['before-place-order']['children']['comment'] = [
                'component' => 'Magento_Ui/js/form/element/textarea',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'options' => [],
                    'id' => 'comment'
                ],
                'dataScope' => 'ordercomment.comment',
                'label' => 'Order Comment',
                'notice' => __('Comments'),
                'provider' => 'checkoutProvider',
                'visible' => true,
                'sortOrder' => 250,
                'id' => 'comment'
            ];

        return $jsLayout;
    }


}

ขณะนี้ฟิลด์ทั้งหมดอยู่ในหน้าเช็คเอาต์ตอนนี้วิธีบันทึกข้อมูล

ซึ่งแตกต่างจาก M1 ใน M2 หน้าชำระเงินทั้งหมดเป็นสิ่งที่น่าพิศวงอย่างสมบูรณ์ JS และ API

เรามีสองขั้นตอนแรกขั้นตอนหนึ่งคือการจัดส่งและขั้นตอนที่สองคือการชำระเงินที่เราต้องบันทึกทั้งสองฟิลด์

ด้านล่างนี้เป็นวิธีบันทึกข้อมูลหลังจากบันทึกที่อยู่จัดส่งแล้ว

ขั้นตอนการจัดส่ง

เพื่อบันทึกข้อมูลการจัดส่งใน M2 ใช้

app/code/Magento/Checkout/view/frontend/web/js/model/shipping-save-processor/default.js

เพื่อเตรียมความพร้อมjsonและการโทรapiดังนั้นเราจึงจำเป็นต้องแทนที่ js นี้และในphpด้านการบันทึกจะเกิดขึ้น

\ Magento \ Checkout \ Model \ Shipping การจัดการข้อมูล :: SaveAddressInformation () และ ShippingInformationManagement ดำเนินการโดย Magento \ Checkout \ Api \ Data \ ShippingInformationInterface

M2 มีแนวคิดที่ทรงพลังอย่างหนึ่งที่เรียกว่าextension_attributes ซึ่งใช้สำหรับข้อมูลแบบไดนามิกไปยังตารางหลักทำให้ใช้งานได้

ขั้นตอนที่ 3 : - สร้างไฟล์Deliverydate/etc/extension_attributes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
        <attribute code="delivery_date" type="string"/>
    </extension_attributes>
    <extension_attributes for="Magento\Quote\Api\Data\PaymentInterface">
        <attribute code="comment" type="string"/>
    </extension_attributes>
</config>

เพื่อแทนที่ js สร้างไฟล์ js ที่Deliverydate/view/frontend/requirejs-config.js เราต้องใช้ mixns

var config = {
config: {
    mixins: {
        'Magento_Checkout/js/action/place-order': {
            'Sugarcode_Deliverydate/js/order/place-order-mixin': true
        },
        'Magento_Checkout/js/action/set-payment-information': {
            'Sugarcode_Deliverydate/js/order/set-payment-information-mixin': true
        },
        'Magento_Checkout/js/action/set-shipping-information': {
            'Sugarcode_Deliverydate/js/order/set-shipping-information-mixin': true
        }
    }
};

js / order / set-shipping-information-mixin.js delivery_date

/**
 * @author aakimov
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
    'use strict';

    return function (setShippingInformationAction) {

        return wrapper.wrap(setShippingInformationAction, function (originalAction) {
            var shippingAddress = quote.shippingAddress();
            if (shippingAddress['extension_attributes'] === undefined) {
                shippingAddress['extension_attributes'] = {};
            }

            // you can extract value of extension attribute from any place (in this example I use customAttributes approach)
            shippingAddress['extension_attributes']['delivery_date'] = jQuery('[name="delivery_date"]').val();
            // pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
            return originalAction();
        });
    };
});

ขั้นตอนต่อไปคือการบันทึกข้อมูลการโพสต์ฟิลด์ที่กำหนดเองนี้ไปยังเครื่องหมายคำพูด มาสร้างปลั๊กอินอีกอันด้วยการเพิ่มโหนด xml ในเราetc/di.xml

<type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="save-in-quote" type="Sugarcode\Deliverydate\Plugin\Checkout\ShippingInformationManagementPlugin" sortOrder="10"/>
</type>

สร้างไฟล์ Sugarcode \ Deliverydate \ Plugin \ Checkout \ ShippingInformationManagementPlugin.php

<?php

namespace Sugarcode\Deliverydate\Plugin\Checkout;

class ShippingInformationManagementPlugin
{

    protected $quoteRepository;

    public function __construct(
        \Magento\Quote\Model\QuoteRepository $quoteRepository
    ) {
        $this->quoteRepository = $quoteRepository;
    }

    /**
     * @param \Magento\Checkout\Model\ShippingInformationManagement $subject
     * @param $cartId
     * @param \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
     */
    public function beforeSaveAddressInformation(
        \Magento\Checkout\Model\ShippingInformationManagement $subject,
        $cartId,
        \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
    ) {
        $extAttributes = $addressInformation->getShippingAddress()->getExtensionAttributes();
        $deliveryDate = $extAttributes->getDeliveryDate();
        $quote = $this->quoteRepository->getActive($cartId);
        $quote->setDeliveryDate($deliveryDate);
    }
}

หลังจากนั้นเมื่อคุณย้ายไปยังข้อมูลขั้นตอนการชำระเงินจะถูกบันทึกไว้ในตารางใบเสนอราคา

เพื่อบันทึกข้อมูลเดียวกันหลังจากทำการสั่งซื้อเราจำเป็นต้องใช้ fieldset

etc / fieldset.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Object/etc/fieldset.xsd">
  <scope id="global">
    <fieldset id="sales_convert_quote">
      <field name="delivery_date">
        <aspect name="to_order"/>
      </field>
    </fieldset>
  </scope>
</config>

ตอนนี้ให้บันทึกฟิลด์ขั้นตอนการชำระเงิน

หากเรามีช่องพิเศษในขั้นตอนการชำระเงินและเราจำเป็นต้องโพสต์ข้อมูลนั้นเราจำเป็นต้องแทนที่ js อื่น ๆ ที่เราทำในขั้นตอนการจัดส่ง

เช่นเดียวกับข้อมูลการจัดส่งเรามีข้อมูลการชำระเงิน

ww สามารถบรรลุผลได้โดยการแทนที่คือMagento_Checkout/js/action/place-order.js (แต่จะมีปัญหาเมื่อเปิดใช้ข้อตกลงดังนั้นเราจึงจำเป็นต้องใช้มิกซ์อินดังที่กล่าวไว้ในอีกครั้ง)

Sugarcode_Deliverydate/js/order/place-order-mixin.js


/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'jquery',
    'mage/utils/wrapper',
    'Sugarcode_Deliverydate/js/order/ordercomment-assigner'
], function ($, wrapper, ordercommentAssigner) {
    'use strict';

    return function (placeOrderAction) {

        /** Override default place order action and add comments to request */
        return wrapper.wrap(placeOrderAction, function (originalAction, paymentData, messageContainer) {
            ordercommentAssigner(paymentData);

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

Sugarcode_Deliverydate / js / สั่งซื้อ / ordercomment-assigner.js

/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery'
], function ($) {
    'use strict';


    /** Override default place order action and add comment to request */
    return function (paymentData) {

        if (paymentData['extension_attributes'] === undefined) {
            paymentData['extension_attributes'] = {};
        }

        paymentData['extension_attributes']['comment'] = jQuery('[name="ordercomment[comment]"]').val();
    };
});

Sugarcode_Deliverydate / js / สั่งซื้อ / ตั้งชำระเงินข้อมูล mixin.js

/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery',
    'mage/utils/wrapper',
    'Sugarcode_Deliverydate/js/order/ordercomment-assigner'
], function ($, wrapper, ordercommentAssigner) {
    'use strict';

    return function (placeOrderAction) {

        /** Override place-order-mixin for set-payment-information action as they differs only by method signature */
        return wrapper.wrap(placeOrderAction, function (originalAction, messageContainer, paymentData) {
            ordercommentAssigner(paymentData);

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

และจำเป็นต้องสร้างปลั๊กอินสำหรับ Magento\Checkout\Model\PaymentInformationManagement

ดังนั้นในการetc/diเพิ่มรหัสด้านล่าง

 <type name="Magento\Checkout\Model\PaymentInformationManagement">
        <plugin name="order_comments_save-in-order" type="Sugarcode\Deliverydate\Plugin\Checkout\PaymentInformationManagementPlugin" sortOrder="10"/>
    </type>

จากนั้นสร้างไฟล์ Sugarcode\Deliverydate\Plugin\Checkout\PaymentInformationManagementPlugin.php

/**
 * One page checkout processing model
 */
class PaymentInformationManagementPlugin
{

    protected $orderRepository;

    public function __construct(
        \Magento\Sales\Api\OrderRepositoryInterface $orderRepository
    ) {
        $this->orderRepository = $orderRepository;
    }


    public function aroundSavePaymentInformationAndPlaceOrder(
        \Magento\Checkout\Model\PaymentInformationManagement $subject,
        \Closure $proceed,
        $cartId,
        \Magento\Quote\Api\Data\PaymentInterface $paymentMethod,
        \Magento\Quote\Api\Data\AddressInterface $billingAddress = null
    ) {
        $result = $proceed($cartId, $paymentMethod, $billingAddress);

         if($result){

            $orderComment =$paymentMethod->getExtensionAttributes();
             if ($orderComment->getComment())
               $comment = trim($orderComment->getComment());
           else
               $comment = ''; 


            $history = $order->addStatusHistoryComment($comment);
            $history->save();
            $order->setCustomerNote($comment);                
         }

        return $result;
    }
}

หมายเหตุ: - หากฟิลด์ในขั้นตอนการชำระเงินจำเป็นต้องบันทึกลงในตารางอ้างจากนั้นใช้ปลั๊กอิน beofore สำหรับฟังก์ชั่นเดียวกันและปฏิบัติตามเช่นเดียวกับใน ShippingInformationManagementPlugin

ก่อนทำการปรับแต่งให้ทำดังต่อไปนี้

• ตั้งค่า Magento เป็นโหมดผู้พัฒนา
• อย่าแก้ไขรหัสวีโอไอพีเริ่มต้นแทนที่จะเพิ่มการกำหนดเองในโมดูลแยกต่างหาก
• อย่าใช้ Ui สำหรับชื่อโมดูลที่กำหนดเองของคุณ

ขั้นตอนที่ 1: สร้างการใช้งาน JS ขององค์ประกอบ UI แบบฟอร์ม

ใน<your_module_dir>/view/frontend/web/js/view/ไดเรกทอรีของคุณสร้างไฟล์. js ที่ใช้แบบฟอร์ม

/*global define*/
define([
    'Magento_Ui/js/form/form'
], function(Component) {
    'use strict';
    return Component.extend({
        initialize: function () {
            this._super();
            // component initialization logic
            return this;
        },

        /**
         * Form submit handler
         *
         * This method can have any name.
         */
        onSubmit: function() {
            // trigger form validation
            this.source.set('params.invalid', false);
            this.source.trigger('customCheckoutForm.data.validate');

            // verify that form data is valid
            if (!this.source.get('params.invalid')) {
                // data is retrieved from data provider by value of the customScope property
                var formData = this.source.get('customCheckoutForm');
                // do something with form data
                console.dir(formData);
            }
        }
    });
});

ขั้นตอนที่ 2: สร้างเทมเพลต HTML

เพิ่มknockout.jsเทมเพลต HTML สำหรับองค์ประกอบของรูปแบบภายใต้<your_module_dir>/view/frontend/web/ไดเรกทอรีแม่แบบ

ตัวอย่าง:

<div>
    <form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset class="fieldset">
            <legend data-bind="i18n: 'Custom Checkout Form'"></legend>
            <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </fieldset>
        <button type="reset">
            <span data-bind="i18n: 'Reset'"></span>
        </button>
        <button type="button" data-bind="click: onSubmit" class="action">
            <span data-bind="i18n: 'Submit'"></span>
        </button>
    </form>
</div>

ล้างไฟล์หลังจากการแก้ไข

หากคุณแก้ไขเทมเพลต. html ที่กำหนดเองหลังจากนำไปใช้กับหน้าร้านค้าการเปลี่ยนแปลงจะไม่มีผลจนกว่าคุณจะทำสิ่งต่อไปนี้:

ลบไฟล์ทั้งหมดในpub/static/frontendและvar/view_preprocessedไดเรกทอรี โหลดหน้าซ้ำ

ขั้นตอนที่ 3: ประกาศฟอร์มในเค้าโครงหน้าเช็คเอาต์

เพิ่มเนื้อหาในขั้นตอนการจัดสร้างการปรับปรุงรูปแบบในcheckout_index_index.xml<your_module_dir>/view/frontend/layout/

มันควรจะคล้ายกับต่อไปนี้

<?xml version="1.0"?>
<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="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <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">
                                                                <!-- Your form declaration here -->
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

รูปแบบคงที่:

ตัวอย่างโค้ดต่อไปนี้แสดงการกำหนดค่าของฟอร์มที่มีสี่ฟิลด์: การป้อนข้อความเลือกช่องทำเครื่องหมายและวันที่ แบบฟอร์มนี้ใช้ผู้ให้บริการข้อมูลการชำระเงิน (checkoutProvider) ที่เปิดตัวในโมดูล Magento_Checkout:

<item name="custom-checkout-form-container" xsi:type="array">
    <item name="component" xsi:type="string">%your_module_dir%/js/view/custom-checkout-form</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">%your_module_dir%/custom-checkout-form</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="custom-checkout-form-fieldset" xsi:type="array">
            <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
            <item name="component" xsi:type="string">uiComponent</item>
            <!-- the following display area is used in template (see below) -->
            <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
            <item name="children" xsi:type="array">
                <item name="text_field" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                    <item name="config" xsi:type="array">
                        <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                    </item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                    <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
                    <item name="label" xsi:type="string">Text Field</item>
                    <item name="sortOrder" xsi:type="string">1</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="string">true</item>
                    </item>
                </item>
                <item name="checkbox_field" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
                    <item name="config" xsi:type="array">
                        <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
                    </item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                    <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
                    <item name="label" xsi:type="string">Checkbox Field</item>
                    <item name="sortOrder" xsi:type="string">3</item>
                </item>
                <item name="select_field" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
                    <item name="config" xsi:type="array">
                        <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                    </item>
                    <item name="options" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="label" xsi:type="string">Please select value</item>
                            <item name="value" xsi:type="string"></item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="label" xsi:type="string">Value 1</item>
                            <item name="value" xsi:type="string">value_1</item>
                        </item>
                        <item name="2" xsi:type="array">
                            <item name="label" xsi:type="string">Value 2</item>
                            <item name="value" xsi:type="string">value_2</item>
                        </item>
                    </item>
                    <!-- value element allows to specify default value of the form field -->
                    <item name="value" xsi:type="string">value_2</item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                    <item name="dataScope" xsi:type="string">customCheckoutForm.select_field</item>
                    <item name="label" xsi:type="string">Select Field</item>
                    <item name="sortOrder" xsi:type="string">2</item>
                </item>
                <item name="date_field" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
                    <item name="config" xsi:type="array">
                        <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
                    </item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                    <item name="dataScope" xsi:type="string">customCheckoutForm.date_field</item>
                    <item name="label" xsi:type="string">Date Field</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="string">true</item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

หวังว่านี่จะช่วยได้