如何在 Magento 2 中自定义结帐流程

已发表: 2018-04-23

目录

在 Magento 2 中，结帐流程经过重新设计，以提供更快、更轻松的体验。 结帐页面引导客户完成该过程的 2 个简单步骤。 登录其帐户的客户可以快速完成结帐，因为大部分信息已经在他们的帐户中。 结账流程的第一步是让客户填写收货地址信息，并选择收货方式。 第二步，客户选择支付方式，并使用任意优惠券完成购买。

自定义 Magento 2 的默认结帐

您可以添加新的结帐步骤或更改现有结帐的视图，以您自己的方式自定义默认结帐。

添加新的结帐步骤

您可以添加自定义结帐步骤，它应该作为 UI 组件实现。 为了兼容性、可升级性和易于维护，不要编辑默认的 Magento 代码，将您的自定义添加到单独的模块中。

步骤 1：创建结帐步骤组件的视图部分

要创建新结帐步骤的视图部分：

  1. 添加模块目录。 所有自定义文件都必须存储在那里。 为了正确应用您的结帐自定义，您的自定义模块应依赖于Magento_Checkout模块。 不要使用Ui作为您的自定义模块名称，因为指定路径时需要使用%Vendor%_Ui表示法可能会导致问题。
  2. 创建实现视图模型的.js文件。
  3. 为组件创建一个.html模板。

下面对每个步骤进行详细说明：

1. 添加实现新步骤的 JavaScript 文件

必须将新的结帐步骤实现为 UI 组件。 也就是说，它的 JavaScript 实现必须是一个 JavaScript 模块。

该文件必须存储在<your_module_dir>/view/frontend/web/js/view目录下。

<your_module_dir>表示法代表从根目录到模块目录的路径。 通常它将是以下之一： app/code/<YourVendor>/<YourModule>或vendor/<yourvendor>/module-<module>-<name> 。

带有注释的示例my-step-view.js如下： 

 定义（
    ['ko', 'uiComponent', 'underscore', 'Magento_Checkout / js / model / step - navigator'],
    功能（
        高，
        零件，
        _,
        步进导航器
    ) {'
        使用严格';
        /**
         *
         * mystep – 是组件的 .html 模板的名称，
         * <Vendor>_<Module> – 是您的模块目录的名称。
         *
         */
        返回组件。扩展（{
            默认值：{
                模板：'<供应商>_<模块>/mystep'
            },

            //在此处添加您的逻辑以显示步骤，
            isVisible: ko.observable(true),

            /**
             *
             * @returns {*}
             */
            初始化：函数（）{
                this._super();
                //注册你的步骤
                stepNavigator.registerStep(
                    //步骤代码将用作组件模板中的步骤内容id
                    'step_code',
                    //步骤别名
                    无效的，
                    //步骤标题值
                    '步骤标题',
                    //显示步骤或隐藏步骤时具有逻辑的可观察属性
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                     * 排序顺序值
                     * '排序订单值' < 10：发货步骤前显示步骤；
                     * 10 < 'sort order value' < 20 : 显示发货和付款步骤之间的步骤
                     * '排序顺序值' > 20 : 付款步骤后显示步骤
                     */
                    15
                );

                返回这个；
            },

            /**
             * navigate() 方法负责结帐步骤之间的导航
             * 在结帐时。 您可以添加自定义逻辑，例如一些条件
             * 用于切换到您的自定义步骤
             */
            导航：函数（）{

            },

            /**
             * @returns 无效
             */
            导航到下一步：函数（）{
                stepNavigator.next();
            }
        });
    }
);
2.添加.html模板

在模块目录中，为组件添加.html模板。 它必须位于<your_module_dir>/view/frontend/web/template目录下。

示例mystep.html如下： 

 <!– 应使用 .js 文件中的“step_code”值–>
