magento2: Checkout : sortOrder not work in Billing / Shipping address

Preconditions (*)

  1. Magento 2.2.3
  2. Make sure Check Money Order method is enabled

Steps to reproduce (*)

  1. Create a module that depends on Magento_Checkout
  2. Inside your module, create the following layout
<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <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="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="payments-list" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="checkmo-form" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="form-fields" xsi:type="array">
                                                                            <item name="children" xsi:type="array">
                                                                                <item name="postcode" xsi:type="array">
                                                                                    <item name="sortOrder" xsi:type="string">999</item>
                                                                                </item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
  1. Flush caches and delete the content of pub/static/frontend/*
  2. Add a product to the cart and go to the checkout

Expected result (*)

  • You should see the postcode field at the very end of the form.

Actual result (*)

  • postcode field is at the very top of the form.

Additional notes

Looking at

\Magento\Checkout\Block\Checkout\LayoutProcessor::process() 

I can see the postcode inside jsLayout object

But looking at its sortCode it contains an array with two values. One coming from the customer_eav_attribute table and the other coming from layout layout.

I think it should return a string containing the layout value that replaces the value from the db.

About this issue

  • Original URL
  • State: open
  • Created 8 years ago
  • Reactions: 2
  • Comments: 16 (6 by maintainers)

Most upvoted comments

This is still an issue for me on 2.1.5. I’ve have taken a look at debugging the issue it seems to be a race condition.

Looking at magento/module-ui/view/base/web/js/form/element/select.js there is an initInput function that uses magento/module-ui/view/base/web/js/core/renderer/layout.js in order to append an input field. Looking at layout.js we can see that the run function actually gets returned and is what gets used when calling layout in select.js, this then calls the function named iterator which loops and either processes a node or adds it as a child should it be a string. As in this case it’s a string it adds it and ultimately ends up using magento/module-ui/view/base/web/js/lib/core/collection.js to do so. The function in this collection.js file that is used is insertChild. Outputting data to the console I could see that in the event that the county (region) field was placed at the top of the form, ‘this._elems’ or ‘container’ was actually empty. As this meant it did not contain the field passed in via the position parameter, the function just adds it to the array and then presumably all other fields get added afterwards. In the event this all actually worked and the field was position where it should be, the ‘container’ / ‘this._elems’ variable was actually a populated array which included the fields referenced in the ‘position’ param.

Hopefully this can provide you with some direction as to what the root cause might be.

I can also confirm this is an issue on CE 2.1.3

  • For me the State/Province field is located at the top of the form when it is not a select element (eg. Country is set to United Kingdom).
  • Seems to be fine when it is a select element (eg. Country is set to United States)

I’m on version CE 2.1.0 and still experiencing this issue. Is there a fix for this?