checkoutlayoutmagento2uicomponent
How do I move the "Ship to:" and "Shipping Method:" sections from the order summary sidebar into the "Review & Payments" step of the checkout in Magento 2?
I know that as they are UI Components I'm not able to use <move element="" /> as I would with a normal block.
Below i have add some step. please follow step
1.Create your checkout_index_index.xml file in layout folder
app/code/VendorName/PlaceOrder/view/frontend/layout
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="VendorName_PlaceOrder::css/place_order_button.css"/>
</head>
<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="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="component" xsi:type="string">VendorName_PlaceOrder/js/view/newstep</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">VendorName_PlaceOrder/newstep</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
2.Create a file newstep.html in template
app/code/VendorName/PlaceOrder/view/frontend/web/template
<div class="opc-block-newstep" data-bind="blockLoader: isLoading">
<span data-bind="i18n: 'Order newstep'" class="title"></span>
<!-- ko foreach: elems() -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (isVisible()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
<button type="button" class="button action primary" id="place-order-trigger" value="Place Order" >
<span>Place Order</span>
</button>
</div>
<!-- /ko -->
app/code/VendorName/PlaceOrder/view/frontend/web/js/view
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/newstep',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
) {
'use strict';
return Component.extend({
isVisible: function () {
return stepNavigator.isProcessed('shipping');
},
initialize: function () {
$(function() {
$('body').on("click", '#place-order-trigger', function () {
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
});
});
var self = this;
this._super();
}
});
}
);
4.For Add terms & condition checkbox in checkout_index_index.xml :
<?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="children" xsi:type="array">
<item name="newstep" xsi:type="array">
<item name="children" xsi:type="array">
<item name="agreements" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="displayArea" xsi:type="string">before-place-order</item>
<item name="dataScope" xsi:type="string">checkoutAgreements</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
</item>
<item name="agreements-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Summary section created on checkout-module.
You can change checkout_index_index.xml, add item as 'quote' & create js for
Magento_Checkout/js/view/summary/quote
Path - \vendor\magento\module-checkout\view\frontend\layout\checkout_index_index.xml
<item name="quote" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/quote</item>
<item name="config" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Quote</item>
</item>
</item>
\vendor\magento\module-checkout\view\frontend\web\js\view\summary
Also create template file in below path. vendor\magento\module-checkout\view\frontend\web\template\summary
You can override this file on you custom extension or update core files (Not recommended). This might not be exact answer but might be workaround to you. Hope this help you.
Best Answer
Both sections are contained in the
shipping-information<item>.Within my theme's
checkout_index_index.xmlfile I was able to disable the component in the summary sidebar, and add it to thebilling-stepitem, which represents the "Review & Payments" step in checkout.I wanted it to appear at the top of this step above the payment method options so I also added the line
<item name="sortOrder" xsi:type="string">0</item>.My final code to achieve this: