Menu Close

    Show shipping-information on top of sidebar on checkout page

    Sometime, according to the need of design we have to re-arrange the checkout sidebar elements. Let’s see how we can move the shipping-information section above in the cart summary listing on checkout page.

    Checkout page is a bit different than other layouts, the elements are defined as components. So, to move the shipping-information we need to follow two points:

    • First disable the old shipping-information component.
    • Add the new component in the right place to show at proper position.
    Screenshot-71-1

    You have to create checkout_index_index.xml file either in module or in theme and add the following content:

    The shipping-information will be visible at the top of the sidebar:

    <?xml version="1.0"?>
    <!--
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    -->
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <move element="shipping-information" destination="checkout.cart.container" after="checkout.cart.totals"/>
            <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">                                                 
                                                      <!-- show shipping info at the top of sidebar -->
                                                    <item name="shipping-information" xsi:type="array">
                                                        <item name="sortOrder" xsi:type="string">0</item>
                                                        <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>
                                                  <!-- disable shipping information section from siderbar -->
                                            <item name="shipping-information" xsi:type="array">
                                                <item name="config" xsi:type="array">
                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </body>
    </page>

    And here is the result:

    Start your headless eCommerce
    now.
    Read More
    Screenshot-70-1

    Similarly, to make the shipping-information show in between the total price details and the item list section, you just need to set the sortorder to 1, inside the shipping-information item.

    <item name="sortOrder" xsi:type="string">1</item>

    And here is the result.

    Screenshot-69-1

    You have to add the css for the block as it has been moved from its initial position. Thanks!

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top