参照リンクを使用して、1ページのチェックアウトで以下の配送方法にカスタムブロックを追加する方法は？、下部に追加の配送ブロックを作成できます。
ただし、配送方法が選択されている場合にのみコンテンツを表示したいと思います。顧客が配送方法を選択すると、カーソルが追加情報とカスタムフィールドに移動し、ユーザーがデータを入力する必要があります。
別の配送方法を選択すると、それに関連する情報が存在する場合、それ以外の場合はdivが非表示になります。
Magento 2のhttp://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/のように同じです。Magento1で実装していました。
回答:
まず、次のようなshippingAdditionalファイルを作成して、新しい要素を定義しますview/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="carrier_custom" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/carrier_custom</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>次にview/frontend/web/js/view/checkout/shipping/carrier_custom.js、このようにファイルを作成します
define([
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote'
], function ($, ko, Component, quote) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Module/checkout/shipping/carrier_custom'
},
initObservable: function () {
this.selectedMethod = ko.computed(function() {
var method = quote.shippingMethod();
var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
return selectedMethod;
}, this);
return this;
},
});
});そして、ファイルを作成します view/frontend/web/template/checkout/shipping/carrier_custom.html
<div id="my-carrier-custom-block-wrapper" data-bind="visible: selectedMethod() == 'mycarrier_mymethod'">
<p data-bind="i18n: 'This is custom block shown only when selected specific method'"></p>
</div>基本的に、XMLファイルは、uiComponentであるjsファイルを開始するようにチェックアウトに指示します。ノックアウトテンプレートを開始し、selectedMethod関数を使用して現在選択されている配送料の値を取得します（carrier_method）。値が必要なものである場合、ブロックが表示されます。必要に応じて変更できます。選択したキャリアのみをチェックします。なぜならselectedMethod、knockout.computed()それはユーザーがキャリアを変更するたびに再評価されるように定義されているからquote.shippingMethod()です。
テンプレートのパスが間違っていたので更新しました