如何在Magento 2中选择关于运输方式的自定义阻止

使用参考链接如何在一页结帐中的以下运送方式中添加自定义阻止？，我可以在底部创建其他装运块。

但是，当选择运输方式时，我只想显示内容。当客户选择一种运输方式时，光标应转到其他信息和自定义字段，并且用户应输入数据。

当我们选择其他送货方式时，与此相关的信息（如果存在）应该会出现，否则div应该被隐藏。

与Magento 2中的http://excellencemagentoblog.com/blog/2011/11/07/magento-advanced-shipping-method-development/类似，我已经在Magento 1中实现了。

— Santhoshnsscoe
source

首先，你在定义一个新的元素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文件告诉结帐以启动js文件，这是一个uiComponent。它会启动基因剔除模板，并使用selectedMethod函数来获取当前所选货运的值（carrier_method）。如果值是您想要的值，它将显示该块。您可以根据需要进行修改，即。仅检查选定的运营商。因为selectedMethod被定义为因为knockout.computed()它quote.shippingMethod()是可观察的，所以每次用户更改载体时都会重新评估。

我更新是因为模板路径错误

— 泽菲林
source

我在自定义块中有一个文本区域。如何将在文本区域中输入的数据保存到报价单和订单中。

— santhoshnsscoe