How to add province/state dropdown according to country select ?

How to add province/state dropdown according to country select ?

DSLR
Shopify Partner
29 0 8

Hello everyone,

 

I am creating a new form by using a liquid form tag and I need to add country list dropdown with province/state dropdown but I didn't found any tag in shopify liquid docs.

 

I found this one for country list .

<!-- Store ships only to Canada and the United Kingdom -->
<select name="country">
  {{ country_option_tags }}
</select>

 

Which code will I be use for province/state dropdown ?  if anyone know about that please help me to achieve this.

 

Thanks in advance !

 

Replies 3 (3)

kumodini77
Excursionist
16 1 4

looking for the same

Muttahhar
Shopify Partner
10 0 2

Hi,
I also didn't find any province selector provided by Shopify, but there already is a list of provinces (data-provinces) present for every country option created by the {{ country_option_tags }}. You can see the HTML output in the link below:

https://shopify.dev/api/liquid/objects#country_option_tags 

 

What I've done is add a change event listener to the country select (through javascript) and in the callback I populate my own simple province selector with options/values from the data-provinces attribute for the selected country option.

 

The only problem is that I also require the ISO codes for the provinces but the list only has province names.

 

@Shopify (not sure if this is the correct user tag) The data-provinces attribute is already in the key value format (sort of), with the province name as both key and value. So can you guys please replace either the key or value with the province ISO codes? Thanks.
And adding the country ISO code as a separate data attribute would also be very much appreciated.

Hany_Gadalla
Visitor
1 0 0

One solution is to use the Shopify UI Elements Generator (link below).

 

https://ui-elements-generator.myshopify.com/pages/line-item-property