Checkout Shipping Step page, You can display the input field between shipping address and shipping methods.
Magento 2, To display the Input field before shipping methods, you need to create a checkout_index_index.xml file to set the content of the file.
1) Use the “before-form” section of the shippingAddress children in the shipping step hierarchies. We want to display the shipping text area to add specific comments on the shipping step.
Path:
app/code/Jesadiya/ShippingComment/view/frontend/layout/checkout_index_index.xml
<?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">
<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">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="before-form" xsi:type="array">
<item name="children" xsi:type="array">
<item name="comments" xsi:type="array">
<item name="component" xsi:type="string">Jesadiya_ShippingComment/js/view/shipping/shipping-comment</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
We have declared component as Jesadiya_ShippingComment/js/view/shipping/shipping-comment in the item tag in the given XML file.
2) Create a file to display comment text area using JS,
Path: app/code/Jesadiya/ShippingComment/view/frontend/web/js/view/shipping/comment.js
define([
'ko',
'uiComponent'
], function (ko, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Jesadiya_ShippingComment/shipping/comment'
}
});
});
3) Create a .html template file to display content,
Path: app/code/Jesadiya/ShippingComment/view/frontend/web/template/shipping/comment.html
<div class="comment-section">
<div class="step-title">
<span><!-- ko i18n: 'Delivery Instructions:'--><!-- /ko --></span>
</div>
<form id="special-comments-form" class="form comments" data-role="special-comments-form">
<fieldset class="fieldset special-comments">
<div class="field field-special-comments required">
<label for="comments" class="label">
<span class="label"><!-- ko i18n: 'Comments'--><!-- /ko --></span>
</label>
<div class="control">
<textarea id="comments"
class="input-text"
rows="5" cols="10"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
4) Now run the CLI command,
php bin/magento setup:upgrade php bin/magento cache:flush
Check the result, By Adding Items to the cart, go to the checkout page, you can see new text area field will be displayed before the shipping methods.