cancel
Showing results for 
Search instead for 
Did you mean: 

It should be possible to sort the billing address fields in the checkout in a convenient way

It should be possible to sort the billing address fields in the checkout in a convenient way

Feature request from hostep, posted on GitHub Aug 24, 2016

Preconditions

  1. Magento CE 2.1.0
  2. A whole afternoon of debugging joy (oh no, I already did this for you, don't worry)

Steps to reproduce

  1. Take a look at how the billing address fields are composed: https://github.com/magento/magento2/blob/c5d618d5439362f50ba0f21d3fadf418cc765190/app/code/Magento/C...
  2. Compare this to the shipping address fields: https://github.com/magento/magento2/blob/c5d618d5439362f50ba0f21d3fadf418cc765190/app/code/Magento/C...

Expected result

I expected to be able to change the sort order of the billing address fields in the checkout using xml or some other "convenient" way, but found this is almost impossible without manually altering the sort_order field in the customer_eav_attribute table.

Actual result

Not able to sort the billing address fields in a convenient and easy way.

Discussion

To be able to sort the shipping address fields in the checkout, we can create a file checkout_index_index.xml with something like this:

<?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="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="region_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">87</item>
                                                                </item>
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">80</item>
                                                                </item>
                                                                <item name="company" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">45</item>
                                                                </item>
                                                                <item name="vat_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">46</item>
                                                                </item>
                                                                <item name="country_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">85</item>
                                                                </item>
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">90</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

I was hoping there was a similar way for the billing address fields, but came to the conclusion after viewing https://github.com/magento/magento2/blob/c5d618d5439362f50ba0f21d3fadf418cc765190/app/code/Magento/C... this is not possible due to those hardcoded values.

Or am I missing something obvious here?

1 Comment
M1 Certified

Hi @apiuser,

This solution worked for me https://magento.stackexchange.com/a/180185/42859.

There are other suggested ways using XML but I didn't try. It may help you.

Thanks,

Kalyan