Skip to content

Two Email Fields at Authentication Step (Magento 2 Luma Checkout)

I want to create a new checkout step called Authentication and split it into two paths:

  1. Login
  2. Guest Checkout

How can I implement the second email field?

enter image description here

My approach would be to move the customer-email to the new step

class AuthenticationStepProcessor implements LayoutProcessorInterface
{
  public function __construct(
    private Config $config,
    private ArrayManager $arrayManager
  ) {
  }

  public function process($jsLayout): array
  {
    $jsLayout = $this->arrayManager->merge(
        'components/checkout/children/steps/children',
        $jsLayout,
        ['authentication-step' => ['component' => 'Local_Checkout/js/view/step/authentication', 'children' => []]]
    );

    $jsLayout = $this->arrayManager->move(
        'components/checkout/children/steps/children/shipping-step/children/shippingAddress/children/customer-email',
        'components/checkout/children/steps/children/authentication-step/children/customer-email',
        $jsLayout
    );

    return $jsLayout;
  }
}

authentication.html

<li id="authentication" data-bind="fadeVisible: isVisible">
<div id="checkout-step-title" class="step-content" data-role="content">
    <div class="loggedIn">
        <div class="step-title" data-bind="i18n: 'I am already a customer'" data-role="title"></div>
        <!-- ko foreach: getRegion('customer-email') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </div>

    <!-- Guest Checkout -->
    <div class="guest">
        <div class="step-title" data-bind="i18n: 'I am a new customer'" data-role="title"></div>
        <!-- ko foreach: getRegion('guest-email') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
        <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: 'Order as a guest'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
</li>

authentication.js

define([
'jquery',
'ko',
'uiComponent',
'underscore',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/step-navigator',
'mage/translate',
], function (
$,
ko,
Component,
_,
customer,
stepNavigator,
$t
) {
'use strict';

return Component.extend({
    defaults: {
        template: 'Local_Checkout/step/authentication'
    },
    isVisible: ko.observable(!customer.isLoggedIn()),

    initialize: function () {
        this._super();

        if (!customer.isLoggedIn()) {
            stepNavigator.registerStep(
                'authentication',
                null,
                $t('Authentication'),
                this.isVisible,
                _.bind(this.navigate, this),
                5
            );
        }

        return this;
    },

    navigate: function (step) {
        step && step.isVisible(true);
    },

    navigateToNextStep: function () {
        if (this.validateCustomerEmail()) {
            stepNavigator.next();
        }
    },

    validateCustomerEmail: function () {
        var loginFormSelector = 'form[data-role=email-with-possible-login]';

        $(loginFormSelector).validation();

        if (!Boolean($(loginFormSelector + ' input[name=username]').valid())) {
            $(loginFormSelector + ' input[name=username]').focus();

            return false;
        }

        return true;
    },
});
});

But then i have only one field