3

I would like to move the Cart to be above the Totals in the Order Summary Checkout Sidebar. I have located both the Totals and Cart xml items in the checkout_index_index.xml in the Magento checkout module. I have created my own checkout_index_index.xml file within my module, but not sure how to re-order the items within a block.

checkout_index_index.xml snippet from Checkout module in Magento:

<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>
Improve this question

2 Answers 2

Reset to default
10

I realized since it is not a component or block I cannot use the <move> or after= to move cart_items. So instead I used the sortOrder and set it to 0. That way it will always be before any other item in the summary block.

Modified snippet from checkout_index_index.xml:

<item name="sidebar" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="shipping-information" xsi:type="array">
            <item name="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/shipping-information</item>
        </item>
        <item name="summary" xsi:type="array">
            <item name="children" xsi:type="array">
                <item name="cart_items" xsi:type="array">
                    <item name="sortOrder" xsi:type="string">0</item>
                    <item name="children" xsi:type="array">
                        <item name="details" xsi:type="array">
                            <item name="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/summary/item/details</item>
                        </item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

After that I ran php bin:magento setup:upgrade command, refreshed the page and cart_items appeared before totals.

Here is a before:

enter image description here

Here is an after:

enter image description here

Improve this answer
3
  • I tried your solution to move the "Sign In" link at the top right in checkout but it didn't work. Could you help? I opened a question in case you know how to do it. magento.stackexchange.com/questions/150355/…
    – Luis Garcia
    Dec 14, 2016 at 20:28
  • under what xml parent did you place it? could you paste the complete xml, thx
    – Florin P.
    May 11, 2017 at 14:31
  • How to move tax in order summary beofre show order total
    – Rv Singh
    Nov 30, 2018 at 7:19
3

To modify just the sort order setting for the cart items you can add this crazy tree to your theme's Magento_Checkout/layout/checkout_index_index.xml file:

<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="cart_items" xsi:type="array">
                                            <item name="sortOrder" xsi:type="string">0</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>
Improve this answer

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.