如何在一页结帐中的以下送货方式中添加自定义阻止？

11

我想在运输方法下面添加自定义块，并且此自定义块应在运输方法表单内。我认为下面的代码行对添加此内容很有帮助。但是不知道如何进行。

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
magento2 
— 西瓦库马尔K
source

Answers:

43

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.覆盖结帐布局

应用程序/代码/名称空间/模块名称/视图/前端/布局/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

限定（[
    'uiComponent'

]，功能（组件）{
    “使用严格”；

    返回Component.extend（{
        默认值：{
            模板：“ NameSpace_ModuleName /结帐/运输/附加块”
        }
    }）;
}）;

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/*

从此处下载完整的示例演示模块

— 索赫拉娜
source
1
真的，您真棒。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 [] []
— Thiago Figueiro
其他提示：该模块需要插入app/code/SR/AdditionalShippingBlock，而不是app/code/Magento/AdditionalShippingBlock。
— Thiago Figueiro
@sohel rana，我想动态下拉列表而不是在同一位置输入textfield，给我建议。谢谢。
— 拉克什·耶萨迪亚
这是真的吗？：S wtf
— OZZIE's
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.