How to add new link on checkout page in Magento 2.2.4?
Useful link how to add the link in a tag
Best Way Of Getting Base URL Inside KnockoutJS .html File
checkout-login-step.js file
define(
[
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Customer/js/model/customer',
'mage/url'
],
function (
ko,
Component,
_,
stepNavigator,
customer,
url
) {
'use strict';
/**
* check-login - is the name of the component's .html template
*/
return Component.extend({
defaults: {
template: 'Lalitmohan_Checkoutstep/check-login'
},
//add here your logic to display step,
isVisible: ko.observable(true),
isLogedIn: customer.isLoggedIn(),
//step code will be used as step content id in the component template
stepCode: 'isLogedCheck',
//step title value
stepTitle: 'custom step 2',
/**
*
* @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
*/
21
);
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 () {
},
getBaseUrl: function() {
return url.build('customer/account/create');
},
/**
* @returns void
*/
navigateToNextStep: function () {
stepNavigator.next();
}
});
}
);
check-login.html file
<!--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"
data-role="content">
<p>You Are <span data-bind="if: isLogedIn">Already</span> <span data-bind="if: !isLogedIn">not</span> Logged-in</p>
<span data-bind="if: !isLogedIn"><a href="#" data-bind="attr: { href: getBaseUrl() }" >Create an Account</a></span>
<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><!-- ko i18n: 'Next'--><!-- /ko --></span>
</button>
</div>
</div>
</form>
</div>
</li>
In your xml you can add a new item under the step like so:
<item name="create-account-link" xsi:type="array">
<item name="component" xsi:type="string">VENDOR_MODULE/js/view/create-account-link
</item>
</item>
Then create a js file for it.
web/js/view/create-account-link.js
define([
'uiComponent'
], function (Component) {
'use strict';
return Component.extend({
defaults: {
template: 'VENDOR_MODULE/create-account-link'
},
});
});
Then create the html for it: web/template/create-account-link.html
<a href.... you get the idea ... ></a>