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
Add a comment |
2 Answers
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 workingFlorin P.– Florin P.2017-05-11 15:01:30 +00:00Commented May 11, 2017 at 15:01
- ahh, i had an typo mistake in my xml, its working, great!Florin P.– Florin P.2017-05-11 15:04:35 +00:00Commented 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.– Florin P.2017-05-11 15:23:35 +00:00Commented 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 Truong– Khoa Truong2017-05-11 15:24:59 +00:00Commented May 11, 2017 at 15:24
- 1is there for the billing form on next step the same procedure?Florin P.– Florin P.2017-05-11 15:29:58 +00:00Commented May 11, 2017 at 15:29
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 pageshivashankar m– shivashankar m2018-05-25 10:55:27 +00:00Commented May 25, 2018 at 10:55