Làm cách nào để thêm khối tùy chỉnh tại các phương thức giao hàng bên dưới trong thanh toán onepage?

Tôi muốn thêm khối tùy chỉnh bên dưới các phương thức giao hàng và khối tùy chỉnh này phải nằm trong mẫu phương thức vận chuyển. Tôi nghĩ rằng dòng mã sau đây là hữu ích để thêm này. Nhưng không biết làm thế nào để tiếp tục.

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

magento2

— Sivakumar K
nguồn

1. Khai báo sự phụ thuộc kiểm tra của mô-đun

ứng dụng / mã / 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. Ghi đè lên bố cục thanh toán

ứng dụng / mã / 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. Tạo thành phần giao diện người dùng JavaScript

Thanh toán Magento 2 được quản lý bằng JavaScript (với Knockout). Vì vậy, bạn cần phải tạo một công cụ JS tùy chỉnh. Nó sẽ tạo liên kết giữa thành phần UI thanh toán và mẫu HTML tùy chỉnh của bạn.

ứng dụng / mã / NameSpace / ModuleName / view / frontend / web / js / view / checkout / vận chuyển / thêm-block.js

định nghĩa([
    'uiComponent'

], hàm (Thành phần) {
    'Sử dụng nghiêm ngặt';

    trả về Hợp phần.extend ({
        mặc định: {
            mẫu: 'NameSpace_ModuleName / thanh toán / vận chuyển / khối bổ sung'
        }
    });
});

4. Tạo mẫu HTML

Sau đó, tạo mẫu HTML sẽ hiển thị trong thanh toán.

ứng dụng / mã / NameSpace / ModuleName / view / frontend / web / template / checkout / vận chuyển / thêm-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. Xóa bộ nhớ cache

Cuối cùng chạy các lệnh sau:

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

Tải về mô-đun demo ví dụ đầy đủ từ đây

— Sohel Rana
nguồn

thực sự bạn là tuyệt vời. khác là không có kết thúc cho cộng đồng magento.its thường xanh

— Sivakumar K

Bạn đã nhận được những lỗi này?

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

Mẹo cho các noobs khác: mô-đun cần phải đi vào app/code/SR/AdditionalShippingBlock, không app/code/Magento/AdditionalShippingBlock.

— Thiago Figueiro

@sohel rana, tôi muốn thả xuống động thay vì trường văn bản ở cùng một nơi, hãy cho tôi đề xuất cho điều đó. Cảm ơn.

— Rakesh Jesadiya

Điều này là thật? : S wtf

— OZZIE

Trong tệp được trình bày "checkout_index_index.xml" có một lỗi nhỏ. Nó phải là

<?xml version="1.0"?>

không phải

<xml version="1.0"?>

Hoa hậu đầu tiên char '?'

— Marcin Korzystka
nguồn

Điều này có thể đã được khen ngợi về câu trả lời của Sohel. Trong mọi trường hợp, tập tin là chính xác trong repo của anh ấy github.com/sohelrana09/ Kẻ

— Thiago Figueiro

Phải, tất nhiên. Nhưng tôi phải có 50 danh tiếng để bình luận; (

— Marcin Korzystka