0

how to switch positions of cart items & totals table, move cart items to the top and then totals table to the bottom

enter image description here

<!-- ko foreach: elems() -->
     <pre data-bind="text: ko.toJSON(getTemplate(), null, 2)"></pre>
    <!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->    

and how to debug "elems()" sequence?

Thanks

1

1.First override checkout_index_index.xml under your theme like Package/Theme/Magento_Checkout/layout.

<?xml version="1.0"?>
<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="sortOrder" xsi:type="string">50</item>
                                  <item name="component" xsi:type="string">Magento_Checkout/js/view/sidebar</item>
                                  <item name="displayArea" xsi:type="string">sidebar</item>
                                  <item name="config" xsi:type="array">
                                      <item name="template" xsi:type="string">Magento_Checkout/sidebar</item>
                                      <item name="deps" xsi:type="array">
                                          <item name="0" xsi:type="string">checkout.steps</item>
                                      </item>
                                  </item>
                                  <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="config" xsi:type="array">
                                              <item name="template" xsi:type="string">Magento_Checkout/summary</item>
                                          </item>
                                          <item name="children" xsi:type="array">
                                              <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 name="shipping-information" xsi:type="array">
                                          <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information</item>
                                          <item name="config" xsi:type="array">
                                              <item name="deps" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
                                          </item>
                                          <item name="displayArea" xsi:type="string">shipping-information</item>
                                          <item name="children" xsi:type="array">
                                              <item name="ship-to" xsi:type="array">
                                                  <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item>
                                                  <item name="displayArea" xsi:type="string">ship-to</item>
                                              </item>
                                          </item>
                                      </item>
                                  </item>
                              </item>
                           </item>
                       </item>
                   </item>
               </argument>
           </arguments>
       </referenceBlock>
   </body>
</page>

Now check on your onepage checkout.See screen shot enter image description here

| improve this answer | |
0

i considered @Charul Tyagi as correct answer, but I have better answer, in checkout_index_index.xml use this xml at your theme

    <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>
| improve this answer | |

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.