Magento 2 自定义 checkout 步骤的视图

超级版主组 前端小威 10月前 430

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>
移除一个组件
为了从布局渲染中移除一个组件,你需要为 \Magento\Checkout\Block\Checkout\LayoutProcessor::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月前 被前端小威编辑 ,原因:
最新回复 (0)
返回
发帖