7

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

Improve this question
2
  • Did you try removing the sidebar and setting it as children of place-order-steps?
    – Raphael at Digital Pianism
    Commented Mar 20, 2016 at 12:52
  • 2
    Yes. I removed the whole sidebar. Copied the summary from the original checkout_index_index.xml in the the children of place-order-step but it didn't show in the checkout page.
    – Hamo
    Commented Mar 20, 2016 at 12:57

1 Answer 1

Reset to default
1

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).

Improve this answer

Your Answer

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

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