How to Move Element to Main Content from Sidebar in Magento2 Checkout Custom Tab

magento2sidebar

Want to move element to the main container tab

How can I move this element from sidebar to the custom tab in Magento 2 on checkout page? 

<li id="step_code" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Shipping Information'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">


        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary nextBtn">
                        <span translate="'Continue to Payment'" />
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

Best Answer

If you followed this tutorial to create new checkout step, so you can continue like these files below

Layout file checkout_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <!-- The new step you add -->
                                        <item name="shipping-detail" xsi:type="array">
                                            <item name="component" xsi:type="string">Walish_StackFarm/js/view/shipping-detail</item>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <!--Your shipping information content -->
                                                <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 name="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <!--Disable sidebar component-->
                                        <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>

Template file view/frontend/web/template/shipping-detail.html

<li id="shipping_detail" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Shipping Detail'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <!--Put your shipping information block content here-->
            <div class="opc-block-shipping-information">
                <!-- ko foreach: getRegion('shipping-information') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
                <!--/ko-->
            </div>

            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

And result will be like this

enter image description here

Related Topic