Magento2 এ চেকআউট পৃষ্ঠায় কাস্টম ক্ষেত্রগুলি কীভাবে যুক্ত করবেন

13

আমি প্রতিটি শিপিং এবং ম্যাজেন্টো 2 এ চেকআউট পৃষ্ঠার অর্থ প্রদানের পদক্ষেপগুলিতে দুটি কাস্টম ফিল্ড যুক্ত করতে হবে এবং প্রয়োজনীয় টেবিলেও ডেটা সংরক্ষণ করা উচিত

ম্যাজেন্টো 2 এ এটি কীভাবে করবেন

magento2  checkout 
— প্রদীপ কুমার
সূত্র

উত্তর:

24

আজ আমি কীভাবে চেকআউট পৃষ্ঠার সমস্ত পদক্ষেপে কাস্টম ক্ষেত্রগুলি যুক্ত করব এবং অর্ডার দেওয়ার পরে এটি সংরক্ষণ করব এবং অর্ডার দেওয়ার পরে পোস্ট ডেটা কীভাবে ব্যবহার করতে হবে তাও আমি ব্যাখ্যা করতে যাচ্ছি

1 ম ক্ষেত্র delivery_date : - যেখানে গ্রাহক শিপিং পদক্ষেপে বিতরণ তারিখে উল্লেখ করবে

২ য় ক্ষেত্রের অর্ডার মন্তব্যসমূহ: - অর্থ প্রদানের পদক্ষেপে থাকবে এবং অর্ডার দেওয়ার পরে এই মন্তব্যগুলি মন্তব্য ইতিহাসের অর্ডার যোগ করা হবে

পদক্ষেপ 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এবং অন্যটি নীচের প্লাগইনটি হল প্লাগইনের মাধ্যমে ক্ষেত্রগুলি কীভাবে যুক্ত করতে হয় is

আমরা 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;
    }


}

এখন সমস্ত ক্ষেত্র চেকআউট পৃষ্ঠায় রয়েছে, এখন কীভাবে ডেটা সংরক্ষণ করবেন

এম 1 এর বিপরীতে সমস্ত চেকআউট পৃষ্ঠা সম্পূর্ণ জেএস এবং এপিআই নকআউট

আমাদের দুটি পদক্ষেপ রয়েছে প্রথমটি শিপিং এবং দ্বিতীয় পদক্ষেপটি হল অর্থ প্রদান যেখানে আমাদের উভয় ক্ষেত্র সংরক্ষণ করতে হবে

শিপিং ঠিকানাগুলি সংরক্ষণ করার পরে কীভাবে ডেটা সংরক্ষণ করবেন তা নীচে is

শিপিং পদক্ষেপ

এম 2 ব্যবহারে শিপিংয়ের তথ্য সংরক্ষণ করতে

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

প্রস্তুতি jsonএবং কল apiযাতে আমাদের এই জেএস ওভাররাইড করা প্রয়োজন এবং phpপাশাপাশি সেভ ঘটবে

Age ম্যাজেন্টো \ চেকআউট \ মডেল \ শিপিংইনফরমেশন ম্যানেজমেন্ট :: সেভএড্রেস ইনফর্মেশন () এবং শিপিং-ইনফরমেশন ম্যানেজমেন্ট ম্যাজেন্টো implemented চেকআউট \ এপি \ ডেটা \ শিপিংআইফর্মেশন ইনফরমেশন দ্বারা প্রয়োগ করা হয়েছে

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

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

জেএস / অর্ডার / সেট-শিপিং-ইনফরমেশন-মিক্সিন.জেএস ডেলিভারি_ডেট

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

পরবর্তী পদক্ষেপটি এই কাস্টম ফিল্ড পোস্টের ডেটা উদ্ধৃতিতে সংরক্ষণ করছে। আমাদের মধ্যে একটি এক্সএমএল নোড যুক্ত করে অন্য একটি প্লাগইন তৈরি করা যাকetc/di.xml

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

একটি ফাইল তৈরি করুন সুগারকোড \ ডেলিভারিডিট \ প্লাগিন \ চেকআউট \ শিপিং-ইনফরমেশনম্যানেজমেন্টপ্লাগিন.এফপি

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

এখন পেমেন্ট পদক্ষেপ ক্ষেত্র সংরক্ষণ করুন

