5

How can i change the sort order of the field in the shipping form at checkout. In the checkout_index_index.xml there is only option to sort the region, city, company, etc. But not:

Name, Surname, Suffix, Prefix

thx for help

Improve this question

2 Answers 2

Reset to default
8

1) XML Layout:

We should use <item name="sortOrder" xsi:type="string">20</item>

app/code/Vendor/Checkout/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="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="lastname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">20</item>
                                                                </item>
                                                                <item name="firstname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">21</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

2) Or, Plugin for the \Magento\Checkout\Block\Checkout\LayoutProcessor::process method

public function aroundProcess($subject, \Closure $proceed, $jsLayout)
{

    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
    ['children']['shippingAddress']['children']['shipping-address-fieldset']
    ['children']['lastname']['sortOrder'] = 20;
    ......

    $customJsLayout = $proceed($jsLayout);

    return $customJsLayout;
}

We can see more here: http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_customize.html

Improve this answer
18
  • thanks khoa, with your solution i can sort fields like firstname, name ... the prefix and suffix fields are not working
    – Florin P.
    May 11, 2017 at 15:01
  • ahh, i had an typo mistake in my xml, its working, great!
    – Florin P.
    May 11, 2017 at 15:04
  • there is an special case with street[0], which is not working via xml, do you have any idear what the correct syntax is?
    – Florin P.
    May 11, 2017 at 15:23
  • Yes, @FlorinP. I faced the same issue with street. I tried with Plugin way - the second way. Tomorrow, I will test again with Layout xml.
    – Khoa TruongDinh
    May 11, 2017 at 15:24
  • 1
    is there for the billing form on next step the same procedure?
    – Florin P.
    May 11, 2017 at 15:29
1

the layout xml is not working because of wrong path

Use insted of

app/code/Vendor/Checkout/view/layout/checkout_index_index.xml

this

app/code/Vendor/Checkout/view/frontend/layout/checkout_index_index.xml

And you have to replace this:

<item name="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/shipping</item>

with this

<item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item>

Then it will work perfectly

Improve this answer
1
  • Hi @Likeweb the above answer is not working with custom field in checkout page
    – shivashankar m
    May 25, 2018 at 10:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.