TransWikia.com

How to change City field to a dropdown in Checkout step Magento 2

Magento Asked by jacm365 on October 1, 2021

I tried multiple solutions found in here, but none seem to fit, the closest one was this one Magento 2 : How to change UI field(s) dynamically, here is my implementation of it:

MyModuleviewfrontendwebjsset-city-mixin.js

define([
'jquery',
'mage/utils/wrapper',
'mage/validation'], function ($, wrapper, validation) {
'use strict';
$(document).ready(function () {
    $(document).on('change', '[name="country_id"]', function() {
       //for country
       var region = $('select[name="region_id"]');
       changeCity(this, region);
    });

    $(document).on('change', '[name="region_id"]', function() {
       //for province or region
       var country = $('select[name="country_id"]');
       changeCity(country, this);
    });
});
function changeCity(country, region) {
    console.log("change city");
    var cityObject = $('[name="city"]');
    if ($(country).val() == 'CO') {
        console.log('Colombia');
        //send request with country and region and recieve json object
        var response = '[{"name": "Medellin", "code": "50011100"},{"name": "Cali", "code": "50011122"},{"name": "Bogota", "code": "50011133"}]';
        var cities = JSON.parse(response);
        if (cityObject.is('input')) {
            cityObject.replaceWith(function(){
                var select = $("<select>", {
                    html: $(this).html()
                });
                $.each(this.attributes, function(i, attribute){
                    select.attr(attribute.name, attribute.value);
                });
              return select;
            });
        } else {
            cityObject.empty();
        }

        if(cities != 'undefined' && cities.length > 0 ) {
            for( var i = 0; i < cities.length; i++ ) {
                cityObject.append("<option value="+cities[i].code+">"+cities[i]. name+"</option>");
            }
        }
    } else {
        if (cityObject.is('select')) {
            cityObject.replaceWith(function(){
                var select = $("<input>", {
                    html: $(this).html()
                });
                $.each(this.attributes, function(i, attribute){
                    select.attr(attribute.name, attribute.value);
                });
              return select;
            });
        }
    }
}

return function (setShippingInformationAction) {
    return wrapper.wrap(setShippingInformationAction, function (originalAction) {

        return originalAction();
    });
}
});

MyModuleviewfrontendrequirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                'Tcc_Shipping/js/set-city-mixin': true
             }
        }
    }
};

The result is what I expected to be, but the validation for that field stops working:
Validation error

Any working alternative would be appreciated too, since what I need is to have a city dropdown with custom codes as values for them.

3 Answers

You can copy the region.js file and modify it for city as city.js.
And change the city component to change the field type to Select and component type that points to new city.js file.

REFER - https://www.magepsycho.com/magento2-region-city-dropdown-manager.html

Answered by MagePsycho on October 1, 2021

read this tutorial https://mage2.pro/t/topic/1293

run below code after select city drop-down

var address = checkoutData.getShippingAddressFromData();

address.city = $("#city :selected").text();

checkoutData.setShippingAddressFromData(address);

Answered by kanishka maduranga on October 1, 2021

You can use this module, very useful https://github.com/EaDesgin/Magento2-City-Dropdown

i just had to change this view/frontend/web/js/form/element/city.js

line 38

romania = obj.RO,

for this obj.CO just that or if you want to put it dynamically

const countryCode = jQuery("select[name='country_id']").val();
romania = (obj[countryCode] !== undefined)? obj[countryCode] : obj.CO

Answered by Davin anaya on October 1, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP