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

  • can you add any images or the code that you want to achieve or you are trying respectively – ABHISHEK TRIPATHI Apr 2 at 9:58
  • you want to move cart page summery ? – Hassan Ali Shahzad Apr 2 at 10:00
  • @Hassan yes, i have attached the screenshot. – i_ali55 Apr 2 at 10:04
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

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.