On the checkout_index_index.xml
<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=”additional_block” xsi:type=”array”>
<item name=”component” xsi:type=”string”>JJ_Checkoutupdate/js/view/custom-field</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
web->template folder (custom-field.html)
<div class=”form-shipping-addres”>
<div class=”field memo” style=”padding-bottom: 20px; font-size:16px;”>
<label class=”label” for=”memo”>
<span>Memo</span>
</label>
<div class=”control”>
<input type=”text” class=”input-text” id=”memo” name=”memo” data-bind=”value: memo”style=”height: 48px; background: #fff;” />
</div>
</div>
<div class=”field spiff-person” style=”padding-bottom: 20px;”>
<label class=”label” for=”spiff_person” style=”font-size:16px;”>
<span>Spiff Person</span>
</label>
<div class=”control”>
<input type=”text” class=”input-text” id=”spiff-person” name=”spiff_person” data-bind=”value: spiff_person” style=”height: 48px; background: #fff;”/>
</div>
</div>
<div class=”field ship-from-warehouse” style=”padding-bottom: 20px;”>
<label class=”label” for=”ship_from_warehouse” style=”font-size:16px;” >
<span>Ship From Warehouse</span>
</label>
<div class=”control”>
<select class=”input-text” id=”spiff-person” name=”ship_from_warehouse” style=”height: 48px; background: #fff; font-size:14px;”/>
<option value=””> Please Select a Ware house </option>
<option value=”columbusohio”> Columbus, Ohio </option>
<option value=”hialeahgardens”> Hialeah Gardens, Florida </option>
<option value=”irvingdallas”> Irving, Texas </option>
</select>
</div>
</div>
<div class=”field ship_date” style=”padding-bottom: 20px;”>
<label class=”label” for=”ship_date” style=”font-size:14px;”>
<span>Ship Date</span>
</label>
<div class=”control”>
<input type=”date” class=”input-text” id=”spiff-person” name=”ship_date” data-bind=”value: ship_date” style=”height: 48px; background: #fff;” />
</div>
</div>
</div>
web->js folder (custom-field.js)
define(
[
‘uiComponent’,
‘Magento_Checkout/js/model/quote’
],
function (Component, quote) {
‘use strict’;
return Component.extend({
defaults: {
template: ‘JJ_Checkoutupdate/custom-field’
},
initObservable: function () {
this._super()
.observe(‘memo’);
return this;
},
/**
* Send value to the quote
*/
getMemo: function () {
console.log(‘getMemoValue’);
console.log(this.memo());
return this.memo();
},
/**
* Send value to the quote
*/
setMemo: function (value) {
console.log(‘setMemoValue’);
console.log(value);
this.memo(value);
},
// /**
// * Send value to the quote
// */
// getShipFromWarehouseValue: function () {
// return this.shipFromWarehouse();
// },
// /**
// * Send value to the quote
// */
// setShipFromWarehouseValue: function (value) {
// this.shipFromWarehouse(value);
// },
// /**
// * Send value to the quote
// */
// getShipDate: function () {
// return this.shipDate();
// },
// /**
// * Send value to the quote
// */
// setShipDateValue: function (value) {
// this.shipDate(value);
// },
// /**
// * Send value to the quote
// */
// getSpiffPerson: function () {
// return this.spiffPerson();
// },
// /**
// * Send value to the quote
// */
// setSpiffPerson: function (value) {
// this.spiffPerson(value);
// },
});
}
);