State/Province Dropdown missing on Account>Add New Address - HELP!

Alex220
New Member
8 0 0

I hope you all had a wonderful New Years. 

On the page:

http://www.baciodivino.com/account/addresses

I'm encountering an issue that when a customer goes to add a new address, the country defaults to United States (which is correct) but there is no Province/State dropdown present.

I can get it to come up on an existing address when I edit, however. 

TO REPLICATE THE ISSUE....create a new account on our site here: http://www.baciodivino.com/account/login

Next, try to add a new address. You should notice that while the address correctly defaults to United States, no Province/State dropdown comes up. See below for a screenshow. 

Any ideas what is wrong here and how to fix?

 

Inline image 1

0 Likes
Benjamin_C
Shopify Staff
Shopify Staff
368 0 40

Hello Alex, Ben here - your Shopify Guru! 

  Your theme was not developed by Shopify so I am not entirely sure how it is put together. But after looking at the code it seems you have some styling applied to the edit address/add address provience form element in your customer/address.liquid file. You will want to try removing that, to do this click Online store, then Themes, then use the  [...]  button to the left of your blue customize theme button and select edit HTML/CSS. 

Now open the file customer/address.liquid and find line 51:

Remove style="display:none;width:100%;" save the file and you should now see the selection box for the province/state. If that does not work you may want to contact your theme developer at http://krownthemes.com/shopify-support-contact/

 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

Alex220
New Member
8 0 0

First off, thanks for the help and very easy to follow directions.

I did manage to find that modification but it wasn't exactly in the same place you noted and there seemed to be a few different instances of it. I've pasted the code as I see it for the customers/addresses.liquid file below to see if you might be able to offer further help. 

I tried removing all of the instances but it didn't quite work -- it just screwed up the formatting. Can you have a look at the code below and let me know if you see what I should change? 

I've also contacted the theme developer and am waiting to hear back, but since you were helpful I figured I'd follow up with you and see if we can see this through to completion.

Cheers!

-a

{% layout settings.customer_layout %}

