Wir haben erfolgreich einen neuen Schritt in der Checkout-Seite für magento2 hinzugefügt.
Hier finden Sie einen Code für benutzerdefiniertes JS für diesen Schritt:
Speicherort der Datei: app / code / Vendor / CheckoutStep / view / frontend / web / js / view / customer-step.js
define(
[
'ko',
'uiComponent',
'underscore',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/step-navigator'
],
function (
ko,
Component,
_,
customer,
stepNavigator
) {
'use strict';
/**
*
* mystep - is the name of the component's .html template,
* <Vendor>_<Module> - is the name of the your module directory.
*
*/
return Component.extend({
defaults: {
template: 'Vendor_CheckoutStep/customerstep'
},
//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
'customer-step',
//step alias
null,
//step title value
'Customer',
//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
*/
8
);
if(customer.isLoggedIn())
{
ko.observable(false);
stepNavigator.next();
}
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-Datei: app / code / Vendor / CheckoutStep / view / frontend / web / template / customerstep.html
<form data-bind="submit: navigateToNextStep" novalidate="novalidate" class="form form-shipping-address">
<fieldset class="fieldset">
<!-- ko foreach: getRegion('customer-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</fieldset>
<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>
Wenn der Kunde angemeldet ist, geht er direkt zum nächsten Schritt, der einwandfrei funktioniert.
if(customer.isLoggedIn())
{
ko.observable(false);
stepNavigator.next();
}
Wenn ich auf den vorherigen Schritt klicke, wird zum vorherigen Schritt übergegangen. Ich muss den vorherigen Schritt deaktivieren, wenn der Kunde angemeldet ist.
quelle