Magento 2 添加 checkout 步骤
Magento 2 添加 checkout 步骤
PS：如需转载，请留言，转载后请说明出处，否则虽繁必究！！！
翻译：https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_new_step.html
本篇文章描述了如何添加下单步骤的前端组件，并且怎么添加到下单步骤中。
默认的 Magento 下单包括两步：
- 配送信息
- 核对订单信息和付款信息
你可以添加一个自定义步骤，它应该是一个 UI 组件。为了兼容性，可升级和可维护性，不要编辑默认的 Magento 代码，在一个独立的模块中添加自定义代码。
第一步：创建下单步骤组件的 view 部分
- 添加一个模块目录（本篇不包含，详情查看）。搜友的自定义文件应该放在这个目录下。为了自定义的 checkout 能正确应用，你的自定义模块应该依赖 Magento_Checkout 这个模块。不要用 Ui 命名自定义模块，因为 %Vendor%_Ui 符号（在指定路径用的）可能会导致一些问题；
- 新建 view 模块的js 文件；
- 新建 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 ：
- 用以下内容新建一个 Vendor/Module/view/base/requirejs-config.js 文件；
-
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 } } } } - 新建 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月前 被前端小威编辑 ，原因：