4

I have created 1 custom tab on the checkout page and it's working fine I follow below link to add the tab on cart page.

Magento 2 - Add step on checkout

I want to add a link name as "Create an account".On click of that link, I want to redirect the page on create account page.

2

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>
  • how to write link <a href=" " ></a> ? – Akash Jul 25 '18 at 10:16
  • <a href="YOURURL/customer/account/create/">Create an account</a> Something like this, there might be a Magento specific way to create the dynamic path but i'm unsure how to do that. – Sanne Jul 25 '18 at 10:24
  • @sanne thanks for your help but I got the answer from another link. – Kushal Jul 25 '18 at 10:36
  • @Sanne, can we add link for New address button in checkout? – jafar pinjar Mar 29 at 10:00
  • @jafarpinjar Probably, your best bet is to look at how Magento currently adds the new address button and just copy the functionality :) – Sanne Mar 29 at 10:04
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.