0

I wanted to change the order of a few fields on the checkout page, and I was able to do it by copying the checkout_index_index.xml in app/design/frontend/Vendor/theme/Magento_Checkout/layout/ and making changes.

My code looks like this :

<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" template="Magento_Checkout::onepage.phtml">
            <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">
                                                        <!-- The name of the form the field belongs to -->
                                                        <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">70</item>
                                                                </item>


                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

And it works

Now, my page (prior to the changes) looks like this:

enter image description here

And after the changes look like this:

enter image description here

As you see the page doesn't render how it should be rendering. Is it because of css? Maybe I am not referencing the file correctly?

For reference here is the original checkout_index_index.xml pastebin-link

But even though in the beginning I used the whole file as is in the app/design/... and I had the same problem. Maybe the file doesn't see the CSS/JS files?

I am open to any ideas!

1

Can you try adding:

<?xml version="1.0"?>

At the top and see if that fixes it? I don't really see any other mistakes on first glance.

Also check if your normal checkout_index_index is also set to layout="checkout". By default it is but it might be different for you?

Also try calling the referenceBlock without the url like so:

        <referenceBlock name="checkout.root">
2
  • Hey, thanks for your time. I added <?xml version="1.0"?> but nothing happened. The checkout page is set to "checkout" layout. Also, the url in the referenceblock was added to solve the same problem. So removing it, doesn't change the problem. – SUPERDEVELOPER Aug 7 '18 at 9:36
  • 1
    Solved by using layout="1column" as mentioned in Magento 2 DevDocs for Customizing Checkout. – SUPERDEVELOPER Aug 7 '18 at 10:22

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.