I have added a custom field in shipping page using afterProcess plugin for LayoutProcessor

The code is as follows :

    ['shippingAddress']['children']['before-form']['children']['custom_shipping_field'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'customScope' => 'shippingAdditional',
            'template' => 'ui/form/field',
            'value'    => '',
            'elementTmpl' => 'Epicor_Comm/ui/form/element/input/inputlength',
            'id' => 'csf',
            'maxlength' => 255
        'dataScope' => 'shippingAdditional.custom_shipping_field',
        'label' => 'custom shipping field',
        'provider' => 'checkoutProvider',
        'visible' => true,
        'sortOrder' => 250,
        'id' => 'custom_shipping_field',

Now, I have added a custom field for one of the payment method.
The code is the html file is as follows:

<input type="text"
   data-validate='{"required": isRefMandatory()}'
   data-bind="css: getRefClass(), value: getRefValue(), visible: isRefVisible(), disable: isRefDisable(), required: isRefMandatory(), title: getRefTitle()" />

Now, I need to make refno field dependent on custom_shipping_field.
Basically, What should happen,

  1. If user has enter any value for custom_shipping_field, then that value should be copied to refno and refno should become read only.
  2. If user doesn't fill custom_shipping_field then refno should be empty and editable.
  3. Suppose if user enter any value for custom_shipping_field and goes to payment and then came back to shipping page and edit or remove value for custom_shipping_field then that should reflect for refno.

I know that I need to make both the fields ko observable to make them dependent. But I am not sure how to make custom_shipping_field observable.

Or is there any other way to achieve this?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.