bagaimana cara menambahkan blokir khusus pada metode pengiriman di bawah ini di checkout di tempat?

Saya ingin menambahkan blok khusus di bawah metode pengiriman dan blok khusus ini harus berada di dalam formulir metode pengiriman. Saya pikir mengikuti kode ini bermanfaat untuk menambahkan this.but tidak tahu bagaimana untuk melanjutkan.

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

magento2

— Sivakumar K
sumber

1. Nyatakan ketergantungan checkout modul

app / code / NameSpace / 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. Timpa tata letak checkout

app / code / NameSpace / ModuleName / view / frontend / layout / 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>

3. Buat Komponen UI JavaScript

Checkout Magento 2 dikelola dalam JavaScript (dengan Knockout). Jadi, Anda perlu membuat compnent JS khusus. Ini akan membuat tautan antara komponen UI checkout dan templat HTML khusus Anda.

app / code / NameSpace / ModuleName / view / frontend / web / js / view / checkout / pengiriman / additional-block.js

menetapkan([
    'uiKomponen'

], function (Component) {
    'gunakan yang ketat';

    return Component.extend ({
        default: {
            templat: 'NameSpace_ModuleName / checkout / pengiriman / blok tambahan'
        }
    });
});

4. Buat template HTML

Kemudian buat templat HTML yang akan ditampilkan di checkout.

app / code / NameSpace / ModuleName / view / frontend / web / template / checkout / pengiriman / additional-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. Bersihkan cache

Terakhir jalankan perintah berikut:

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

Unduh modul contoh demo lengkap dari sini

— Sohel Rana
sumber

benar-benar Anda hebat. tidak ada akhir untuk komunitas magento. selalu hijau

— Sivakumar K

Apakah Anda mendapatkan kesalahan ini?

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

— Thiago Figueiro

Kiat untuk noobs lain: modul harus masuk app/code/SR/AdditionalShippingBlock, bukan app/code/Magento/AdditionalShippingBlock.

— Thiago Figueiro

@sohel rana, saya ingin dropdown dinamis daripada textfield di tempat yang sama, beri saya saran untuk itu. Terima kasih.

— Rakesh Jesadiya

Apakah ini nyata? : S wtf

— OZZIE

Dalam file yang disajikan "checkout_index_index.xml" ada satu kesalahan kecil. Pasti begitu

<?xml version="1.0"?>

tidak

<xml version="1.0"?>

Nona char pertama '?'

— Marcin Korzystka
sumber

Ini bisa menjadi pujian atas jawaban Sohel. Dalam kasus apa pun file tersebut benar dalam repo-nya github.com/sohelrana09/…

— Thiago Figueiro

Ya tentu saja. Tetapi saya harus memiliki 50 reputasi untuk berkomentar; (

— Marcin Korzystka