Magento2 में चेकआउट पृष्ठ में कस्टम फ़ील्ड कैसे जोड़ें


13

मुझे Magento 2 में चेकआउट पृष्ठ के प्रत्येक शिपिंग और भुगतान चरणों में दो कस्टम फ़ील्ड जोड़ने की आवश्यकता है और आवश्यक तालिकाओं में डेटा भी सहेजा जाना चाहिए

इसे Magento 2 में कैसे करें

जवाबों:


24

आज मैं यह बताने जा रहा हूं कि चेकआउट पृष्ठ के सभी चरणों में कस्टम फ़ील्ड कैसे जोड़ें और ऑर्डर प्लेस होने के बाद इसे सेव करें और ऑर्डर देने के बाद पोस्ट किए गए डेटा का उपयोग कैसे करें

1 फ़ील्ड delivery_date : - जहाँ ग्राहक शिपिंग स्टेप में डिलीवरी की तारीख का उल्लेख करेगा

2 क्षेत्र आदेश टिप्पणियाँ: - भुगतान कदम में होगा और आदेश रखने के बाद इस टिप्पणी को टिप्पणी इतिहास में जोड़ने के लिए जोड़ा जाएगा

चरण 1 : - सुनिश्चित करें कि डिलेवरी_डेट को उद्धरण की तरह सभी आवश्यकता तालिका में जोड़ा गया है, 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;
    }


}

अब सभी फ़ील्ड चेकआउट पृष्ठ में हैं, अब डेटा को कैसे बचाया जाए

एम 2 के विपरीत एम 2 में सभी चेकआउट पेज पूरी तरह से जेएस और एपीआई के साथ हैं

हमारे पास दो चरण हैं पहला शिपिंग है और दूसरा चरण भुगतान है जहां हमें दोनों क्षेत्रों को बचाने की आवश्यकता है

नीचे दिया गया है कि शिपिंग पते सहेजे जाने के बाद डेटा को कैसे बचाया जाए

शिपिंग कदम

M2 के उपयोग में शिपिंग जानकारी को बचाने के लिए

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

तैयार करने jsonऔर कॉल करने के लिए apiइसलिए हमें इस js को ओवरराइड करने की आवश्यकता है और phpसाइड में सेव होगा

Magento \ Checkout \ Modelout

एम 2 में एक शक्तिशाली अवधारणा है जिसे 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 हमें मिक्स का उपयोग करने की आवश्यकता होती है

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 / आदेश / सेट-शिपिंग-जानकारी-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);
    }
}

जब आप भुगतान चरणों पर जाते हैं, उसके तुरंत बाद डेटा को उद्धरण तालिका में सहेजा जाएगा

आदेश रखने के बाद हमें उसी डेटा को बचाने के लिए हमें फ़ील्डसेट का उपयोग करने की आवश्यकता है

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>

अब 'Save चरणों' भुगतान क्षेत्र को सेव करें

यदि हमारे पास भुगतान चरण में अतिरिक्त फ़ील्ड हैं और हमें उस डेटा को पोस्ट करने की आवश्यकता है तो हमें शिपिंग कदम के लिए अन्य 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;
    }
}

नोट: - यदि भुगतान चरण में फ़ील्ड को उद्धरण तालिका में सहेजने की आवश्यकता है, तो उसी फ़ंक्शन के लिए बीओफ़ोर प्लगइन का उपयोग करें और जैसा कि शिपिंग इनफॉर्मेशन मैनेजमेंटप्लगिन में किया गया है


आपके लिए चरण 1 का उल्लेख करते हुए, यह फ़ाइल कहाँ स्थित होनी चाहिए? और इसे कैसे निष्पादित किया जाएगा? जैसा कि इसकी आवश्यकता सिर्फ एक बार है।
अब्दुल मोइज़

और क्या आप सुनिश्चित हैं कि यह मेरे कस्टम चरण में फ़ॉर्म जोड़ने के लिए काम करेगा, क्योंकि आपने चेकआउट चरणों में मैगेंटो के निर्माण का उल्लेख किया है।
अब्दुल मोइज़

Sugarcode / Deliverydate \ Setup: - इनसाइड ऐप / कोड फोल्डर FYI Sugarcode: - नेम स्पेस, डिलेडडेट मॉड्यूल का नाम और सेटअप फोल्डर डिलेडडेट के अंदर है, रन अपग्रेड कमांड में कैसे इंस्टॉल करें, अगर आप अपग्रेड कमांड नहीं जानते हैं तो मुझे लगता है कि आप बहुत नए हैं एम 2 में, इसलिए कृपया
प्रदीप कुमार

धन्यवाद, मैं इसे एक नए कदम पर फ़ॉर्म जोड़ने के लिए कैसे संशोधित कर सकता हूं। कि मैंने पहले ही जोड़ा है?
अब्दुल मोइज़

अगर इसके सभी एक साथ नए कदम जैसे शिपिंग और भुगतान कदम तो नए टिकट या प्रश्न बनाने की जांच करने की आवश्यकता है
प्रदीप कुमार

1

अनुकूलन करने से पहले, निम्नलिखित करें।

  • Magento को डेवलपर मोड पर सेट करें
  • डिफ़ॉल्ट Magento कोड को संपादित न करें, इसके बजाय एक अलग मॉड्यूल में अनुकूलन जोड़ें
  • अपने कस्टम मॉड्यूल नाम के लिए Ui का उपयोग न करें

चरण 1: प्रपत्र UI घटक का JS कार्यान्वयन बनाएँ

अपनी <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>

स्थैतिक रूप:

निम्न कोड नमूना उस प्रपत्र का कॉन्फ़िगरेशन दिखाता है जिसमें चार फ़ील्ड होते हैं: पाठ इनपुट, चयन, चेकबॉक्स और दिनांक। यह फ़ॉर्म चेकआउट डेटा प्रदाता (चेकआउटप्रोवाइडर) का उपयोग करता है जो कि 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>

उम्मीद है की यह मदद करेगा।


आपने स्टैटिक फॉर्म कोड जोड़ा, इसका फ़ाइल नाम क्या होगा और इसे कहाँ रखा जाएगा?
सनाउल्ला अहमद

@ सनाउल्लाअहमद एक आसान तरीका भी है यानी इस तरह के एक मॉड्यूल का उपयोग करने के लिए ।
हेनरी रोजर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.