<div id="page-content" class="clearfix">

	<header class="page-title">
		<h1 class="title">{{ 'customers.addresses_page.title' | t }}</h1>
		<span class="subtitle">{{ 'customers.addresses_page.subtitle' | t }}</span>
    	{% if shop.customer_accounts_enabled and customer %}
			<a class="button dark" href="/account/logout">{{ 'customers.login_page.form_logout_button' | t }}</a>
		{% endif %}
	</header>

	{% paginate customer.addresses by 5 %}

		{% for address in customer.addresses %}

			<strong>
				{{ address.first_name | capitalize }} {{address.last_name | capitalize }}
				{% if address == customer.default_address %}<em>(default)</em>{% endif %}
			</strong>

			<p>
				{{ address.company }}<br>
				{{ address.street }}<br>
				{{ address.city | capitalize }}<br>
				{% if address.province_code %}
				{{ address.province_code | upcase }}<br>
				{% endif %}
				{{ address.zip | upcase }}<br>
				{{ address.country }}<br>
				{{ address.phone }}
			</p>
			<p>
				{{ 'customers.addresses_page.edit_address_link' | t | edit_customer_address_link: address.id }} |
				{{ 'customers.addresses_page.delete_address_link' | t | delete_customer_address_link: address.id }}
			</p>

			<div id="edit_address_{{address.id}}" style="display:none;">

				{% form 'customer_address', address %}

					<h2><br />{{ 'customers.addresses_page.edit_address_title' | t }} |</h2>

					<div class="grid">

					<div class="krown-column-container span6 first">
						<label for="address_first_name_{{form.id}}">{{ 'customers.addresses_page.form.first_name_label' | t }}</label>
						<input type="text" id="address_first_name_{{form.id}}" class="address_form" name="address[first_name]" value="{{form.first_name}}" autocapitalize="words">
					</div>

					<div class="krown-column-container span6">
						<label for="address_last_name_{{form.id}}">{{ 'customers.addresses_page.form.last_name_label' | t }}</label>
						<input type="text" id="address_last_name_{{form.id}}" class="address_form" name="address[last_name]" value="{{form.last_name}}" autocapitalize="words">
					</div>

					</div>

					<label for="address_company_{{form.id}}">{{ 'customers.addresses_page.form.company_label' | t }}</label>
					<input type="text" id="address_company_{{form.id}}" class="address_form" name="address[company]" value="{{form.company}}" autocapitalize="words">

					<label for="address_address1_{{form.id}}">{{ 'customers.addresses_page.form.address_1_label' | t }}</label>
					<input type="text" id="address_address1_{{form.id}}" class="address_form" name="address[address1]" value="{{form.address1}}" autocapitalize="words">

					<label for="address_address2_{{form.id}}">{{ 'customers.addresses_page.form.address_2_label' | t }}</label>
					<input type="text" id="address_address2_{{form.id}}" class="address_form" name="address[address2]" value="{{form.address2}}" autocapitalize="words">

					<label for="address_city_{{form.id}}">{{ 'customers.addresses_page.form.city_label' | t }}</label>
					<input type="text" id="address_city_{{form.id}}" class="address_form" name="address[city]" value="{{form.city}}" autocapitalize="words">

					<label for="address_country_{{form.id}}">{{ 'customers.addresses_page.form.country_label' | t }}</label>
					<select id="address_country_{{form.id}}" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>

					<div id="address_province_container_{{form.id}}" style="display:none;width:100%;">
						<label for="address_province_{{form.id}}">{{ 'customers.addresses_page.form.province_label' | t }}</label>
						<select id="address_province_{{form.id}}" class="address_form" name="address[province]" data-default="{{form.province}}"></select>
					</div>

					<div class="krown-column-container span6 first">
						<label for="address_zip_{{form.id}}">{{ 'customers.addresses_page.form.zip_label' | t }}</label>
						<input type="text" id="address_zip_{{form.id}}" class="address_form" name="address[zip]" value="{{form.zip}}" autocapitalize="characters">
					</div>

					<div class="krown-column-container span6">
						<label for="address_phone_{{form.id}}">{{ 'customers.addresses_page.form.phone_label' | t }}</label>
						<input type="tel" id="address_phone_{{form.id}}" class="address_form" name="address[phone]" value="{{form.phone}}" placeholder="555-555-1234">
					</div>

					<p>
						{{ form.set_as_default_checkbox }}
						<label for="address_default_address_new" class="inline">{{ 'customers.addresses_page.form.set_as_default_check' | t }}</label>
					</p>

					<input type="submit" class="button color" value="{{ 'customers.addresses_page.form.update_button' | t }}">
					<div class="right">
						{{ 'general.prefixes.or' | t }} <a href="#" onclick="Shopify.CustomerAddress.toggleForm({{form.id}}); return false;">{{ 'customers.addresses_page.form.cancel_button' | t }}</a>
					</div>

					<br />

				{% endform %}

			</div>

		{% endfor %}
		
		{% if paginate.pages > 1 %}
			{% include 'main_pagination' %}
		{% endif %}

	{% endpaginate %}

	<br />

	<a href="#" class="button dark tgl-btn" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customers.addresses_page.add_address_link' | t }}</a>

	<div id="add_address" style="display: none;">

		{% form 'customer_address', customer.new_address %}

			<h2><br />{{ 'customers.addresses_page.add_address_title' | t | delete_customer_address_link: address.id }}</h2>

			<div class="krown-column-container span6 first">
				<label for="address_first_name_new">{{ 'customers.addresses_page.form.first_name_label' | t }}</label>
				<input type="text" id="address_first_name_new" class="address_form" name="address[first_name]" value="{{form.first_name}}" autocapitalize="words">
			</div>

			<div class="krown-column-container span6">
				<label for="address_last_name_new">{{ 'customers.addresses_page.form.last_name_label' | t }}</label>
				<input type="text" id="address_last_name_new" class="address_form" name="address[last_name]" value="{{form.last_name}}" autocapitalize="words">
			</div>

			<label for="address_company_new">{{ 'customers.addresses_page.form.company_label' | t }}</label>
			<input type="text" id="address_company_new" class="address_form" name="address[company]" value="{{form.company}}" autocapitalize="words">

			<label for="address_address1_new">{{ 'customers.addresses_page.form.address_1_label' | t }}</label>
			<input type="text" id="address_address1_new" class="address_form" name="address[address1]" value="{{form.address1}}" autocapitalize="words">

			<label for="address_address2_new">{{ 'customers.addresses_page.form.address_2_label' | t }}</label>
			<input type="text" id="address_address2_new" class="address_form" name="address[address2]" value="{{form.address2}}" autocapitalize="words">

			<div class="krown-column-container span6 first">
				<label for="address_city_new">{{ 'customers.addresses_page.form.city_label' | t }}</label>
				<input type="text" id="address_city_new" class="address_form" name="address[city]" value="{{form.city}}" autocapitalize="words">
			</div>

			<div class="krown-column-container span6">
				<label for="address_country_new">{{ 'customers.addresses_page.form.country_label' | t }}</label>
				<select id="address_country_new" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
			</div>

			<div class="grid-item" id="address_province_container_new" style="display:none;width:100%;">
				<label for="address_province_new">{{ 'customers.addresses_page.form.province_label' | t }}</label>
				<select id="address_province_new" class="address_form" name="address[province]" data-default="{{form.province}}"></select>
			</div>

			<div class="krown-column-container span6 first">
				<label for="address_zip_new">{{ 'customers.addresses_page.form.zip_label' | t }}</label>
				<input type="text" id="address_zip_new" class="address_form" name="address[zip]" value="{{form.zip}}" autocapitalize="characters">
			</div>

			<div class="krown-column-container span6">
				<label for="address_phone_new">{{ 'customers.addresses_page.form.phone_label' | t }}</label>
				<input type="tel" id="address_phone_new" class="address_form" name="address[phone]" value="{{form.phone}}" placeholder="555-555-1234">
			</div>

			<p>
				{{ form.set_as_default_checkbox }}
				<label for="address_default_address_new" class="inline">{{ 'customers.addresses_page.form.set_as_default_check' | t }}</label>
			</p>

			<input type="submit" class="button color" value="{{ 'customers.addresses_page.form.add_button' | t }}">

			<div class="right">
				<p>{{ 'general.prefixes.or' | t }} <a href="#" class="tgl-btn" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customers.addresses_page.form.cancel_button' | t }}</a></p>
			</div>

		{% endform %}

	</div>

	<br />
	<a href="/account">&larr; {{ 'customers.addresses_page.return_link' | t }}</a>

