Magento – Magento 2 – How to change the SortOrder of the street address fields on the Shipping Checkout page

checkoutmagento-2.0magento2shippingshipping-address

I am trying to reorganize the form fields on the Checkout Shipping step and having difficulty moving the Street Address field. I am not sure if I am referencing the street fields correctly in the checkout_index_index.xml.

The following is a screenshot of my current state, the Street Address should be below city, but no matter my attempts it is still displayed as the last field in the form. enter image description here

Here is the contents of my checkout_index_index.xml:

    <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="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/shipping</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="street" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">1</item>
                                                            </item>
                                                            <item name="city" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">2</item>
                                                            </item>
                                                            <item name="region_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">3</item>
                                                            </item>
                                                            <item name="region_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">3</item>
                                                            </item>
                                                            <item name="postcode" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">4</item>
                                                            </item>
                                                            <item name="country_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">5</item>
                                                            </item>
                                                            <item name="lastname" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">6</item>
                                                            </item>
                                                            <item name="firstname" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">7</item>
                                                            </item>
                                                            <item name="company" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">8</item>
                                                            </item>
                                                            <item name="telephone" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">9</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

Best Answer

I don't know exactly why this works, but it's just working for me.

If I set a sortOrder greater than 100, then these fields will be displayed after the street field:

<item name="country_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">100</item>
</item>
<item name="region_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">101</item>
</item>

If instead I give a sort order lower than 50, then fields are displayed before the street:

<item name="country_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">1</item>
</item>
<item name="region_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">2</item>
</item>

I suppose that somewhere the street's sortOrder is set to a value of 70 more or less.

Related Topic