অনপেজ চেকআউটে শিপিং পদ্ধতিতে কাস্টম ব্লক কীভাবে যুক্ত করবেন?


11

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

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>

উত্তর:


43

1. মডিউলটির চেকআউট নির্ভরতা ঘোষণা করুন

অ্যাপ্লিকেশন / কোড / নামস্থান / moduleName জন্য / etc / module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="NameSpace_ModuleName" setup_version="0.0.1" active="true">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

2. চেকআউট লেআউটটি ওভাররাইট করুন

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

<?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="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="additional_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">NameSpace_ModuleName/js/view/checkout/shipping/additional-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

৩. জাভাস্ক্রিপ্ট ইউআই কম্পোনেন্ট তৈরি করুন

ম্যাজেন্টো 2 চেকআউট জাভাস্ক্রিপ্টে পরিচালনা করা হয় (নকআউট সহ)। সুতরাং আপনার একটি কাস্টম জেএস উপযুক্ত তৈরি করতে হবে need এটি চেকআউট ইউআই উপাদান এবং আপনার কাস্টম এইচটিএমএল টেমপ্লেটের মধ্যে লিঙ্ক তৈরি করবে।

অ্যাপ্লিকেশন / কোড / নামস্থান / moduleName / দৃশ্য / ফ্রন্টএন্ড / ওয়েব / JS / দৃশ্য / চেকআউট / জাহাজীকরণ / অতিরিক্ত-block.js

সংজ্ঞায়িত ([
    'UiComponent'

], ফাংশন (উপাদান) {
    'কঠোর ব্যবহার';

    কম্পোনেন্ট.একস্টেন্ড ({
        পূর্ব নির্ধারিত: {
            টেমপ্লেট: 'নেমস্পেস_মডিউলনেম / চেকআউট / শিপিং / অতিরিক্ত-ব্লক'
        }
    });
});

৪. এইচটিএমএল টেমপ্লেট তৈরি করুন

তারপরে চেকআউটটিতে প্রদর্শিত HTML টেমপ্লেট তৈরি করুন।

অ্যাপ্লিকেশন / কোড / নামস্থান / moduleName / দৃশ্য / ফ্রন্টএন্ড / ওয়েব / টেমপ্লেট / চেকআউট / জাহাজীকরণ / অতিরিক্ত-block.html

<div class="checkout-block" id="block-custom">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>

5. ক্যাশে সাফ করুন

অবশেষে নিম্নলিখিত কমান্ডগুলি চালান:

php bin/magento cache:clean
php bin/magento setup:upgrade
chmod -R 777 var/*

এখান থেকে সম্পূর্ণ উদাহরণ ডেমো মডিউল ডাউনলোড করুন


1
সত্যিই আপনি awesome.there জন্য কোনো শেষ নেই করছে Magento community.its চিরহরিৎ
Sivakumar কে

আপনি কি এই ত্রুটিগুলি পেয়েছেন? Broken reference: No element found with ID 'checkout.header.wrapper'. [] [] Class SR\AdditionalShippingBlock\Model\CustomBlockConfigProvider does not exist [] [] [2016-04-13 10:15:06] main.CRITICAL: Invalid block type: Magento\Checkout\Block\Onepage [] []
থিয়াগো ফিগুয়েরো

অন্যান্য নুবসের জন্য টিপ: মডিউলটির ভিতরে যাওয়া দরকার app/code/SR/AdditionalShippingBlock, না app/code/Magento/AdditionalShippingBlock
থিয়াগো ফিগুয়েরো

@ সোহেল রানা, আমি একই জায়গায় পাঠ্যক্ষেত্রের পরিবর্তে গতিশীল ড্রপডাউন করতে চাই, তার জন্য আমাকে পরামর্শ দিন। ধন্যবাদ।
রাকেশ জেসাদিয়ার

এটা কি বাস্তব? : এস
ডব্লিউটিএফ

7

"Checkout_index_index.xML" উপস্থাপিত ফাইলটিতে একটি ছোট্ট ভুল রয়েছে। এটাই হবে

<?xml version="1.0"?>

না

<xml version="1.0"?>

প্রথম চর 'মিস?'


এটি সোহেলের উত্তরের প্রশংসা হতে পারে। যে কোনও ক্ষেত্রে ফাইলটি তার রেপোতে
থিয়াগো

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