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

Created on 28 Jul 2016 · 15Comments · Source: magento/magento2

Preconditions (*)

Magento 2.2.3
Make sure Check Money Order method is enabled

Steps to reproduce (*)

Create a module that depends on Magento_Checkout
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>

Flush caches and delete the content of pub/static/frontend/*
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.

Checkout Confirmed P2 ready for dev Reproduced on 2.2.x Reproduced on 2.3.x S2 Dev.Experience bug report

Source

parthviroja

👍1

All 15 comments

@parthviroja , please specify the changes that you made in checkout_index_index.xml?

dthampy on 29 Jul 2016

i don't made any changes in checkout_index_index.xml
also i have found this issue in default luma theme also

when i have change sortOrder of company field in DB that time this issue raise.

default sortOrder of company field : 60

i have set 160 , as per previous comment.

parthviroja on 29 Jul 2016

Can you send the result of this query?
select customer_eav_attribute.sort_order,eav_attribute.attribute_id , eav_attribute.attribute_code, eav_attribute.frontend_label from eav_attribute join customer_eav_attribute on eav_attribute.attribute_id = customer_eav_attribute.attribute_id;

dthampy on 29 Jul 2016

i have check result of this query, i have found field size is not update in this table, for that this happen, thanks @dthampy

parthviroja on 5 Aug 2016

Thanks for your update @parthviroja .

dthampy on 5 Aug 2016

The same issue is coming for me too. The issue exist only in chrome browser. You will reproduce this issue when you do multiple refresh on the same page. Can you please advise what might be the reason for this issue?

Thanks,
Karol M
state-field-in-wrong-place

karoltryzens on 2 Dec 2016

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

nehal83 on 23 Jan 2017

👍1

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)

minlare on 3 Feb 2017

👍1

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.

Danielc3 on 14 Mar 2017

Can this ticket please be reopened, as it's obviously still an issue?

mustdobetter on 27 Mar 2017

Agree with "mustdobetter" can we please re-open this ticket as this is also happening on Enterprise 2.1.5.
Same issue as "minlare" the state/provice field is appearing at the top of the form.

BaberAhmed on 1 Jun 2017

Preconditions (*)

Magento 2.2.3
Make sure Check Money Order method is enabled

Steps to reproduce (*)

Create a module that depends on Magento_Checkout
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>

Flush caches and delete the content of pub/static/frontend/*
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.

diazwatson on 15 Jan 2019

:white_check_mark: Confirmed by @engcom-backlog-nazar
Thank you for verifying the issue. Based on the provided information internal tickets MAGETWO-98972, MAGETWO-98973 were created

Issue Available: @engcom-backlog-nazar, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._

magento-engcom-team on 29 Mar 2019

Hi @sergey-solo. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

[ ] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

[ ] 2. Verify that the issue is reproducible on 2.3-develop branch
Details
- Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
- If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
- If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
[ ] 3. Verify that the issue is reproducible on 2.2-develop branch.
Details
- Add the comment @magento give me 2.2-develop instance to deploy test instance on Magento infrastructure.
- If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x
[ ] 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

Join Magento Community Engineering Slack and ask your questions in #github channel.

m2-assistant[bot] on 24 Jul 2019

Hi @devamitbera. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

[ ] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

[ ] 2. Verify that the issue is reproducible on 2.3-develop branch
Details
- Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
- If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
- If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
[ ] 3. If the issue is not relevant or is not reproducible any more, feel free to close it.