6

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!

  • 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. – TriAnhHuynh 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 – TriAnhHuynh 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);
    }

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.