</div>

<script>

	jQuery(function($) {

		new Shopify.CountryProvinceSelector('address_country_new', 'address_province_new', {
			hideElement: 'address_province_container_new'
		});

		{% paginate customer.addresses by 5 %}
			{% for address in customer.addresses %}
				new Shopify.CountryProvinceSelector('address_country_{{address.id}}', 'address_province_{{address.id}}', {
					hideElement: 'address_province_container_{{address.id}}'}
				);
			{% endfor %}
		{% endpaginate %}

		Shopify.CustomerAddress = {

			toggleForm: function(id) {

				var editEl = document.getElementById('edit_address_'+id);

				if ( editEl.style.display == "none" ) {

					editEl.style.display = '';

					setTimeout(function(){
						window.dispatchEvent(new Event('resize'));
	        			$('html,body').animate({scrollTop: $('#edit_address_' + id).offset().top}, 350, 'easeInQuad');
					}, 100);

				} else {

					editEl.style.display = 'none';

					setTimeout(function(){
						$('#content').css('top', 0);
						window.dispatchEvent(new Event('resize'));
					}, 250);

				}

				return false;

			},

			toggleNewForm: function() {

				var el = document.getElementById('add_address');

				if ( el.style.display == "none" ) {

					el.style.display = '';
					
					setTimeout(function(){
						window.dispatchEvent(new Event('resize'));
	        			$('html,body').animate({scrollTop: $('#add_address').offset().top}, 350, 'easeInQuad');
					}, 100);

				} else {

					el.style.display = 'none';

					setTimeout(function(){
						$('#content').css('top', 0);
						window.dispatchEvent(new Event('resize'));
					}, 250);

				}

				return false;

			},

			destroy: function(id, confirm_msg) {
				if ( confirm( confirm_msg || "{{ 'customers.addresses_page.form.delete_check' | t }}" ) ) {
					Shopify.postLink( '/account/addresses/'+id, {'parameters': {'_method': 'delete'}} );
				}
			}

		}

	});

