How to add a custom input select field under shipping method in checkout page in magento 2?
asked Feb 21, 2019 at 12:30
Add a comment
|
1 Answer
Try this,
In 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="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="delivery_date" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/customjs</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
then in vendor/module/view/frontend/web/js/view/customjs.js
define([
'jquery',
'ko',
'uiComponent'], function ($, ko, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Module/customtemp'
},
initialize: function () {
this._super();
return this;
},
});});
and in vendor/module/view/frontend/web/template/customtemp.html
<div class="step-title" data-role="title" data-bind="i18n: 'Custom Field'">Custom Field</div><div class="control">
<input class="input-text" type="text" data-bind="picker: true" name="custom_data_field" readonly="false"
/></div> <!-- ko --><span class="custom_field" data-bind="text: custom_field" /><!-- /ko -->
answered Feb 21, 2019 at 12:57
