5

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

enter image description here

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>
2
  • 1
    Have you found the solution? I've tried changing the "sortOrder" values but no success Dec 20, 2016 at 23:25
  • still not found Dec 21, 2016 at 4:59

3 Answers 3

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.

1
  • I've tried to move it to a place after steps using sortOrder item, but it didn't work. Looks like this solution is the only way. Thanks!
    – Alex
    Jul 26, 2017 at 15:22
0

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.

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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