</script>

 

0 Likes
ErSanjay
Trailblazer
146 18 23

@Benjamin_C   thanks for your answer, I used Shopify default debut theme  I removed the display none style but state drop down not showing the state values.

here my address country and state field  code 

 

  <tr>
          <td class="label"><label for="address_country_new">{{ 'customer.addresses.country' | t }}</label></td>
          <td class="value">
            <select id="address_country_new" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
          </td>
        </tr>
         
        <tr id="address_province_container_new" style="">
          <td class="label"><label for="address_province_new">{{ 'customer.addresses.province' | t }}</label></td>
          <td class="value">
            <select id="address_province_new" class="form-control" placeholder="" name="address[province]" data-default="{{form.province}}"></select>
          </td>
        </tr>

 

0 Likes
Gordon_Chan
Shopify Expert
17 0 5

I hit this issue today. And I find the response above to remove the inline css is not a solution because it just show the empty dropdown (select tag without any option).

Seems Shopify does not have any liquid variable (similar with {{ country_option_tags }}) for provinces of a given country, that's why it has an empty dropdown.

Through... I am still finding a way to get the provinces of an address per a given country.

http://gordon-chan.net
I am a Freelance Web Engineer. Dedicated my life to e-commerce development.
0 Likes
Gordon_Chan
Shopify Expert
17 0 5

Removing the inline style wont work.

And I find the way how the province dropdown work:

1. Ensure the theme has download the shopify:

{% if template.directory == 'customers' %}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{% endif %}

2. For new address form, prepare a div wrapper for the select tag (without any option tag inside). Ensure provide id attribute to the wrapper, the province select dropdown as well as the select dropdown for country.

3. The province div wrapper has the inline style "display: none;"

4. Upon clicking the add new address, you should have a JS script in the theme with the click event handler to handle such click event. In such click event, run this script to initialize the province dropdown:

new Shopify.CountryProvinceSelector(
'AddressCountryNew',
'AddressProvinceNew',
{
hideElement: 'AddressProvinceContainerNew'
}
);

AddressCountryNew is the ID for the country dropdown

AddressProvince is the ID for the province dropdown

AddressProvinceContainerNew is the wrapper with inline display:none; which hiding the province dropdown.

The script is available by Shopify Common utils to offer the province corresponding to a given country.

 

For edit address, similar code need to be called, but need to adjust the ID value which match with your edit address form.

Hope this helps other theme developers or store owner.

http://gordon-chan.net
I am a Freelance Web Engineer. Dedicated my life to e-commerce development.
0 Likes
Julian_Eclair
New Member
2 0 0

Hey Gordon,

Could you set up my country provinces as well? How much you would charge for this? Also is it possible to set up different shipping rates for each Province? 

Thanks,

Julian

0 Likes
Gordon_Chan
Shopify Expert
17 0 5

Hi Julian,

You may share me with your store myshopify.com domain so I can have a look the condition first.

Regarding shipping rate for province / state, it is manageable in Settings > Shipping > Manage Zone > create zone, then depend on country you would have provinces / states option.

Gordon_Chan_0-1611286788207.png

 

Gordon

http://gordon-chan.net
I am a Freelance Web Engineer. Dedicated my life to e-commerce development.
0 Likes
Julian_Eclair
New Member
2 0 0
Thank you,

eclair.myshopify.com
0 Likes