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.
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:
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.
You have to add the css for the block as it has been moved from its initial position. Thanks!