0

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>
6

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

  • 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 '16 at 20:28
  • under what xml parent did you place it? could you paste the complete xml, thx – Florin P. May 11 '17 at 14:31
  • How to move tax in order summary beofre show order total – Rv Singh Nov 30 '18 at 7:19
0

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>

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.