যদি আমাদের পেমেন্ট পদক্ষেপে অতিরিক্ত ক্ষেত্র থাকে এবং আমাদের সেই ডেটা পোস্ট করতে হয় তবে শিপিংয়ের পদক্ষেপের জন্য আমাদের অন্যান্য জেসগুলি ওভাররাইড করতে হবে

শিপিংয়ের মতো আমাদের কাছে পেমেন্টের তথ্য রয়েছে

ডাব্লুডাব্লু হ'ল ওভাররাইডের মাধ্যমে অচল হয়ে উঠতে পারে 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 উল্লেখ করে, এই ফাইলটি কোথায় থাকা উচিত? এবং কিভাবে এটি কার্যকর করা হবে? এটি মাত্র এক সময় প্রয়োজন হিসাবে।
— আব্দুল মোইজ
এবং আপনি কি নিশ্চিত যে এটি আমার কাস্টম ধাপে ফর্ম যুক্ত করার জন্য কাজ করবে, কারণ আপনি চেকআউট পদক্ষেপে ম্যাজেন্টোর বিল্ড উল্লেখ করছেন।
— আব্দুল মোইজ
সুগারকোড / ডেলিভারিডিট \ সেটআপ: অ্যাপের ভিতরে / কোড ফোল্ডার এফওয়াইআই সুগারকোড: - নাম স্থান, ডেলিভারিডেট মডিউল নাম এবং সেটআপ ফোল্ডারটি ডেলিভারিডেটের ভিতরে রয়েছে, রান আপগ্রেড কমান্ডে কীভাবে ইনস্টল করবেন, আপনি যদি আপগ্রেড কমান্ড জানেন না তবে আমার মনে হয় আপনি খুব নতুন এম 2 তে, সুতরাং দয়া করে বেসিক এম 2 এর মধ্য দিয়ে যান
— প্রদীপ কুমার
ধন্যবাদ, নতুন পদক্ষেপে ফর্ম যুক্ত করতে আমি কীভাবে এটি সংশোধন করতে পারি। আমি ইতিমধ্যে যোগ করেছি?
— আবদুল মোইজ
শিপিং এবং অর্থপ্রদানের পদক্ষেপের মতো যদি এটি সমস্ত একসাথে নতুন পদক্ষেপগুলি হয় তবে নতুন টিকিট তৈরি করতে বা প্রশ্ন তৈরি করতে হবে
— প্রদীপ কুমার
1

কাস্টমাইজেশন করার আগে নিম্নলিখিতটি করুন।

  • বিকাশকারী মোডে ম্যাজেন্টো সেট করুন
  • ডিফল্ট ম্যাজেন্টো কোডটি সম্পাদনা করবেন না, পরিবর্তে পৃথক মডিউলটিতে কাস্টমাইজেশন যুক্ত করুন
  • আপনার কাস্টম মডিউল নামের জন্য ইউআই ব্যবহার করবেন না

পদক্ষেপ 1: ফর্ম 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: এইচটিএমএল টেমপ্লেট তৈরি করুন

টেমপ্লেট ডিরেক্টরিতে knockout.jsফর্ম উপাদানটির জন্য এইচটিএমএল টেমপ্লেট যুক্ত করুন <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>

স্থিতিশীল ফর্ম:

নিম্নলিখিত কোডের নমুনা ফর্মের কনফিগারেশনটি দেখায় যাতে চারটি ক্ষেত্র রয়েছে: পাঠ্য ইনপুট, নির্বাচন, চেকবক্স এবং তারিখ। এই ফর্মটি চেকআউট ডেটা সরবরাহকারী (চেকআউটপ্রভাইডার) ব্যবহার করে যা ম্যাগানোটো_চেকআউট মডিউলটিতে প্রবর্তিত হয়েছিল:

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

আশাকরি এটা সাহায্য করবে.

— হেনরি রজার
সূত্র
আপনি স্ট্যাটিক ফর্ম কোড যুক্ত করেছেন, এর ফাইলের নামটি কী হবে এবং এটি কোথায় স্থাপন করা হবে?
— সানাউল্লাহ আহমদ
@SanaullahAhmad সেখানে একটি সহজ উপায় খুব অর্থাত মত একটি মডিউল ব্যবহার করা এই এক ।
— হেনরি রজার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.