<li data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: '步骤标题'" data-role="title"></div>
    <div class="step-content" data-role="content">

        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!– ko i18n: '下一个'–><!– /ko –></span>
                    </按钮>
                </div>
            </div>
        </form>
    </div>
</li>

第 2 步：将您的步骤添加到结帐页面布局

对于要在页面上显示的新步骤，您需要在 Checkout 页面布局中声明它，该布局在checkout_index_index.xml中定义。

因此，您需要在以下位置添加扩展checkout_index_index.xml布局文件： <your_module_dir>/view/frontend/layout/checkout_index_index.xml

示例checkout_index_index.xml如下： 

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <正文>
        <referenceBlock name="checkout.root">
            <参数>
                <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="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                            <!--在发货步骤前显示步骤内容“sortOrder”值应该是<1->
                                            <!--显示发货步骤和付款步骤之间的步骤内容 1 < "sortOrder" < 2 -->
                                            <!--支付步骤后显示步骤内容“sortOrder”>2-->
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <!–在此处为您的步骤添加子组件声明–>
                                            </项目>
                                        </项目>
                                    </项目>
                                </项目>
                            </项目>
                        </项目>
                    </项目>
                </参数>
            </参数>
        </参考块>
    </正文>
</页面>

Magento 2 结帐自定义字段

$119,00

Magento 2 一步结账

$99 $119,00

自定义现有结帐的视图

在 Magento 应用程序中，结帐是使用 UI 组件实现的。 您可以通过更改组件的 JavaScript 实现或模板、添加、删除或禁用组件来自定义每个步骤。

第 1 步：更改组件的 .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" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <正文>
        <referenceBlock name="checkout.root">
            <参数>
                <argument name="jsLayout" xsi:type="array">
                    <!– 您的自定义将在这里–>
                    …
                </参数>
            </参数>
        </参考块>
    </正文>
</页面>
  1. 在<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml文件中，找到您需要自定义的组件。 复制对应的节点和所有父节点直到<argument> 。 无需保留父节点的所有属性和值，因为您不会更改它们。
  2. 更改组件的.js文件、模板或任何其他属性的路径。

例子：

Magento_Shipping 模块将一个组件作为指向 Shipping Policy 信息的链接添加到 Shipping 步骤：

 <Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml

如下所示： 

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <正文>
        <referenceBlock name="checkout.root">
            <参数>
                <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>
                                                                </项目>
                                                            </项目>
                                                        </项目>
                                                    </项目>
                                                </项目>
                                            </项目>
                                        </项目>
                                    </项目>
                                </项目>
                            </项目>
                        </项目>
                    </项目>
                </参数>
            </参数>
        </参考块>
    </正文>
</页面>

第 2 步：将新组件添加到结帐页面布局

任何 UI 组件都添加到checkout_index_index.xml中，类似于添加结帐步骤组件的方式。

确保您声明了一个组件，以便父组件正确呈现它。 如果父组件是通用 UI 组件（由uiComponent别名引用），则其子组件将无条件渲染。 但是如果父组件是通用 UI 组件的扩展，那么子渲染可能会受到某种限制。 例如，组件只能渲染来自某个displayArea的子组件。

第 3 步：禁用组件

要禁用checkout_index_index.xml中的组件，请使用以下说明： 

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

第 4 步：删除组件

要从布局渲染中删除组件，您需要为\Magento\Checkout\Block\Checkout\LayoutProcessor::process方法创建一个插件。 在您的插件中，实现在运行时删除相应布局节点的 around 方法。

以下示例是使用 around 方法移除组件的示例： 

 unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node%是checkout_index_index.xml中组件节点的路径
返回 $jsLayout;

（如果您想在代码中使用此示例，请将%path_to_target_node%占位符替换为实际值。）

*禁用与删除组件：如果禁用组件，它会被加载但不会被渲染。 如果您删除一个组件，它不会被加载。

相关文章：
如何在 Magento 结账时添加折扣码
如何向 Magento 2 Checkout 添加自定义付款