3

Currently, the Summary on the Checkout page displays the totals at the top of the summary and the cart items beneath it. I would like it the other way around – to place the cart items at the top of the summary sidebar and the totals beneath.

If I rearrange the summary child items totals and cart_items in Magento_2_Installation/vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml, then the items are reaaranged how I'd like them (items above totals).

Obviously, updating the core files isn't the correct way to do it. So, I created another checkout_index_index.xml and placed it here: Magento_2_Installation/app/design/frontend/mike/mikesite/Magento_Checkout/layout/checkout_index_index.xml. Unfortunately, this doesn't rearrange the child items of Summary and has no effect at all.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">

                                                <!-- <item name="totals" /> was here originally -->

                                                <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 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>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </referenceContainer>
</body>

  • Are you able to rearrange them ? – Bhupendra Jadeja Jul 18 '16 at 7:05
  • It works if I do it in the core files. – MikeMason Jul 18 '16 at 7:06
12

In my theme override of app/design/frontend/<Vendorname>/<theme>/Magento_Checkout/layout/checkout_index_index.xml I used sort order to rearrange the child items, where a lower number (starting from 0) indicates a child should appear earlier in the sequence. This code moved the totals below the items for me:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="totals" xsi:type="array">
                                                    <item name="sortOrder" xsi:type="string">99</item>
                                                </item>
                                                <item name="cart_items" xsi:type="array">
                                                    <item name="sortOrder" xsi:type="string">0</item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
2

Put this code in checkout_cart_index.xml, it moves the cart summary below the items (tested with Magento 2.1.2):

<move element="cart.summary" destination="checkout.cart.items" after="checkout.cart.form"/>
1

You can control the position using sortOrder. Refer to this article to understand the concept : https://inviqa.com/blog/technical-guide-magento-2-checkout

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.