4

This is my current checkout page: enter image description here

I want to move Order Summary area above Shipping Address. I try to add this code

<move element="sidebar" destination="steps" before="shipping-step"/>

in checkout_index_index.xml but it doesn't work. Is there any way I can do to move the summary area?

1
  • Have you applied below solution? – Suresh Chikani Aug 28 '17 at 13:20
6

You can display sidebar block just before Shipping Address.

Add below code to

app/design/frontend/Vendor/YourTheme/Magento_Checkout/layout/checkout_index_index.xml

<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="summary" xsi:type="array">
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
                                                <!--<item name="displayArea" xsi:type="string">summary</item>-->
                                                <item name="sortOrder" xsi:type="string">0</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="template" xsi:type="string">Magento_Checkout/summary</item>
                                                </item>
                                                <item name="children" xsi:type="array">
                                                    <item name="totals" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item>
                                                        <item name="displayArea" xsi:type="string">totals</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="template" xsi:type="string">Magento_Checkout/summary/totals</item>
                                                        </item>
                                                        <item name="children" xsi:type="array">
                                                            <!-- sort order for this totals is configured on admin panel-->
                                                            <!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order -->
                                                            <item name="subtotal" xsi:type="array">
                                                                <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="title" xsi:type="string" translate="true">Cart Subtotal</item>
                                                                </item>
                                                            </item>
                                                            <item name="shipping" xsi:type="array">
                                                                <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="title" xsi:type="string" translate="true">Shipping</item>
                                                                    <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
                                                                </item>
                                                            </item>
                                                            <item name="grand-total" xsi:type="array">
                                                                <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="title" xsi:type="string" translate="true">Order Total</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                    <item name="itemsBefore" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="children" xsi:type="array">
                                                            <!-- merge your components here -->
                                                        </item>
                                                    </item>
                                                    <item name="cart_items" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="details" xsi:type="array">
                                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="thumbnail" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                                                        <item name="displayArea" xsi:type="string">before_details</item>
                                                                    </item>
                                                                    <item name="subtotal" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                                                        <item name="displayArea" xsi:type="string">after_details</item>
                                                                    </item>
                                                                </item>
                                                            </item>

                                                        </item>
                                                    </item>
                                                    <item name="itemsAfter" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="children" xsi:type="array">
                                                            <!-- merge your components here -->
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                    <item name="sidebar" xsi:type="array">
                                        <item name="config" xsi:type="array">
                                            <item name="componentDisabled" xsi:type="boolean">true</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>

Apply and check it from your end.

1
  • Accept my answer if really solve your problem. – Suresh Chikani Aug 29 '17 at 9:04

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.