☰
创建my-step-view.js它必须位于/view/frontend/web/js目录下
纵论 2022-08-29 06:33:20
define([
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'mage/translate'
], function (ko, Component, _, stepNavigator, $t) {
'use strict';
/**
* mystep - is the name of the component's .html template,
* _ - is the name of your module directory.
*/
return Component.extend({
defaults: {
template: '_/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
$t('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 after payment step
*/
this.sortOrder
);
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组件的模板。它必须位于/view/frontend/web/template目录下。
示例mystep.html如下：
<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 页面布局中声明它，该布局定义在checkout_index_index.xml.
所以你需要在以下位置添加一个扩展布局文件： checkout_index_index.xml/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">
<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
<!--To display step content between shipping step and payment step 1 < "sortOrder"
<!--To display step content after payment step "sortOrder" > 2 -->
<item name="sortOrder" xsi:type="string">2</item>
<item name="children" xsi:type="array">
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>如果您的新步骤是第一步，您必须为付款和运输步骤创建 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);
};
});