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

Question

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.

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>

Answer 1

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.

Answer 2

You can change the street input sort order using a plugin for Magento\Checkout\Block\Checkout\LayoutProcessor:

class Reorder
{

    public function afterProcess($subject, $jsLayout)
    {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']['shipping-address-fieldset']
        ['children']['street']['sortOrder'] = 200;

        return $jsLayout;
    }
}

Answer 3

You can change sortorder by updating sortorder in DB. First search 'street' in 'eav_attribute' table using following query.

SELECT * FROM `eav_attribute` WHERE `attribute_code` LIKE '%street%';

In result you can get 'attribute_id' of street field. Now search in 'customer_eav_attribute' for the attribute_id.

SELECT * FROM `customer_eav_attribute` WHERE `attribute_id` = 28;

Now update 'sort_order' field in customer_eav_attribute to change the default sortorder for street address.

UPDATE `customer_eav_attribute` SET `sort_order` = '50' WHERE `customer_eav_attribute`.`attribute_id` = 28; 

Answer 4

You need to add the following line and change the sorting value as per your need:

<item name="sortOrder" xsi:type="string">10</item>

for example

<item name="postcode" xsi:type="array">
<!-- post-code field has custom UI component -->
    <item name="sortOrder" xsi:type="string">50</item>
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="string">true</item>
    </item>
</item>

Hope I have resolved your query.

Answer 5

We can not able to modify street by using xml because it is added dynamically after that so we need to create plugin for that.

To change the ordering of the for shipping address you need to create after plugin for jsLayout.

check below example to resolve your issue.

Step 1. Create Magento 2 module

Step 2. declare plugin in vendorname/modulename/etc/frontend/di.xml file

vendorname/modulename/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Onepage">
        <plugin name="checkout_modification" type="vendorname\modulename\Plugin\AfterJsConfig"/>
    </type>
</config>

Step 3: Create Plugin file to modify JsLayout and return it back to checkout page.

vendorname/modulename/Plugin/AfterJsConfig.php

<?php
namespace vendorname\modulename\Plugin;

use Magento\Checkout\Block\Onepage;
use Magento\Framework\Serialize\Serializer\Json;

class AfterJsConfig
{
    /**
     * @var Json
     */
    protected $serializer;

    /**
     * AfterJsConfig constructor.
     * @param Json $serializer
     */
    public function __construct(
        Json $serializer
    ) {
        $this->serializer = $serializer;
    }

    /**
     * @param Onepage $subject
     * @param $result
     * @return mixed
     */
    public function afterGetJsLayout(Onepage $subject, $result) {
        try {
            if ($result != "") {
                $jsonLayoutArray = $this->serializer->unserialize($result);

                // you can add more modification here.

                $jsonLayoutArray['components']['checkout']['children']['steps']['children']['shipping-step']
                ['children']['shippingAddress']['children']['shipping-address-fieldset']
                ['children']['street']['sortOrder'] = 1;

                return $this->serializer->serialize($jsonLayoutArray);
            }
        } catch (\Exception $e) {
        }

        return $result;
    }
}

Hope this solution help you to complete you task.

Note: Please make it right and add plus to this solution if this solution work for you.

Thank You

Answer 6

It seems that street is not sortable by checkout_index_index.xml. I guess it would need a custom module like suggested in other answers or you can just take into account that street's sorting order number is 70 and sort other fields accordingly.