1

I want to move the checkout sidebar with in left side of the FORM div in my custom theme.

the sidebar of checkout, where the summary of the products is rendered through KO Template.

I actually want to move both form and sidebar summary in main container of

<div class="row">

is there any way which i can do the accomplish this?

http://prntscr.com/n6bqnn

3
  • can you add any images or the code that you want to achieve or you are trying respectively Apr 2, 2019 at 9:58
  • you want to move cart page summery ? Apr 2, 2019 at 10:00
  • @Hassan yes, i have attached the screenshot.
    – sudo55
    Apr 2, 2019 at 10:04

1 Answer 1

0

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>

You have to override checkout_index_index file & if you just compare both files just removed entries which appear on side bar and add them to new desired position under shipping address:

enter image description here

5

Your Answer

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

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