Magento – How to get and set data in checkout shipping address magento 2

magento-2.1magento2

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!

Best Answer

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);
    }
Related Topic