как добавить пользовательский блок при способах доставки ниже в одностраничном оформлении заказа?

11

Я хочу добавить пользовательский блок ниже методов доставки, и этот пользовательский блок должен быть внутри формы метода доставки. Я думаю, что следующая строка кода полезна для добавления этого. Но не знаю, как поступить.

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
Сивакумар К
источник

Ответы:

43

1. Объявите зависимость извлечения модуля

Приложение / код / ​​NameSpace / ModuleName / и т.д. / 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. Перезаписать оформление заказа

Приложение / код / ​​NameSpace / 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>

3. Создайте компонент JavaScript UI

Оформление заказа в Magento 2 осуществляется в JavaScript (с помощью Knockout). Таким образом, вам нужно создать пользовательский компонент JS. Это создаст связь между компонентом пользовательского интерфейса оформления заказа и вашим пользовательским шаблоном HTML.

Приложение / код / ​​NameSpace / ModuleName / вид / интерфейс / веб / JS / просмотр / Checkout / доставки / дополнительные-block.js

определить ([
    'UIComponent'

], функция (Компонент) {
    «использовать строгое»;

    return Component.extend ({
        по умолчанию: {
            шаблон: «NameSpace_ModuleName / оформить заказ / доставка / дополнительный блок»
        }
    });
});

4. Создайте шаблон HTML

Затем создайте шаблон HTML, который будет отображаться в оформлении заказа.

Приложение / код / ​​NameSpace / 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
действительно, ты потрясающий. нет конца для magento community.its вечнозеленого
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 [] []
Тиаго Фигейро
Совет для других нубов: модуль должен входить app/code/SR/AdditionalShippingBlock, а не app/code/Magento/AdditionalShippingBlock.
Тиаго Фигейро
@sohel rana, я бы хотел, чтобы вместо текстового поля был динамический выпадающий список, дайте мне совет на этот счет. Спасибо.
Ракеш Джесадия
Это по-настоящему? : S wtf
Оззи
7

В представленном файле "checkout_index_index.xml" есть одна маленькая ошибка. Это должно быть

<?xml version="1.0"?>

не

<xml version="1.0"?>

Мисс первый символ?

Марчин Корзистка
источник
Это могло бы быть похвалой ответа Сохеля. В любом случае файл верен в его репозитории github.com/sohelrana09/…
Тиаго Фигейро
Ну конечно; естественно. Но я должен иметь 50 репутации, чтобы комментировать; (
Марчин Коржистка