magento2结算页面修改-自定义运输方式列表

2年前

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

作者：晓风拂月

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

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

本小节介绍如何自定义结帐页面上显示的运输方式列表。

让我们考虑一种情况，需要为此列表中的每种运输方式添加一个带有描述的可折叠文本字段。为此，需要采取以下步骤：

为运输方式项目创建一个新模板。
为送货方式列表创建一个新模板。
覆盖运输步骤配置。

第 1 步：为运输方式项目创建新模板
在自定义模块目录中，创建一个新文件：<your_module_dir>/view/frontend/web/template/custom-method-item-template.html。在此文件中，添加以下代码。

它是从 <Magento_Checkout_module_dir>/view/frontend/web/template/shipping-address/shipping-method-item.html 模板复制而来，并进行了以下修改：

添加了 <tr> 元素以包含运输方式描述
带有提供折叠/展开功能的触发器元素的列
整个样本包裹在<tbody> 中，以提供行的一般可折叠上下文

<!-- Initialize collapsible binding -->
<tbody collapsible="as: '$collapsible_' + method.method_code">
    <tr class="row">
        <td class="col col-method">
            <input type="radio"
                   class="radio"
                   click="element.selectShippingMethod"
                   ifnot="method.error_message"
                   ko-checked="element.isSelected"
                   ko-value="method.carrier_code + '_' + method.method_code"
                   attr="'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code,
                        'checked': element.rates().length == 1 || element.isSelected" />
        </td>
        <td class="col col-price">
            <each args="element.getRegion('price')" render="" />
        </td>
        <td class="col col-method"
            attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"
            text="method.method_title" />
        <td class="col col-carrier"
            attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
            text="method.carrier_title" />
        <!-- Column with collapsible trigger  -->
        <td class="col">
            <a toggleCollapsible="'$collapsible_' + method.method_code">
                <span data-bind="i18n: 'Info'"></span>
            </a>
        </td>
    </tr>
    <!-- Row for shipping method description -->
    <tr class="row" visible="$context['$collapsible_' + method.method_code].opened">
        <td class="col" colspan="5" i18n="'Some description.'"/>
    </tr>
    <tr class="row row-error"
        if="method.error_message">
        <td class="col col-error" colspan="5">
            <div role="alert" class="message error">
                <div text="method.error_message"></div>
            </div>
            <span class="no-display">
                <input type="radio"
                       attr="'value' : method.method_code, 'id': 's_method_' + method.method_code" />
            </span>
        </td>
    </tr>
</tbody>

第 2 步：为运输方式列表创建新模板
在自定义模块目录中，创建一个新文件：<your_module_dir>/view/frontend/web/template/custom-method-list-template.html。在此文件中，添加以下代码。它使用 vendor/magento/module-checkout/view/frontend/web/template/shipping-address/shipping-method-list.html 模板中的代码，并进行以下修改：

<thead>中添加的触发器列
tbody移动到可折叠上下文的项目模板

<div id="checkout-shipping-method-load">
    <table class="table-checkout-shipping-method" markdown="1"> <thead>
        <tr class="row" markdown="1">
            <th class="col col-method" translate="'Select Method'" />
            <th class="col col-price" translate="'Price'" />
            <th class="col col-method" translate="'Method Title'" />
            <th class="col col-carrier" translate="'Carrier Title'" />
            <!-- Column for triggers -->
            <th class="col" />
        </tr>
        </thead> <!-- tbody was moved inside item template --> <!-- ko foreach: { data: rates(), as: 'method'} --> <!--ko template: { name: element.shippingMethodItemTemplate} --><!-- /ko --> <!-- /ko --> </table>
</div>

第 3 步：覆盖运输步骤配置
在自定义模块目录中，创建一个新文件：<your_module_dir>/view/frontend/layout/checkout_index_index.xml。在此文件中，添加以下代码。

它覆盖了 <Magento_Checkout_module_dir>/view/frontend/web/js/view/shipping.js 的 shippingMethodListTemplate 和 shippingMethodItemTemplate 属性：

<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="config" xsi:type="array">
                                                        <item name="shippingMethodItemTemplate" xsi:type="string">Vendor_Checkout/custom-method-item-template</item>
                                                        <item name="shippingMethodListTemplate" xsi:type="string">Vendor_Checkout/custom-method-list-template</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

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

#magento

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

相关文章