চেকআউট ফর্ম - একটি শ্রেণিতে একাধিক উপাদান কীভাবে মোড়ানো যায় - ম্যাজেন্টো 2


14

আপনি একটি ডিভের মধ্যে কীভাবে দুটি চেকআউট ফর্ম উপাদানগুলি মোড়ানো করবেন?

উদাহরণস্বরূপ বলা যাক যে আমি এই দেশটি এবং শ্রেণিবদ্ধের সাথে একটি ডিপগুলিতে জিপ / পোস্টকোড ক্ষেত্রগুলি लपेटতে চেয়েছিলাম example-class, আমি কীভাবে এটি করব?

এখানে চিত্র বর্ণনা লিখুন

আমি যা চেষ্টা করেছি

আমি তাদের শিশু হিসাবে যুক্ত করে এটি অর্জনের চেষ্টা করেছি <item name="shippingAddress" xsi:type="array">তবে এটি কেবল সীমান্তে ত্রুটি ঘটায়। যদিও আমি ভিতরে কোনও লেবেল ছাড়াই একটি ফাঁকা পাঠ্য ইনপুট পেয়েছি .example-classসীমান্তে ত্রুটি ছিল।

ভূল: Cannot read property 'indexedOptions' of undefined

এটি আমার দ্রুত চেষ্টা:

Magento_Checkout / ওয়েব / টেমপ্লেট / শিপিং-ঠিকানা / form.html

<div id="shipping-new-address-form" class="fieldset address">
    <div class="testing">
        <!-- ko foreach: getRegion('example-class') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
    <!-- ko foreach: getRegion('additional-fieldsets') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
</div>

checkout_index_index.xml

<item name="example-for-adding-class" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="config" xsi:type="array">
        <item name="deps" xsi:type="array">
            <item name="0" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
    <item name="displayArea" xsi:type="string">example-class</item>
    <item name="children" xsi:type="array">
        <!-- The following items override configuration of corresponding address attributes -->
        <item name="region" xsi:type="array">
            <!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field -->
            <item name="visible" xsi:type="boolean">false</item>
        </item>
        <item name="region_id" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/form/field</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                <item name="customEntry" xsi:type="string">shippingAddress.region</item>
            </item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <!-- Value of region_id field is filtered by the value of county_id attribute -->
            <item name="filterBy" xsi:type="array">
                <item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
                <item name="field" xsi:type="string">country_id</item>
            </item>
        </item>
        <item name="postcode" xsi:type="array">
            <!-- post-code field has custom UI component -->
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
            <item name="sortOrder" xsi:type="string">2</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="string">true</item>
            </item>
        </item>
        <item name="country_id" xsi:type="array">
            <item name="sortOrder" xsi:type="string">1</item>
        </item>
    </item>
</item>

এটি করার একটি সহজ উপায় থাকতে হবে, হয় আমি কিছু অনুপস্থিত বা এটি হ'ল ওভার ইঞ্জিনিয়ারিংয়ের সংজ্ঞা। দুটি উপাদানের উপর একটি বিভাজন যোগ করা কখনই এই কঠিন হওয়া উচিত নয়।

উত্তর:


17

খুব মজার প্রশ্ন। চেকআউট বাস্তবায়ন সম্পর্কে আমার শেষ অনুমানের উত্তর দিন। আপনাকে 1 ফাইলে 1 টিরও বেশি পরিবর্তন যুক্ত করতে হবে বলে এটি কিছুটা বেশি ইঞ্জিনিয়ারড হতে পারে।

পদ্ধতির জন্য ম্যাজেন্টো 2 কোর মডিউলগুলিতে সম্পাদন সম্পাদনের দরকার নেই।

আপনার লক্ষ্য অর্জনের জন্য এবং কাস্টম উপাদানটিতে চেকআউট শিপিং ঠিকানা ক্ষেত্রগুলি মোড়ানোর জন্য নিম্নলিখিত উপাদানগুলি যুক্ত করা উচিত:

  1. নতুন UI উপাদান সংজ্ঞা সহ কাস্টম চেকআউট_ইন্ডেক্স_ইন্ডেক্স.এক্সএমএল ফাইল
  2. কাস্টম উপাদান সহ নতুন এইচটিএমএল টেমপ্লেট
  3. লেআউট প্রসেসর প্লাগইন
  4. নতুন প্লাগইনটির জন্য di.xML ঘোষণা

