Magento 2 添加 checkout 步骤

超级版主组 前端小威 11月前 654

PS:如需转载,请留言,转载后请说明出处,否则虽繁必究!!!


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

本篇文章描述了如何添加下单步骤的前端组件,并且怎么添加到下单步骤中。
默认的 Magento 下单包括两步:
  • 配送信息
  • 核对订单信息和付款信息
你可以添加一个自定义步骤,它应该是一个 UI 组件。为了兼容性,可升级和可维护性,不要编辑默认的 Magento 代码,在一个独立的模块中添加自定义代码。


第一步:创建下单步骤组件的 view 部分

  1. 添加一个模块目录(本篇不包含,详情查看)。搜友的自定义文件应该放在这个目录下。为了自定义的 checkout 能正确应用,你的自定义模块应该依赖 Magento_Checkout 这个模块。不要用 Ui 命名自定义模块,因为 %Vendor%_Ui 符号(在指定路径用的)可能会导致一些问题;
  2. 新建 view 模块的js 文件;
  3. 新建 component 的 html 文件。

添加实施新步骤的 Javascript 文件
一个新的 checkout 步骤必须是 UI 组件。所以它的 Javascript 必须是 Javascript 模块(module)。
这个文件必须放在 <your_module_dir>/view/frontend/web/js/view 目录下面。
注意:<your_module_dir> 这个符号代表从根目录到你的模块目录的路径。通常它是下面展示的一种:app/code/<YourVendor>/<YourModule> 或者  vendor/<yourvendor>/module-<module>-<name> 。更多详情请查看模块和主题路径的常规符号

一个带注释的例子 my-step-view.js:
define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        /**
        *
        * mystep - is the name of the component's .html template,
        * <Vendor>_<Module>  - is the name of the your module directory.
        *
        */
        return Component.extend({
            defaults: {
                template: '<Vendor>_<Module>/mystep'
            },

            //add here your logic to display step,
            isVisible: ko.observable(true),

            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'step_code',
                    //step alias
                    null,
                    //step title value
                    'Step Title',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                    * sort order value
                    * 'sort order value' < 10: step displays before shipping step;
                    * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                    * 'sort order value' > 20 : step displays after payment step
                    */
                    15
                );

                return this;
            },

            /**
	    * The navigate() method is responsible for navigation between checkout step
	    * during checkout. You can add custom logic, for example some conditions
	    * for switching to your custom step
	    * When the user navigates to the custom step via url anchor or back button we_must show step manually here
	    */
            navigate: function () {

                this.isVisible(true);
            },

            /**
            * @returns void
            */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    });

添加一个 html template

在模块目录,为组件(component) 添加一个 .html template。它必须在 <your_module_dir>/view/frontend/web/template 目录下。

举例 mystep.html:
<!--The 'step_code' value from the .js file should be used--><li id="step_code" data-bind="fadeVisible: isVisible"><div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
    <div id="checkout-step-title"
         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: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div></li>
第二步:添加你的步骤到下单(checkout) 的页面布局(layout)
为了能让新的步骤展示到这个页面,你需要在下单的页面布局(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">
    <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">
                                            <!-- The new step you add -->
                                            <item name="my-new-step" xsi:type="array">
                                                <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                                    <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                                    <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                                    <!--To display step content after payment step "sortOrder" > 2 -->
                                                <item name="sortOrder" xsi:type="string">2</item>
                                                <item name="children" xsi:type="array">
                                                    <!--add here child component declaration for your step-->
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body></page>
第三步:给结账和配送步骤添加 mixins (可选)
如果新加的这个步骤是第一步,你必须给支付和配送步骤添加 mixins。否则这两部将会在加载结账页面的时候被激活。
新建一个 mixin :

  1. 用以下内容新建一个 Vendor/Module/view/base/requirejs-config.js 文件;
  1. var config = {
     	'config': {
     	    'mixins': {
     	       'Magento_Checkout/js/view/shipping': {
     	           'Vendor_Module/js/view/shipping-payment-mixin': true
     	       },
     	       'Magento_Checkout/js/view/payment': {
     	           'Vendor_Module/js/view/shipping-payment-mixin': true
     	       }
     	   }
     	}
     }
  2. 新建 mixin 。我们给支付和配送用同一个 mixin 。
define(
     [
         'ko'
     ], function (ko) {
         'use strict';

         var mixin = {

             initialize: function () {
                 this.isVisible = ko.observable(false); // set visible to be initially false to have your step show first
                 this._super();

                 return this;
             }
         };

         return function (target) {
             return target.extend(mixin);
         };
     }
 );

为了能让这些改变生效,你可能需要清除布局缓存静态视图文件的缓存。更多关于 mixin 的详情,请查看 JS Mixins


PS:如需转载,请留言,转载后请说明出处,否则虽繁必究!!!


最后于 7月前 被前端小威编辑 ,原因:
最新回复 (3)
  • 超级版主组 前端小威 11月前
    0 引用 2
    欢迎评论指证,我会及时查看评论,然后修改原文。以后会陆续更新,如果有想看的,也可以评论给我。
  • 管理员组 admin 11月前
    0 引用 3
    大佬辛苦了
  • 超级版主组 前端小威 11月前
    0 引用 4
    admin 大佬辛苦了
    谢谢,哎呀,老脸一红,希望能给大家一些帮助
  • 游客
    登录 | 注册 方可回帖
返回
发帖