CustomizeCheckout定制化结账流程

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

这边文章包含定制化已经存在的checkout步骤视图的基本信息。在Magento中，结账流程是用UI组件来实现的。你可以通过改变js实现或者模版的方式来改变。添加，禁用，移除一个组件。

想要改变组件.js的实现和模版文件，你需要先在结账布局文件里面声明你的文件。请参照以下步骤：
1.在你的模块里面，创建以下文件：
<your_module_dir>/view/frontend/layout/checkout_index_index.xml （问了定制化能顺利工作，你需要声明你的模块依赖于Magento_Checkout模块）。
2.在这个文件里，添加以下内容：

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

在<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml文件，找到你要定制化的组件。找到对应的节点以及该节点的父节点，直到<argument>.你不一定要保留父节点的所有节点和值如果你不需要更改它们。
改变对应的组件的js文件，模版或者其它属性。

例如：
Magento_Shipping模块为Shipping步骤的Shipping Policy添加一个组件，该组件会被渲染成一个链接：
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml 是这样的：
 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<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页面的layout文件。
为了使父组件能够正确加载，请确保你声明了该组件。如果一个父组件是一个通用的UI组件（在uiComponent alias引用），他的子组件被渲染是不会受到任何限制。但是，如果父组件是通用组件的一个扩展，那么子组件的渲染就有可能在某些方面收到限制。比如，，一个组件只在某个displayArea 被渲染。
移动一个组件：
想要移动checkout页面的任何组件，找到组件需要被放的位置，然后粘贴你的组件为该组件的一个子组件。
以下例子展示如何移动折扣组件到订单总结模块，该总结页面会在shipping 和billing 步骤展示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

禁用一个组件：

1
2
3
4
5

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

移除一个组件：
想要从页面渲染中移除一个组件，你需要为MagentoCheckoutBlockCheckoutLayoutProcessor::process方法创建一个plugin(插件)。在你的插件里，使用around方法在运行时把对应的layout节点移除掉。
以下是使用around方法移除组件的一个示例：

1
2

unset($jsLayout["components"]["checkout"]["children"]["steps"][%path_to_target_node%]); //%path_to_target_node% is the path to the component"s node in checkout_index_index.xml
return $jsLayout;

如果想要在你的代码里使用这个示例，请把%path_to_target_node%替换成真实值。

在你的代码里禁用和移除组件的区别：如果禁用一个组件，该组件会被加载但是不会被渲染；如果移除一个组件，它会被移除不会被加载。
 

 

以上是 CustomizeCheckout定制化结账流程 的全部内容， 来源链接： utcz.com/z/512343.html

回到顶部