Magento – how to add city dropdown on checkout page instead of typing the city(M2)

checkoutcustomer-attributemagento2module

I need to get rid of this company text field and Country drop down since the store serves locally.

Important :
How I can overide the city (text area) to a drop down with my own custom city list.?

Best Answer

Extension1: you can install this free extension for display city

visit this link for how to install composer require php-cuong/magento2-city-dropdown

For more details how to set up check this link

Extension2: https://github.com/EaDesgin/Magento2-City-Dropdown

Related Solutions

Set Default Value of City and State in Checkout Page – Magento 2.0.1

Here is way to set value & make field readonly(disabled)

Override vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml to app/design/frontend/package/themename/Magento_Checkout/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <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="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="company" xsi:type="array">
                                                                    <item name="visible" xsi:type="boolean">false</item>
                                                                </item>
                                                                <item name="city" xsi:type="array">
                                                                    <item name="disabled" xsi:type="string">disabled</item>
                                                                    <item name="value" xsi:type="string">Value</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

In above file i added,

<item name="company" xsi:type="array">
    <item name="visible" xsi:type="boolean">false</item>
</item>
<item name="city" xsi:type="array">
    <item name="disabled" xsi:type="string">disabled</item>
    <item name="value" xsi:type="string">value</item>
</item>

Then Override, \Magento\Checkout\Block\Checkout\AttributeMerger to Namespace\Modulename\Block\Checkout\AttributeMerger

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Namespace\Modulename\Block\Checkout;

class AttributeMerger extends \Magento\Checkout\Block\Checkout\AttributeMerger
{
    public function __construct(
        \Magento\Customer\Helper\Address $addressHelper,
        \Magento\Customer\Model\Session $customerSession,
        \Magento\Customer\Api\CustomerRepositoryInterface $customerRepository,
        \Magento\Directory\Helper\Data $directoryHelper
    ) {
        parent::__construct(
            $addressHelper,           
            $customerSession,
            $customerRepository,
            $directoryHelper
        );
    }

    /**
     * Retrieve UI field configuration for given attribute
     *
     * @param string $attributeCode
     * @param array $attributeConfig
     * @param array $additionalConfig field configuration provided via layout XML
     * @param string $providerName name of the storage container used by UI component
     * @param string $dataScopePrefix
     * @return array
     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
     * @SuppressWarnings(PHPMD.NPathComplexity)
     */
    protected function getFieldConfig(
        $attributeCode,
        array $attributeConfig,
        array $additionalConfig,
        $providerName,
        $dataScopePrefix
    ) {
        // street attribute is unique in terms of configuration, so it has its own configuration builder
        if (isset($attributeConfig['validation']['input_validation'])) {
            $validationRule = $attributeConfig['validation']['input_validation'];
            $attributeConfig['validation'][$this->inputValidationMap[$validationRule]] = true;
            unset($attributeConfig['validation']['input_validation']);
        }

        if ($attributeConfig['formElement'] == 'multiline') {
            return $this->getMultilineFieldConfig($attributeCode, $attributeConfig, $providerName, $dataScopePrefix);
        }

        $uiComponent = isset($this->formElementMap[$attributeConfig['formElement']])
            ? $this->formElementMap[$attributeConfig['formElement']]
            : 'Magento_Ui/js/form/element/abstract';
        $elementTemplate = isset($this->templateMap[$attributeConfig['formElement']])
            ? 'ui/form/element/' . $this->templateMap[$attributeConfig['formElement']]
            : 'ui/form/element/' . $attributeConfig['formElement'];

        $element = [
            'component' => isset($additionalConfig['component']) ? $additionalConfig['component'] : $uiComponent,
            'config' => [
                // customScope is used to group elements within a single form (e.g. they can be validated separately)
                'customScope' => $dataScopePrefix,
                'customEntry' => isset($additionalConfig['config']['customEntry'])
                    ? $additionalConfig['config']['customEntry']
                    : null,
                'template' => 'ui/form/field',
                'elementTmpl' => isset($additionalConfig['config']['elementTmpl'])
                    ? $additionalConfig['config']['elementTmpl']
                    : $elementTemplate,
                'tooltip' => isset($additionalConfig['config']['tooltip'])
                    ? $additionalConfig['config']['tooltip']
                    : null
            ],
            'dataScope' => $dataScopePrefix . '.' . $attributeCode,
            'label' => $attributeConfig['label'],
            'provider' => $providerName,
            'sortOrder' => isset($additionalConfig['sortOrder'])
                ? $additionalConfig['sortOrder']
                : $attributeConfig['sortOrder'],
            'validation' => $this->mergeConfigurationNode('validation', $additionalConfig, $attributeConfig),
            'options' => $this->getFieldOptions($attributeCode, $attributeConfig),
            'filterBy' => isset($additionalConfig['filterBy']) ? $additionalConfig['filterBy'] : null,
            'customEntry' => isset($additionalConfig['customEntry']) ? $additionalConfig['customEntry'] : null,
            'visible' => isset($additionalConfig['visible']) ? $additionalConfig['visible'] : true,
        ];

        if (isset($additionalConfig['disabled']) && $additionalConfig['disabled'] != null) {
             $element['disabled'] = "disabled";
        }

        if (isset($additionalConfig['value']) && $additionalConfig['value'] != null) {
             $element['value'] = "";
        }

        if (isset($attributeConfig['value']) && $attributeConfig['value'] != null) {
            $element['value'] = $attributeConfig['value'];
        } elseif (isset($attributeConfig['default']) && $attributeConfig['default'] != null) {
            $element['value'] = $attributeConfig['default'];
        } else {
            $defaultValue = $this->getDefaultValue($attributeCode);
            if (null !== $defaultValue) {
                $element['value'] = $defaultValue;
            }

        }

        return $element;
    }

    /**
     * @param string $attributeCode
     * @return null|string
     */
    protected function getDefaultValue($attributeCode)
    {
        switch ($attributeCode) {
            case 'firstname':
                if ($this->getCustomer()) {
                    return $this->getCustomer()->getFirstname();
                }
                break;
            case 'lastname':
                if ($this->getCustomer()) {
                    return $this->getCustomer()->getLastname();
                }
                break;
            case 'country_id':
                return $this->directoryHelper->getDefaultCountry();
                break;
            case 'city':
                if ($this->getCustomer()) {
                    return "return your value"
                }
        }
        return null;
    }


}

In Above file i added below code in function getFieldConfig

if (isset($additionalConfig['disabled']) && $additionalConfig['disabled'] != null) {
    $element['disabled'] = "disabled";
}

And added below code in function getDefaultValue


case 'city':
    if ($this->getCustomer()) {
         return "return your value";
    }

Thanks !!

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

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

Best Answer

Related Solutions

Set Default Value of City and State in Checkout Page – Magento 2.0.1

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

Related Topic