<h5 style="color:red;">系统学习magento二次开发，推荐小册：<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">《Magento中文全栈二次开发
》</a></h5>
<div class="image-container">
<p>
<a style="color:blue;" href="https://www.maxiaoke.com/manual/magento_cn_dev.html" target="_blank">
<img src="https://www.maxiaoke.com/uploads/images/20230218/bb9c82995c24d1105676e02f373755f5.jpg" alt="Magento中文全栈二次开发">
</a>
</p>
</div>
<div class="text-container" style="font-size:14px; color:#888">
<p>本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。</p>
</div>
<hr><p>使用最强大的CMS Magento 2，它允许您自定义结帐流程，并在运输和评论付款部分之间添加自己的步骤。让我们使用一个例子来做到这一点，在这里我们添加了一个指令步骤，然后下订单并将客户进一步转发到Magento 2商店的付款部分。此外，安装自定义结帐字段，这有助于商店管理员通过添加额外字段来自定义结帐页面。</p><p>首先，我们需要创建“checkout_index_index.xml”以在此路径中添加自定义结帐步骤。</p><p>app\code\Vendor\Extension\frontend\view\layout\checkout_index_index.xml</p><pre class="brush:bash;toolbar:false"><?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></pre><p>在上面的代码中，我们在“运输步骤”之后添加了结帐步骤。如果您想在结帐过程中更改步骤位置，以下是一些方案。</p><p>要在发货步骤“sortOrder”值之前显示步骤内容，应< 1 显示发货步骤和付款步骤之间的步骤内容 1</p><p><“sortOrder” < 2 显示付款步骤“sortOrder”后的步骤内容 > 2</p><p>在下一步中，我们需要在前端 Web 文件夹中创建一个 Js 文件。</p><p>app\code\Vendor\Extension\view\frontend\web\js\view\checkout-new-step.js</p><p></p><pre class="brush:bash;toolbar:false">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();
}
});
}
);</pre><p><span style="color: #ce9178;">现在在最后一步中，我们需要在此路径上再创建一个 html 文件。</span></p><p><span style="color: #ce9178;">app</span><span style="color: #d7ba7d;">\c</span><span style="color: #ce9178;">ode</span><span style="color: #d7ba7d;">\V</span><span style="color: #ce9178;">endor</span><span style="color: #d7ba7d;">\E</span><span style="color: #ce9178;">xtension</span><span style="color: #d7ba7d;">\v</span><span style="color: #ce9178;">iew</span><span style="color: #d7ba7d;">\f</span><span style="color: #ce9178;">rontend</span><span style="color: #d7ba7d;">\w</span><span style="color: #ce9178;">eb</span><span style="color: #d7ba7d;">\j</span><span style="color: #ce9178;">s</span><span style="color: #d7ba7d;">\v</span><span style="color: #ce9178;">iew</span><span style="color: #d7ba7d;">\c</span><span style="color: #ce9178;">heck-new.html</span></p><p><span style="color: #ce9178;"></span></p><pre class="brush:bash;toolbar:false"><!--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></pre><p><span style="color: #ce9178;">哒！您已成功在Magento 2结帐流程中添加自定义步骤。</span></p><p><br/></p>
