5

I have added custom drop down list into checkout shipping address like this:

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
            ['shippingAddress']['children']['shipping-address-fieldset']['children']['drop_down'] = [
                'component' => 'Magento_Ui/js/form/element/select',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/select',
                    'id' => 'drop-down',
                ],
                'dataScope' => 'shippingAddress.drop_down',
                'label' => 'Distrist',
                'provider' => 'checkoutProvider',
                'visible' => true,
                'validation' => [],
                'sortOrder' => 251,
                'id' => 'drop-down',
                'options' => [
                    [
                        'value' => '',
                        'label' => 'Please select'
                    ],
                    [
                        'value' => '1',
                        'label' => 'One'
                    ],
                    [
                        'value' => '2',
                        'label' => 'Two'
                    ],
                    [
                        'value' => '3',
                        'label' => 'Three'
                    ]
                ]
            ];

enter image description here

How can I get the value and data-title has been selected then set it in the city field?

Thank you!

6
  • Which table to save Distrist?
    – Bojjaiah
    Oct 2 '17 at 6:24
  • Hi there. I'm not save {Distrist} to table. Just a drop down list. I want get data for options has selected and set it in to City fields. Oct 2 '17 at 6:49
  • Post your full code, to look where you went wrong?
    – Bojjaiah
    Oct 2 '17 at 7:16
  • Hi. I just want when I select like this: link Oct 2 '17 at 7:29
  • refer ranasohel.me/2015/11/28/… link
    – Bojjaiah
    Oct 2 '17 at 8:40
3

I have resolved my problem like this:

Update class LayoutProcessor:

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['distrist'] = [
            'component' => 'Your_Module/js/form/element/select',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/select',
                'id' => 'distrist',
            ],
            'dataScope' => 'shippingAddress.distrist',
            'label' => 'Distrist',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => true,
            ],
            'sortOrder' => 251,
            'id' => 'distrist',
            'options' => [
                [
                    'value' => '',
                    'label' => 'Please Select',
                ],
                [
                    'value' => '1',
                    'label' => 'One',
                ],
                [
                    'value' => '2',
                    'label' => 'Two',
                ],
                [
                    'value' => '3',
                    'label' => 'Three',
                ]
            ]
        ];

After that, I create new select file with structure we have defined above.

Your_Module/js/form/element/select

We can copy "select.js" file from vendor to our folder:

\vendor\magento\module-ui\view\base\web\js\form\element\select.js

And then update the select.js like this

First thing, define the City and Postcode field:

...
return Abstract.extend({
    defaults: {
        customName: '${ $.parentName }.${ $.index }_input',
        elementTmpl: 'ui/form/element/select',
        modules: {
            city: '${ $.parentName }.city',
            postcode: '${ $.parentName }.postcode'
        }
    },
    ...

And check if the District has changed, we will update value for City and Postcode:

    updateCity: function (label) {
        if (this.value()) {
            this.city().value(label);
            this.city().disabled(true);
        } else {
            this.city().value('');
            this.city().disabled(false);
        }
    },
    updatePostcode: function ($value) {
        if (this.value()) {
            this.postcode().value($value);
            this.postcode().disabled(true);
        } else {
            this.postcode().value('');
            this.postcode().disabled(false);
        }
    },
    hasChanged: function () {
        var value = this.value();
        var parent = $('#co-shipping-form').find('[name$="distrist"]');
        var label = parent.find('option[value="'+value+'"]').attr('data-title');

        console.log('valiu: ' + label);

        this._super();
        this.updateCity(label);
        this.updatePostcode(value);
    }
1
  • can have you share in description with the full file and its path? Feb 1 '21 at 16:18

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.