How to change City field to a dropdown in Checkout step Magento 2Magento 2 : How to change UI field(s)...
Does the US political system, in principle, allow for a no-party system?
Is it a Cyclops number? "Nobody" knows!
Understanding a proof about a set being closed
Rationale to prefer local variables over instance variables?
Movie: boy escapes the real world and goes to a fantasy world with big furry trolls
Why aren't there more Gauls like Obelix?
I reported the illegal activity of my boss to his boss. My boss found out. Now I am being punished. What should I do?
Solving Linear Matrix Recurrences
What is the generally accepted pronunciation of “topoi”?
Is it safe to abruplty remove arduino power
Help! My Character is too much for her story!
How many words do visual novels contain on average per hour of gameplay?
Do similar matrices have same characteristic equations?
Does "Until when" sound natural for native speakers?
How do spaceships determine each other's mass in space?
Why restrict private health insurance?
What is better: yes / no radio, or simple checkbox?
Why is there an extra space when I type "ls" in the Desktop directory?
Why is a very small peak with larger m/z not considered to be the molecular ion?
Numerical value of Determinant far from what it is supposed to be
How is it possible to drive VGA displays at such high pixel clock frequencies?
What is the purpose of a disclaimer like "this is not legal advice"?
Is divide-by-zero a security vulnerability?
Do Paladin Auras of Differing Oaths Stack?
How to change City field to a dropdown in Checkout step Magento 2
Magento 2 : How to change UI field(s) dynamicallyCity dropdown at checkout magento 2How to create autocomplete for city field(checkout form) Magento2?Magento 2 City field not required on checkoutMagento 2 Add new field to Magento_User admin formMake dropdown list for field city in magento 2 checkoutMagento 2 : How to change UI field(s) dynamicallyMake City as dropdown list checkoutChange Magento 2 Paypal Logo on Checkout Step 2how to add city dropdown on checkout page instead of typing the city(M2)How to make city as Dropdown in checkout pages
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:
Any working alternative would be appreciated too, since what I need is to have a city dropdown with custom codes as values for them.
magento2 magento2.2
asked Aug 5 '18 at 18:33
jacm365jacm365
161
bumped to the homepage by Community♦ 1 min ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
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:
Any working alternative would be appreciated too, since what I need is to have a city dropdown with custom codes as values for them.
magento2 magento2.2
asked Aug 5 '18 at 18:33
jacm365jacm365
161
bumped to the homepage by Community♦ 1 min ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
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:
Any working alternative would be appreciated too, since what I need is to have a city dropdown with custom codes as values for them.
magento2 magento2.2
asked Aug 5 '18 at 18:33
jacm365jacm365
161
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:
Any working alternative would be appreciated too, since what I need is to have a city dropdown with custom codes as values for them.
magento2 magento2.2
magento2 magento2.2
asked Aug 5 '18 at 18:33
jacm365jacm365
161
asked Aug 5 '18 at 18:33
jacm365jacm365
161
asked Aug 5 '18 at 18:33
jacm365jacm365
161
asked Aug 5 '18 at 18:33
jacm365jacm365
161
asked Aug 5 '18 at 18:33
jacm365jacm365
161
161
bumped to the homepage by Community♦ 1 min ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 1 min ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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 Nov 3 '18 at 20:17
davindavin
516
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f237219%2fhow-to-change-city-field-to-a-dropdown-in-checkout-step-magento-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 Nov 3 '18 at 20:17
davindavin
516
add a comment |
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 Nov 3 '18 at 20:17
davindavin
516
add a comment |
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 Nov 3 '18 at 20:17
davindavin
516
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 Nov 3 '18 at 20:17
davindavin
516
answered Nov 3 '18 at 20:17
davindavin
516
answered Nov 3 '18 at 20:17
davindavin
516
answered Nov 3 '18 at 20:17
davindavin
516
516
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f237219%2fhow-to-change-city-field-to-a-dropdown-in-checkout-step-magento-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