Custom_Checkout \ দৃশ্য \ ফ্রন্টএন্ড \ বিন্যাস \ checkout_index_index.xml ফাইল:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="custom-field-group" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="sortOrder" xsi:type="string">0</item>
                                                                <item name="template" xsi:type="string">Custom_Checkout/checkout/field-group</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="field-group" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">field-group</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

বিন্যাসে, আমাদের নতুন কাস্টম-ফিল্ড-গ্রুপ UI উপাদান যুক্ত করা উচিত। উপাদানটির নিজস্ব টেম্পলেট রয়েছে কাস্টম_চেকআউট \ ভিউ \ ওয়েব \ টেমপ্লেট \ চেকআউট \ ফিল্ড-গ্রুপ এইচটিএমএল যেখানে সমস্ত ক্ষেত্র রেন্ডার করা হয়। এছাড়াও, কাস্টম-ফিল্ড-গোষ্ঠী উপাদানটির "0" মান রয়েছে সারণি অর্ডার নোডের জন্য। শিপিং-অ্যাড্রেস-ফিল্ডসেট উপাদান হিসাবে সমস্ত ক্ষেত্র ঘোষণার আগে এটি উপাদানটিকে রেন্ডারিংয়ের অনুমতি দেয় ।

এছাড়াও, নিজস্ব ফিল্ম -গ্রুপের ইউআই উপাদান রয়েছে যার নিজস্ব ডিসপ্লেআরিয়া সেটিং রয়েছে।

Custom_Checkout \ দৃশ্য \ ওয়েব \ টেমপ্লেট \ চেকআউট \ ক্ষেত্র-group.html টেমপ্লেট ফাইল:

<div class="custom">
<!-- ko foreach: getRegion('field-group') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>

টেমপ্লেটটি ফিল্ড-গ্রুপ অঞ্চলে যুক্ত সমস্ত উপাদান উপস্থাপনের অনুমতি দেয় (এটি ডিসপ্লেআরিয়া নামেও পরিচিত )।

কাস্টম \ চেকআউট \ প্লাগইন \ AddressLayoutProcessor বর্গ ফাইল:

namespace Custom\Checkout\Plugin;

use Magento\Checkout\Block\Checkout\LayoutProcessor;

/**
 * Class AddressLayoutProcessor
 */
