Magento 2 自定义 checkout 步骤的视图

4.94K 浏览翻译
0 Comments

Magento 2 自定义 checkout 步骤的视图

PS：如需转载，请留言，转载后请说明出处，否则虽繁必究！！！


翻译：https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_customize.html

本文包括关于如何定义已经存在的 checkout 步骤基本的信息。在 Magento 应用中，checkout 是用 UI 组件实现的。你可以通过改变、添加、禁用或者删除 JS 的执行或者 template 来定义每一步。


改变 component 的 .js 的执行和 template

为了改变 .js 的执行和 template 的渲染，你需要在 checkout 页面布局的新文件中声明。按照以下步骤进行：
  1. 在你的自定义模块目录下，创建这个新文件：<your_module_dir>/view/frontend/layout/checkout_index_index.xml。（为了你自定义的 checkout 能被正确的应用上，你的自定义模块应该依赖于 Magento_Checkout 模块）。
  2. 在新建的文件中添加以下内容：
  3. <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">
                        <!-- Your customization will be here -->
                        ...                    </argument>
                </arguments>
        </referenceBlock>
    </body></page>
  4. 在 <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml 文件中，找到你需要自定义的组件。复制相应的节点以及到 <argument> 的所有父节点。没必要粘贴父节点的所有属性和属性值，因为你不打算改变它们。
  5. 改变组件的 js 文件和 template 的路径，或者其他的属性。
比如：Magento_Shipping 模块添加一个在配送步骤中展示为配送政策信息链接的组件。
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml 中会有以下内容:
<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="before-shipping-method-form" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="shipping_policy" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body></page>

添加一个新的组件到 checkout 的页面布局

checkout_index_index.xml 中添加 UI 组件的方式跟添加 checkout 步骤是相似的。
确保你声明了一个组件，这样它才能正确地被父级的组件渲染。如果父级的组件是一个普通的 UI 组件（被 uiComponent 别名引用），它的子组件将会被无条件地渲染。但是如果父级组件是普通 UI 组件的扩展，它的子组件的渲染可能会在特定情况下受限制。比如一个组件只渲染在特定 displayArea 的子组件。


禁用组件

按照以下指示在你的 checkout_index_index.xml 禁用组件：
<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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="summary-discount" xsi:type="array">
                                                    <item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="errors" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">0</item>
                                                            <item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount-messages</item>
                                                            <item name="displayArea" xsi:type="string">messages</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body></page>
移除一个组件
为了从布局渲染中移除一个组件，你需要为 MagentoCheckoutBlockCheckoutLayoutProcessor::process 方法创建一个插件。在你的插件中，执行在运行时移除相应布局节点的级联方法。

下面这个例子就是移除组件的级联方法：

<item name="%the_component_to_be_disabled%" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="componentDisabled" xsi:type="boolean">true</item>
    </item></item>

如果你想在你的代码中用这个例子，用真实值替换 %path_to_target_node% 这个占位符。

禁用组件 VS 移除组件：如果你禁用组件，它会被加载但是不渲染。如果移除组件，它不会被加载。


PS：如需转载，请留言，转载后请说明出处，否则虽繁必究！！！




最后于 6月前 被前端小威编辑 ，原因：
1