0

i want to convert city field from text to select or drop down. i have tried many ways but unable to implement it. I want to convert city text field to select and want to show custom city option how can i achieve this any help would be appreciated.

1 Answer 1

0

I am going to share the way i have achieved this task, it may help other.

di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="make_list_provider" xsi:type="object">vendor\module\Model\CheckoutDetailsProvider</item>
            </argument>
        </arguments>
    </type>
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="checkout_layout_processor_changecity" type="vendor\module\Plugin\Magento\Checkout\Block\Checkout\LayoutProcessor" sortOrder="10"/>
    </type>
</config>

vendor\module\Plugin\Magento\Checkout\Block\Checkout\LayoutProcessor.php

<?php
namespace vendor\module\Plugin\Magento\Checkout\Block\Checkout;

class LayoutProcessor
{
    /**
     * Process js Layout of block
     *
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['billingAddress']['children']['billing-address-fieldset']['children']['city'] = $this->getConfig();
        return $jsLayout;
    }

    /**
     * @return $field
     */
    private function getConfig()
    {
        $field = [
            'component' => 'vendor_module/js/city',
            'config' => [
                'customScope' => 'billingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/select',
                'id' => 'city'
            ],
            'label' => 'City',
            'value' => '',
            'dataScope' => 'billingAddress.city',
            'provider' => 'checkoutProvider',
            'sortOrder' => 80,
            'customEntry' => null,
            'visible' => true,
            'options' => [ ],
            'filterBy' => [
                'target' => '${ $.provider }:${ $.parentScope }.country_id',
                'field' => 'country_id'
            ],
            'validation' => [
                'required-entry' => true
            ],
            'id' => 'city'
        ];
        return $field;
    }
}

vendor_module/js/city

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @api
 */
 define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Checkout/js/model/default-post-code-resolver',
    'jquery',
    'mage/utils/wrapper',
    'mage/template',
    'mage/validation',
    'underscore',
    'Magento_Ui/js/form/element/abstract',
    'jquery/ui'
], function (_, registry, Select, defaultPostCodeResolver, $) {
    'use strict';

    return Select.extend({
        initialize: function () {
            this._super()
            this.update();
            return this;
        },
        /**
         * @param {String} value
         */
        update: function () {
            var options = window.checkoutConfig.cityData.cityOpt,
            cityOptions = [];
            $.each(options, function (index, cityOptionValue) {
                    var name = cityOptionValue.name;
                    var jsonObject = {
                        value: cityOptionValue.value,
                        title: cityOptionValue.label,
                        country_id: "PK",
                        label: cityOptionValue.label
                    };
                    cityOptions.push(jsonObject);
            });
            this.setOptions(cityOptions);
        }
    });
});

vendor\module\Model\CheckoutDetailsProvider

<?php

namespace vendor\module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

/**
 * Class SampleConfigProvider
 */
class CheckoutDetailsProvider implements ConfigProviderInterface
{
    protected $helper;
    public function __construct(
        \vednor\module\Helper\Data $helper    
        ){
        $this->helper = $helper; 
    }

    /**
     * Retrieve assoc array of checkout configuration
     *
     * @return array
     */
    public function getConfig()
    { 
        return [
            'cityData' => [
                'cityOpt' => $this->helper->getCityOptions()
            ],
        ];
    }
}

vednor\module\Helper\Data $helper

<?php
namespace vendor\module\Helper;

class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
    public function __construct(
        \Magento\Framework\App\Helper\Context $context
    ){
        parent::__construct($context);
    }
   
    public function getCityOptions(){
         //Add your city list here
        $options = [
            '1' => [
                'value'=>'',
                'label'=>__('Please select a city.'),
            ],
            '2' => [
                'value'=>'Lahore',
                'label'=>__('Lahore'),
            ],
            '3' => [
                'value'=>'Karachi',
                'label'=>__('Karachi'),
            ]
        ];
        return $options;
    }
}

Helpful Links

1:Magento2-City-Dropdown GitHub repository

2:How can I change the City Name to Drop Down on Checkout Page. Magento 2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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