class AddressLayoutProcessor
{
    /**
     * @param LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(LayoutProcessor $subject, array $jsLayout)
    {
        $fieldGroup = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']
            ['children']['custom-field-group']['children']['field-group']['children'];

        $shippingAddressFields = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

        $fieldGroup['country_id'] = $shippingAddressFields['country_id'];
        $fieldGroup['postcode'] = $shippingAddressFields['postcode'];

        $shippingAddressFields['country_id']['visible'] = false;
        $shippingAddressFields['postcode']['visible'] = false;

        return $jsLayout;
    }
}

শ্রেণিটি নতুন তৈরি কাস্টম-ফিল্ড-গ্রুপ উপাদানগুলিতে কান্ট্রি_আইডি এবং পোস্টকোড উভয় ক্ষেত্রেই কপি করার জন্য দায়ী ।

ক্ষেত্রগুলি, একবার কাস্টম-ফিল্ড-গ্রুপে বরাদ্দকালে নকলকরণ এড়ানোর জন্য লুকানো (দৃশ্যমান = সত্য) হিসাবে চিহ্নিত করা উচিত। ComponentDisabled অন্যান্য নির্ভরতা (যেমন region.js ফাইল) এবং শিপিং ঠিকানা প্রক্রিয়াকরণ প্রক্রিয়া কারণে country_id এবং পোস্টকোড নিষ্ক্রিয় জন্য ব্যবহার করা হবে।

কাস্টম \ চেকআউট \ ইত্যাদি \ ফ্রন্টএন্ড \ 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="customFieldGroupPlugin" type="Custom\Checkout\Plugin\AddressLayoutProcessor"/>
    </type>
</config>

ক্ষেত্র পরিবর্তনের জন্য ব্যবহৃত প্লাগইন পদ্ধতির কারণ ক্ষেত্রগুলি সম্পূর্ণ কনফিগারেশনের সাথে অনুলিপি করা উচিত। যদি কাস্টম মডিউলটিতে লেআউট প্রসেসরের ঘোষিত ক্ষেত্রে প্লাগইন পরিবর্তনগুলি ধরবে।

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

এখানে চিত্র বর্ণনা লিখুন

আপনি যদি বিলিং ঠিকানা ফর্মটিও করতে চান তবে কাস্টম \ চেকআউট \ প্লাগইন \ অ্যাড্রেস লেআউটপ্রসেসর শ্রেণি আপডেট করা উচিত। আপনাকে যা করতে হবে তা হ'ল শিপিং অ্যাড্রেস ফিল্ডগুলির জন্য যেমন নির্দিষ্ট অর্থ প্রদানের পদ্ধতির জন্য বিলিং ঠিকানার সাথে একই হেরফেরগুলি সম্পাদন করা।

সাহায্য করতে পারলে খুশি!


আশ্চর্যজনক, আপনাকে ধন্যবাদ! আমি কখনই এটি পরিচালনা করতে পারতাম না, আকর্ষণীয়ভাবে কীভাবে এটিতে ব্যাকএন্ডের কাজ প্রয়োজন। আমি একে একে নিখুঁত এফ এ ও দৃষ্টিকোণ থেকে মোকাবেলা করছি। যদি কিছুদিনের মধ্যে কেউ সহজ সমাধান না নিয়ে আসে (যেমন আমি মনে করি যে আরও কিছু লোক বর্তমানে এটি দেখছেন) আমি এটি স্বীকৃত হিসাবে চিহ্নিত করব। আবার ধন্যবাদ.
বেন ক্রুক

দুর্দান্ত উত্তর :)
কিউর শাহ

জট্টিল, তাই আপনাকে অনেক ধন্যবাদ. এটা আমার জন্য কাজ করে.
প্রতীক মেহতা

যদি আমি একই পরিবর্তন করতে চাই তবে নতুন বিলিং ঠিকানায় প্রযোজ্য?
প্রতীক মেহতা

1
আপনি যদি বিলিং ঠিকানা ফর্মটিও করতে চান তবে কাস্টম \ চেকআউট \ প্লাগইন \ অ্যাড্রেস লেআউটপ্রসেসর শ্রেণি আপডেট করা উচিত। আপনাকে যা করতে হবে তা হ'ল শিপিং অ্যাড্রেস ফিল্ডগুলির জন্য যেমন নির্দিষ্ট পেমেন্ট পদ্ধতির জন্য বিলিং ঠিকানার সাথে একই হেরফেরগুলি সম্পাদন করা।
সর্বাধিক প্রোনকো

2

এটি কোনও প্রস্তাবিত উপায় নয়, এটি সহজ তবে মার্জিত নয়:

অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / দৃশ্য / ফ্রন্টএন্ড / লেআউট / checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
          <block class="Vendor\Salesman\Block\Checkout\Index" name="custom_checkout" before="-" template="Vendor_Module::checkout/index.phtml"/>
        </referenceContainer>
    </body>
</page>

অ্যাপ্লিকেশন / কোড / চুন / সেলসম্যান / দেখতে / ফ্রন্টএন্ড / টেমপ্লেট / চেকআউট / index.phtml

<script>
  require([
      'jquery',
      'mage/mage'
  ], function($){
      $(document).ready(function () {
         //detect if the shipping form container loaded
         var existCondition = setInterval(function() {
            if ($('#shipping').length) {
              moveElement();
            }
         }, 100);

         function moveElement(){
             //get The field postcode and country
             var postcodeField = $("div[name='shippingAddress.postcode']");
             var countryField = $("div[name='shippingAddress.country_id']");
             // insert the wrapeer
             $( '<div class="wrapper"></div>' ).insertBefore( postcodeField);
             // move the fields to wrapper
             $(".wrapper").append(postcodeField);
             $(".wrapper").append(countryField);
         }
      });
    }
  });
</script>

আমি বিশ্বাস করি যে এটি কার্যকর হবে তবে আমি সম্মতি জানাই যে এটি খুব পরিষ্কার নয়, যদি পরিষ্কারের ব্যবস্থা না থাকে আমি এটি ব্যবহার করতাম না। ধন্যবাদ।
বেন ক্রুক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.