如何在Magento 2的结帐中添加新的自定义步骤/部分
使用最强大的CMS Magento 2，它允许您自定义结帐流程，并在运输和评论付款部分之间添加自己的步骤。让我们使用一个例子来做到这一点，在这里我们添加了一个指令步骤，然后下订单并将客户进一步转发到Magento 2商店的付款部分。此外，安装自定义结帐字段，这有助于商店管理员通过添加额外字段来自定义结帐页面。
首先，我们需要创建“checkout_index_index.xml”以在此路径中添加自定义结帐步骤。
app\code\Vendor\Extension\frontend\view\layout\checkout_index_index.xml
<?xml version="1.0"?> <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="check-login-step" xsi:type="array"> <item name="component" xsi:type="string">Vendor_Extension/js/view/checkout-new-step </item> <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>
在上面的代码中，我们在“运输步骤”之后添加了结帐步骤。如果您想在结帐过程中更改步骤位置，以下是一些方案。
要在发货步骤“sortOrder”值之前显示步骤内容，应< 1 显示发货步骤和付款步骤之间的步骤内容 1
<“sortOrder” < 2 显示付款步骤“sortOrder”后的步骤内容 > 2
在下一步中，我们需要在前端 Web 文件夹中创建一个 Js 文件。
app\code\Vendor\Extension\view\frontend\web\js\view\checkout-new-step.js
define(
[
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Checkout/js/model/full-screen-loader',
'mage/storage',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/action/get-totals',
'Magento_Checkout/js/model/totals',
'Magento_Checkout/js/model/cart/totals-processor/default',
'Magento_Checkout/js/model/cart/cache'
],
function (ko,
Component,
_,
stepNavigator,
fullScreenLoader,
storage,
customer,
quote,
rateRegistry,
totals,
getTotalsAction,
defaultTotal,
cartCache) {
'use strict';
/**
* check-login - is the name of the component's .html template
*/
return Component.extend({
defaults: {
template: ‘Vendor_Extension/check-new’
},
//add here your logic to display step,
isVisible: ko.observable(true),
isVisibleDrop: ko.observable(false),
isLogedIn: customer.isLoggedIn(),
//step code will be used as step content id in the component template
stepCode: 'newstep',
//step title value
stepTitle: "New Step",
/**
*
* @returns {*}
*/
initialize: function () {
this._super();
// register your step
stepNavigator.registerStep(
this.stepCode,
//step alias
null,
this.stepTitle,
//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;
},
isStepDisplayed: function () {
return true;
},
/**
* 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 文件。
app\code\Vendor\Extension\view\frontend\web\js\view\check-new.html
<!--Use 'stepCode' as id attribute-->
<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
<div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>
<div id="checkout-step-title"
class="step-content delivery-option-master"
data-role="content">
<div class="fieldset">
<span><!-- ko i18n: 'New Step Added'--><!-- /ko --></span>
</div>
</div>
</li>哒！您已成功在Magento 2结帐流程中添加自定义步骤。