Creating a select dropdown with all countries (with same format as Commerce)

I’m using the Login Extra to let users create and manage their accounts. Within the update profile resource, there is (next to all other profile data also) a simple input type="text" field to set the users country.

During the checkout in Commerce a user has either the option to enter a new address, or they can choose an existing one from a generated radio select. Now, if the user wants to add a new address in there and already has one saved in his profile, the address from the profile is loaded into the form except the country.

For some reason the country stays emtpy although there is a value for it in the users profile, so my guess is, that Commerce uses a different format to put in the country and looks for in the users profile.

(Additional related issue)

Because this whole issue of: “a user-set country is different than a Commerce-set country”, Commerce also doesn’t check an existing address in the radio select although it’s the same as within the users profile.

As Commerce is using Twig to generate the templates I can’t just go copy/paste and get the country select from there:

<div class="c-field select-wrapper {% if error_shipping_country %}error{% endif %}">   
   <label for="address-shipping-country">{{ lex('commerce.address.country') }}</label>
   
   <select name="address[shipping][country]" id="address-shipping-country">
      <option value=""></option>
      {% for country in countries %}
         <option value="{{ country.iso }}" {% if address_shipping_country == country.iso %}selected="selected"{% endif %}>{{ country.shortname }}</option>
      {% endfor %}
   </select>

   {% if error_shipping_country %}<span class="c-field-error">{{ error_shipping_country }}</span>{% endif 
</div>

So how can I replicate the same country select option in my update profile resource (created with the Login Extra) or how can I make sure the user entered country in their profile has the same format like Commerce looks for?

Thanks for any help!

Okay, so I got distracted by the fact that FormIt.CountryOptions has FormIt in its name, but that works like a charm:

<div class="select-wrapper">

   <label for="country">[[!%login.country]]
      <span class="error">[[+error.country]]</span>
   </label>

   <select name="country" id="country">
      [[!FormItCountryOptions?
         &selected=`[[+country]]`
      ]]
   </select>

</div>

Commerce wasn’t filling the country field, as its dropdown (just like this FormIt snippet) uses country codes and the regular user would probably just type out the name of their country.

What still persists though, is the “Additional related issue”, where Commerce doesn’t check an already existing address (which is the same like in the profile), but that’s probably something for another thread…

Edit: After deleting old duplicate addresses, everything works fine.

1 Like

Commerce has different ways of prefilling a previously existing address. The behavior you’re looking for, where it copies the address from the users’ profile, is available if you enable the UserProfileAddress module. That does rely on the country having the right country code fields, which you should have covered now.

That module predates the built-in customer address handling, which allows customers to save specific addresses, but still prefills the new address form.

Other possibilities, which I personally prefer, are the AutofillGeoIP module which uses the IP address to prefill the state and country, or the DefaultAddress module which allows you to enter a fixed state/country that should be used by default.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.