magento2二次开发教程，请查看电子书：
点此查看 ==》Magento2.x企业级开发实战
本文转载自：Magento中文网
本文介绍如何创建组件的前端部分、实现结账步骤以及如何将其添加到结账流程中。
第一步：创建结账步骤组件的视图部分
要创建新结帐步骤的视图部分：
添加模块目录（本主题未涵盖）。 有关详细信息，请参阅构建模块）。 所有自定义文件都必须存储在那里。 为了正确应用结帐自定义，自定义模块应依赖于 Magento_Checkout 模块。 不要使用 Ui 作为自定义模块名称，因为指定路径时所需的 %Vendor%_Ui 表示法可能会导致问题。
- 创建实现视图模型的 .js 文件。
- 为组件创建一个 .html 模板。
添加实现新步骤的 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 如下：
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 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 steps
* 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 模板
在模块目录中，为组件添加 .html 模板。 它必须位于 <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>
第 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">
<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>
第 3 步：为付款和配送步骤创建混合（可选）
如果新步骤是第一步，必须为付款和运输步骤创建 mixin。 否则，将在结账加载时激活两个步骤。
创建一个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 () {
// set visible to be initially false to have your step show first
this.visible = ko.observable(false);
this._super();
return this;
}
};
return function (target) {
return target.extend(mixin);
};
});
网友评论