How do I manage to make my City dropdown?

Hi,

Anyone tried their checkout page city dropdown?
I'm trying to make it dropdown but I think I need to create table for cities,
and another geo zones for cities according to region/state?

Anyone guide me?
Don't have budget for paid modules

Regards,
Gary

Don't have budget for paid modules

well, then better stay with, what you have. It's all about Money, when it comes to OC,
and OC could not even exist, if everything should come for free. And why should one be
supported, claiming in the open, that noone should possibly expect anything back...
I don't think, that you made a freeware Shop out of yours, just to please human kind!
---
But to your Problem, you would have to create a Database-Listing, containing ALL the Cities,
you plan to serve. Then, this DB-Listing would have to be 'handled' everywhere, where
an editable Address is part of. It would therefore take an OC-Pro and DB-Pro, and some hours of work,
to achieve such. And you would have to accept, that some Registration-related Extensions eventually would
no longer be able to work, before also beeing modified to 'handle' the new Address-Situation.

So, it's just not worth the task, at least, as I look at it, regardles of the financial aspect.
Good Luck !
Ernie

Thank you for your feedback sir,
I want to learn it, maybe some javascript will help me,
but in my case getting the value of region state dropdown confused me
how come:
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-<?php echo $type; ?>-zone"><?php echo $entry_zone; ?></label>
<div class="col-sm-10">

<select name="<?php echo $type; ?>_zone_id" id="input-<?php echo $type; ?>-zone" class="form-control" onchange="setCities2();">
</select>
</div>
</div>

<p>testzone:</p><p id = 'input-payment-zone1'></p>

JS:
function setCities2() {
document.getElementById("input-payment-zone1").innerHTML = document.getElementsByName("<?php echo $type; ?>_zone_id");
}

If you want to do it yourself, you can look into country/zone pair then. See, how they're saved and read from database and then displayed. It's not too hard to do, actually, if you know some coding. I'd say it's rather boring, than hard :-)

well, I just found out, that some (paid) Mods for this already exist !
---
Select City VQMOD
https://www.opencart.com/index.php?rout ... n_id=24445
---
Select City VQMOD (for AQC)
https://www.opencart.com/index.php?rout ... n_id=24679
---
Select City VQMOD (for Journal Theme)
https://www.opencart.com/index.php?rout ... n_id=28253
---
and there are some for older than v-2 Versions as well, just to mention it!
Ernie

IP_CAM wrote: ↑

Thu May 04, 2017 2:18 am

well, I just found out, that some (paid) Mods for this already exist !
---
Select City VQMOD
https://www.opencart.com/index.php?rout ... n_id=24445
---
Select City VQMOD (for AQC)
https://www.opencart.com/index.php?rout ... n_id=24679
---
Select City VQMOD (for Journal Theme)
https://www.opencart.com/index.php?rout ... n_id=28253
---
and there are some for older than v-2 Versions as well, just to mention it!
Ernie

Hi thank you for this,
Will try this out if I fail,
I'm trying to get city dropdown using javascript,
but geting the value of region/state confused me:
TPL file:
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-<?php echo $type; ?>-zone"><?php echo $entry_zone; ?></label>
<div class="col-sm-10">

<select name="<?php echo $type; ?>_zone_id" id="input-<?php echo $type; ?>-zone" class="form-control" onchange = "changeSelect();">
</select>
</div>
</div>

<div class="form-group required">
<label class="col-sm-2 control-label" for="input-<?php echo $type; ?>-city">Region tmp</label>
<p id = 'input-payment-zone1'>test</p>
</div>

JS:
$('form.form-<?php echo $type; ?> select[name=\'<?php echo $type; ?>_country_id\']').on('change', function(e, first) {
if (!this.value) return;
$.ajax({
url: 'index.php?route=checkout/checkout/country&country_id=' + this.value,
dataType: 'json',
beforeSend: function() {
$('form.form-<?php echo $type; ?> select[name=\'<?php echo $type; ?>_country_id\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>');
},
complete: function() {
$('.fa-spin').remove();
},
success: function(json) {
$('.fa-spin').remove();

if (json['postcode_required'] == '1') {
$('form.form-<?php echo $type; ?> input[name=\'<?php echo $type; ?>_postcode\']').parent().addClass('required');
} else {
$('form.form-<?php echo $type; ?> input[name=\'<?php echo $type; ?>_postcode\']').parent().removeClass('required');
}

html = '<option value=""><?php echo $text_select; ?></option>';

if (json['zone'] != '') {
for (i = 0; i < json['zone'].length; i++) {
html += '<option value="' + json['zone']['zone_id'] + '"';

if (json['zone']['zone_id'] == '<?php echo $zone_id; ?>') {
html += ' selected="selected"';
}

html += '>' + json['zone']['name'] + '</option>';
}
} else {
html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';
}

$('form.form-<?php echo $type; ?> select[name=\'<?php echo $type; ?>_zone_id\']').html(html);
document.getElementById("input-payment-zone1").innerHTML = document.getElementById("input-<?php echo $type; ?>-zone").value;
if (!first) {
$(document).trigger('journal_checkout_address_changed', '<?php echo $type; ?>');
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}).trigger('change', true);

I try to create a function onchange with the:
document.getElementById("input-payment-zone1").innerHTML = document.getElementById("input-<?php echo $type; ?>-zone").value;
But still getting the value of old data, I mean when I submit the form the value of zone_id shows
even I try to change still the same value.
For example my region/state is 'manila' its id is 4236 when I submit it
document.getElementById("input-payment-zone1").innerHTML = document.getElementById("input-<?php echo $type; ?>-zone").value;
output: 4236
even I change the dropdown still 4236 unless I submit it
Any advice?

For opencart 2.0 should work this, but you need to change city
https://www.opencart.com/index.php?rout ... n_id=23955