วิธีการเพิ่มบล็อกที่กำหนดเองที่วิธีการจัดส่งด้านล่างในการชำระเงิน onepage?

ฉันต้องการเพิ่มบล็อกที่กำหนดเองด้านล่างวิธีการจัดส่งและบล็อกที่กำหนดเองนี้ควรอยู่ในรูปแบบวิธีการจัดส่ง ฉันคิดว่าบรรทัดของรหัสต่อไปนี้มีประโยชน์สำหรับการเพิ่มสิ่งนี้ แต่ไม่รู้ว่าจะดำเนินการต่ออย่างไร

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

magento2

— ศิวาคุมาร์เค
แหล่งที่มา

1. ประกาศการพึ่งพาการชำระเงินของโมดูล

app / รหัส / 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. เขียนทับเค้าโครงการชำระเงิน

app / รหัส / NameSpace / ModuleName / view / ส่วนหน้า / รูปแบบ / 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. สร้างคอมโพเนนต์ UI UI

Magento 2 checkout มีการจัดการใน JavaScript (ด้วยสิ่งที่น่าพิศวง) ดังนั้นคุณต้องสร้าง compnent JS ที่กำหนดเอง มันจะสร้างลิงก์ระหว่างส่วนประกอบ UI การชำระเงินและเทมเพลต HTML ที่กำหนดเองของคุณ

app / รหัส / NameSpace / ModuleName / view / ส่วนหน้า / เว็บ / js / view / ชำระเงิน / การจัดส่งสินค้า / เพิ่มเติม-block.js

กำหนด([
    'UIComponent'

] ฟังก์ชั่น (ส่วนประกอบ) {
    'ใช้อย่างเข้มงวด';

    คืน Component.extend ({
        ค่าเริ่มต้น: {
            แม่แบบ: 'NameSpace_ModuleName / ชำระเงิน / จัดส่ง / เพิ่มเติม - บล็อก'
        }
    });
});

4. สร้างเทมเพลต HTML

จากนั้นสร้างเทมเพลต HTML ที่จะแสดงในการชำระเงิน

app / รหัส / NameSpace / ModuleName / view / ส่วนหน้า / เว็บ / แม่แบบ / ชำระเงิน / การจัดส่งสินค้า / เพิ่มเติม-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/*

ดาวน์โหลดตัวอย่างโมดูลตัวอย่างได้จากที่นี่

— Sohel Rana
แหล่งที่มา

คุณยอดเยี่ยมจริงๆไม่มีที่สิ้นสุดสำหรับชุมชนวีโอไอพี. เอเวอร์กรีน

— Sivakumar K

คุณได้รับข้อผิดพลาดเหล่านี้หรือไม่

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

เคล็ดลับสำหรับ noobs อื่น ๆ : โมดูลต้องไปในไม่app/code/SR/AdditionalShippingBlock app/code/Magento/AdditionalShippingBlock

— Thiago Figueiro

@ sohel rana ฉันต้องการเลื่อนลงแบบไดนามิกแทนที่จะเป็น textfield ในที่เดียวกันโปรดให้คำแนะนำกับฉัน ขอบคุณ

— Rakesh Jesadiya

มันเป็นเรื่องจริงหรือ? : S wtf

— OZZIE

ในไฟล์ที่นำเสนอ "checkout_index_index.xml" มีข้อผิดพลาดเล็กน้อย มันจะต้องเป็น

<?xml version="1.0"?>

ไม่

<xml version="1.0"?>

คิดถึงคนแรกถ่าน '?'

— Marcin Korzystka
แหล่งที่มา

นี่อาจเป็นการชมเชยคำตอบของ Sohel ไม่ว่าในกรณีใดไฟล์จะถูกต้องใน repo github.com/sohelrana09/

— Thiago Figueiro

ใช่แน่นอน แต่ฉันต้องมี 50 ชื่อเสียงในการแสดงความคิดเห็น (

— Marcin Korzystka