magento2结算页-为字段添加自定义模板

2年前

阅读本文预计花费：2 分钟

作者：晓风拂月

7天成为Magento系统架构师，现在开始学习Magento全栈开发！

《Magento2.X企业级开发实战》

本小节介绍如何替换结帐页面上表单字段的 HTML 模板。可能需要替换模板以添加与字段一起显示的元素、更改分配给它的 CSS 类、添加属性等。

Checkout 页面上使用的表单是使用 Knockout JS 实现的。

要更改表单域的模板，请执行以下操作：

为将呈现表单字段的knockout js 脚本创建自定义 HTML 模板。
在结帐页面布局中指定新模板。

第 1 步：为字段实现 HTML 模板
在以下目录中创建一个新的 <your_template>.html 模板：<your_module_dir>/view/frontend/web/template/form/element
模板示例：

<!-- input field element and corresponding bindings -->
<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }" />
<!-- additional content -->
<img src="%path_to_image%" alt="image_de"/>

所有表单字段类型的原始模板都位于 vendor/magento/module-ui/view/base/web/templates/form/element 目录中。

第 2 步：在布局中指定新模板
在自定义模块目录中，创建一个新的 <your_module_dir>/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">
                                                        <!-- The name of the form the field belongs to -->
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <!-- the field you are customizing -->
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="config" xsi:type="array">
                                                                        <!-- Assigning a new template -->
                                                                        <item name="elementTmpl" xsi:type="string">%Vendor_Module%/form/element/%your_template%</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

最后，清除缓存：

php bin/magento s:up
chmod -R 777 /var/www/html/magento

如无特殊说明或标注，任何个人或组织，复制、转载、采集本站内容请注明：
本文来源于：【Magento中文网】，并添加本文地址链接。
如未按上述操作复制或转载，本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

#magento

《Magento2.X企业级开发实战》

相关文章