4

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

4

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

  • thanks khoa, with your solution i can sort fields like firstname, name ... the prefix and suffix fields are not working – Florin P. May 11 '17 at 15:01
  • ahh, i had an typo mistake in my xml, its working, great! – Florin P. May 11 '17 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 '17 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 '17 at 15:24
  • 1
    is there for the billing form on next step the same procedure? – Florin P. May 11 '17 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

  • Hi @Likeweb the above answer is not working with custom field in checkout page – shivashankar m May 25 '18 at 10:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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