Move login pop up form above shipping address magento 2 checkout

Question

I have to move login pop above shipping address in magento 2 checkout.

I have found popup sign in form code in checkout_index_index.xml.

How can I move sign in form above shipping address.

 <item name="authentication" xsi:type="array">
    <item name="sortOrder" xsi:type="string">1</item>
    <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item>
    <item name="displayArea" xsi:type="string">authentication</item>
    <item name="children" xsi:type="array">
         <!--Additional authentication fields-->
         <item name="errors" xsi:type="array">
         <item name="sortOrder" xsi:type="string">0</item>
         <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>
         <item name="displayArea" xsi:type="string">messages</item>
    </item>
  </item>

Answer 1

In your custom checkout_index_index.xml file add these lines:

<item name="authentication" xsi:type="array"> <item name="displayArea" xsi:type="string">steps</item> </item>

(Source: https://inviqa.com/blog/technical-guide-magento-2-checkout)

Then you only have to make minor changes to your CSS in order to display the form the way you want.

Answer 2

Came across this today and thought I'd share another fix.

Find onepage.html in module-checkout

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko foreach: getRegion('progressBar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('estimation') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="opc-wrapper">

    <ol class="opc" id="checkoutSteps">
        <!-- ko foreach: getRegion('authentication') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

    <!-- ko foreach: getRegion('steps') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    </ol>
</div>

<!-- ko foreach: getRegion('sidebar') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Move to your theme in Magento_Checkout/web/template/onepage.html

Move

<!-- ko foreach: getRegion('authentication') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Into opc-wrapper or checkoutSteps like so:

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko foreach: getRegion('progressBar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('estimation') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="opc-wrapper">

    <ol class="opc" id="checkoutSteps">
        <!-- ko foreach: getRegion('authentication') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

    <!-- ko foreach: getRegion('steps') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    </ol>
</div>

<!-- ko foreach: getRegion('sidebar') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Then copy authentication.html into your theme in Magento_Checkout/web/template/authentication.html

<button
    type="button"
    class="action action-auth-toggle"
    data-trigger="authentication">
    <span data-bind="i18n: 'Sign In'"></span>
</button>

And

style="display: none"
         data-bind="mageInit: {
            'Magento_Ui/js/modal/modal':{
                'type': 'custom',
                'modalClass': 'authentication-dropdown',
                'trigger': '[data-trigger=authentication]',
                'wrapperClass': 'authentication-wrapper',
                'parentModalClass': '_has-modal-custom _has-auth-shown',
                'responsive': true,
                'responsiveClass': 'custom-slide',
                'overlayClass': 'dropdown-overlay modal-custom-overlay',
                'buttons': []
            }}"

To disable the modal and style accordingly.

Answer 3

My Solution is a bit different but works on Magento 2.2.6. in your theme file app/design/frontend/Theme/package/Magento_Checkout/layout/checkout_index_index.xml

Add the content:

    <referenceContainer name="content">
        <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="authentication" xsi:type="array">
                                    <item name="displayArea" xsi:type="string">steps</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </referenceContainer>