Magento – Magento 2 + change parent item in layout xml

magento2onepage-checkout

I'm working on a custom checkout page with custom steps, payment and shipping methods. I work in a copy of checkout_index_index.xml to override the layout and i wonder how can i move or change the parent of the sidebar item.

What i'm trying to achieve is moving the sidebar inside my custom step but i can't move it with the traditional tag <move element="name" destination="" before="" after="" /> as it's in arguments structure

I don't know the tags to unset/set parent item for an item.

checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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">
                                        <!-- STEP ONE -->
                                        <item name="user-info-step" xsi:type="array">
                                            <item name="component" xsi:type="string">Robusta_CustomCheckout/js/view/step-user-info</item>
                                                <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                                <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                                <!--To display step content after payment step "sortOrder" > 2 -->
                                            <item name="sortOrder" xsi:type="string">0</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->
                                                <item name="errors" xsi:type="array">
                                                    <item name="sortOrder" xsi:type="string">0</item>
                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>
                                                    <item name="displayArea" xsi:type="string">messages</item>
                                                </item>
                                            </item>
                                        </item>

                                        <!-- STEP FOUR -->
                                        <item name="place-order-step" xsi:type="array">
                                            <item name="component" xsi:type="string">Robusta_CustomCheckout/js/view/step-place-order</item>
                                            <item name="sortOrder" xsi:type="string">3</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->
                                            </item>
                                        </item>



                                    </item>
                                </item><!-- checkout.steps -->

                            </item><!-- checkout.children -->
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

So to summarize, I need to move sidebar to steps.place-order-step

Best Answer

Currently I have the same problem. I think you need to change displayArea:

<item name="displayArea" xsi:type="string">myNewRegion</item>

Details (How to reposition components).