1ページのチェックアウトで以下の配送方法でカスタムブロックを追加する方法

配送方法の下にカスタムブロックを追加します。このカスタムブロックは配送方法フォーム内にある必要があります。次のコード行はこれを追加するのに役立ちますが、続行方法がわかりません。

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

magento2

— シバクマールK
ソース

1.モジュールのチェックアウト依存関係を宣言する

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.チェックアウトレイアウトを上書きする

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. JavaScript UIコンポーネントを作成する

Magento 2のチェックアウトはJavaScriptで管理されます（Knockoutを使用）。したがって、カスタムJSコンポーネントを作成する必要があります。チェックアウトUIコンポーネントとカスタムHTMLテンプレートの間にリンクを作成します。

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

define（[
    「uiComponent」

]、関数（コンポーネント）{
    '厳格な使用';

    Component.extend（{
        デフォルト：{
            テンプレート： 'NameSpace_ModuleName / checkout / shipping / additional-block'
        }
    }）;
}）;

4. HTMLテンプレートを作成する

次に、チェックアウトで表示するHTMLテンプレートを作成します。

app / code / NameSpace / ModuleName / view / frontend / web / template / checkout / shipping / 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.キャッシュをクリアする

最後に次のコマンドを実行します。

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

ここからデモモジュールの完全な例をダウンロード

— ソヘル・ラナ
ソース

本当にあなたは素晴らしいです。magentoコミュニティに終わりはありません。その常緑

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

— チアゴフィゲイロ2016

他の初心者のためのヒント：モジュールはapp/code/SR/AdditionalShippingBlockでなく、に入る必要がありapp/code/Magento/AdditionalShippingBlockます。

— チアゴフィゲイロ2016

@sohel rana、同じ場所にあるテキストフィールドの代わりに動的なドロップダウンをしたいのですが、そのための提案をします。ありがとう。

— Rakesh Jesadiya、2016年

これは本当ですか？：S wtf

— OZZIE 2016

提示されたファイル「checkout_index_index.xml」には、1つの小さな間違いがあります。それは違いない

<?xml version="1.0"?>

ない

<xml version="1.0"?>

ミスファーストチャー '？'

— マルシン・コルジストカ
ソース

これは、ソヘルの回答に対する表彰でした。いずれの場合でも、ファイルが彼のレポで正しいgithub.com/sohelrana09/...

— チアゴFigueiro

はい、もちろん。しかし、コメントするには50の評判が必要です。（

— Marcin Korzystka