在Magento2中定制开发支付模块（1）

添加一个新的支付步骤：这节所讲述的内容？默认的Magento支付包括以下两个步骤： 1.配送信息 2.预览和支付信息你可以添添加自己的支付步骤，它应该被作为一个UI控件来实现。出于能兼容，可升级和好维护，建议不要去Magento的原生代码，在你自己的命名空间来定制它。这节讲述了怎么样在前端来创建一个组件，并实现结账的步骤，和怎么把它融合到结账流程内容讲述了什么创建结帐步骤组件的视图部分添加实施新步骤的JavaScript文件添加的.html模板添加结账步骤到结帐页面布局创建结帐步骤组件的视图部分创建新的结帐步骤的视图部分：添加模块目录（不包括本主题中）。参见建立你的模块详情）。所有的自定义文件必须存储在那里。为了让你定制的结帐流程得到正确的应用，你的自定义模块应依赖于Magento_Checkout模块。创建.js文件来实现视图模型。为该组件创建一个.html模板。每个步骤中的细节在让我们在以下段落中慢慢道来。添加实现新步骤的JavaScript文件新的Checkout步骤都必须作为UI组件来实现。也就是说，它的JavaScript实现必须是JavaScript模块。该文件必须存放在<你module_dir>/view 目录下。以下是一个带有评论 view/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,
* your_module_dir - is the name of the your module directory.
*
*/
return Component.extend({
defaults: {
template: 'your_module_dir/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 */ navigate: function () { }, /** * @returns void */ navigateToNextStep: function () { stepNavigator.next(); } }); } ); 添加的.html模板文件在模块目录中，添加的.html模板的组件。它必须位于<your_module_dir>/view/front/ 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></span> </button> </div> </div> </form> </div> </li> 添加支付步骤到结帐布局页面作为在页面上显示的新步骤，你需要先在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">Magento_Your_Module_Name/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>

在Magento2中定制开发支付模块（1）

微信号：腾讯云折扣返现

技术讨论QQ群： 863102326

作者: catherine

搜索

标签