How arrange address fields in my account and one page checkout

x97wehner · September 11, 2019

I've bee trying to figure this out for a while today. My account/address fields are all arranged as city, postal code, country, state. I'm trying to find how to change to city, state, postal code, country since we're only in north america. Can someone advise? Thanks.

x97wehner · September 12, 2019

Bumping this again. Anyone with a quick answer to help?

zen · September 12, 2019

Hello,

In the back office go to : Localization >> Countries

and click on right side button : "edit" for the country you want, here it's United States

from there you have Address format ... Then Here you go ! 🙂

firstname lastname
company
address1 address2
city, State:name postcode
Country:name
phone
phone_mobile

change the line you want and order it as you like.

Edited September 12, 2019 by zen

x97wehner · September 13, 2019

I've done this, but it doesn't change the order of the fields on the input forms. It just modifies the address in display.

datakick · September 13, 2019

You will probably have to modify the template in your theme - address.tpl

zen · September 13, 2019

in the community-theme-default, you'll have to edit "address.tpl" file

starting line 103

      {if $field_name eq 'postcode'}
        {assign var="postCodeExist" value=true}
        <div class="required postcode form-group unvisible">
          <label for="postcode">{l s='Zip/Postal Code'} <sup>*</sup></label>
          <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" id="postcode" name="postcode" value="{if isset($smarty.post.postcode)}{$smarty.post.postcode}{else}{if isset($address->postcode)}{$address->postcode|escape:'html':'UTF-8'}{/if}{/if}">
        </div>
      {/if}
      {if $field_name eq 'city'}
        <div class="required form-group">
          <label for="city">{l s='City'} <sup>*</sup></label>
          <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" name="city" id="city" value="{if isset($smarty.post.city)}{$smarty.post.city}{else}{if isset($address->city)}{$address->city|escape:'html':'UTF-8'}{/if}{/if}" maxlength="64" required>
        </div>
        {* if customer hasn't update his layout address, country has to be verified but it's deprecated *}
      {/if}
      {if $field_name eq 'Country:name' || $field_name eq 'country' || $field_name eq 'Country:iso_code'}
        <div class="required form-group">
          <label for="id_country">{l s='Country'} <sup>*</sup></label>
          <select id="id_country" class="form-control" name="id_country" required>{$countries_list}</select>
        </div>
      {/if}
      {if $field_name eq 'State:name'}
        {assign var="stateExist" value=true}
        <div class="required id_state form-group">
          <label for="id_state">{l s='State'} <sup>*</sup></label>
          <select name="id_state" id="id_state" class="form-control">
            <option value="">-</option>
          </select>
        </div>
      {/if}

and change it for that :

      {if $field_name eq 'city'}
        <div class="required form-group">
          <label for="city">{l s='City'} <sup>*</sup></label>
          <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" name="city" id="city" value="{if isset($smarty.post.city)}{$smarty.post.city}{else}{if isset($address->city)}{$address->city|escape:'html':'UTF-8'}{/if}{/if}" maxlength="64" required>
        </div>
        {* if customer hasn't update his layout address, country has to be verified but it's deprecated *}
      {/if}
	{if $field_name eq 'State:name'}
        {assign var="stateExist" value=true}
        <div class="required id_state form-group">
          <label for="id_state">{l s='State'} <sup>*</sup></label>
          <select name="id_state" id="id_state" class="form-control">
            <option value="">-</option>
          </select>
        </div>
      {/if}
	{if $field_name eq 'postcode'}
        {assign var="postCodeExist" value=true}
        <div class="required postcode form-group unvisible">
          <label for="postcode">{l s='Zip/Postal Code'} <sup>*</sup></label>
          <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" id="postcode" name="postcode" value="{if isset($smarty.post.postcode)}{$smarty.post.postcode}{else}{if isset($address->postcode)}{$address->postcode|escape:'html':'UTF-8'}{/if}{/if}">
        </div>
      {/if}
      {if $field_name eq 'Country:name' || $field_name eq 'country' || $field_name eq 'Country:iso_code'}
        <div class="required form-group">
          <label for="id_country">{l s='Country'} <sup>*</sup></label>
          <select id="id_country" class="form-control" name="id_country" required>{$countries_list}</select>
        </div>
      {/if}

x97wehner · September 13, 2019

6 hours ago, zen said:

in the community-theme-default, you'll have to edit "address.tpl" file

starting line 103


      {if $field_name eq 'postcode'}
        {assign var="postCodeExist" value=true}
        <div class="required postcode form-group unvisible">
          <label for="postcode">{l s='Zip/Postal Code'} <sup>*</sup></label>
          <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" id="postcode" name="postcode" value="{if isset($smarty.post.postcode)}{$smarty.post.postcode}{else}{if isset($address->postcode)}{$address->postcode|escape:'html':'UTF-8'}{/if}{/if}">
        </div>
      {/if}
      {if $field_name eq 'city'}
        <div class="required form-group">
          <label for="city">{l s='City'} <sup>*</sup></label>
          <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" name="city" id="city" value="{if isset($smarty.post.city)}{$smarty.post.city}{else}{if isset($address->city)}{$address->city|escape:'html':'UTF-8'}{/if}{/if}" maxlength="64" required>
        </div>
        {* if customer hasn't update his layout address, country has to be verified but it's deprecated *}
      {/if}
      {if $field_name eq 'Country:name' || $field_name eq 'country' || $field_name eq 'Country:iso_code'}
        <div class="required form-group">
          <label for="id_country">{l s='Country'} <sup>*</sup></label>
          <select id="id_country" class="form-control" name="id_country" required>{$countries_list}</select>
        </div>
      {/if}
      {if $field_name eq 'State:name'}
        {assign var="stateExist" value=true}
        <div class="required id_state form-group">
          <label for="id_state">{l s='State'} <sup>*</sup></label>
          <select name="id_state" id="id_state" class="form-control">
            <option value="">-</option>
          </select>
        </div>
      {/if}

and change it for that :


      {if $field_name eq 'city'}
        <div class="required form-group">
          <label for="city">{l s='City'} <sup>*</sup></label>
          <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" name="city" id="city" value="{if isset($smarty.post.city)}{$smarty.post.city}{else}{if isset($address->city)}{$address->city|escape:'html':'UTF-8'}{/if}{/if}" maxlength="64" required>
        </div>
        {* if customer hasn't update his layout address, country has to be verified but it's deprecated *}
      {/if}
	{if $field_name eq 'State:name'}
        {assign var="stateExist" value=true}
        <div class="required id_state form-group">
          <label for="id_state">{l s='State'} <sup>*</sup></label>
          <select name="id_state" id="id_state" class="form-control">
            <option value="">-</option>
          </select>
        </div>
      {/if}
	{if $field_name eq 'postcode'}
        {assign var="postCodeExist" value=true}
        <div class="required postcode form-group unvisible">
          <label for="postcode">{l s='Zip/Postal Code'} <sup>*</sup></label>
          <input class="is_required validate form-control" data-validate="{$address_validation.$field_name.validate}" type="text" id="postcode" name="postcode" value="{if isset($smarty.post.postcode)}{$smarty.post.postcode}{else}{if isset($address->postcode)}{$address->postcode|escape:'html':'UTF-8'}{/if}{/if}">
        </div>
      {/if}
      {if $field_name eq 'Country:name' || $field_name eq 'country' || $field_name eq 'Country:iso_code'}
        <div class="required form-group">
          <label for="id_country">{l s='Country'} <sup>*</sup></label>
          <select id="id_country" class="form-control" name="id_country" required>{$countries_list}</select>
        </div>
      {/if}

That's what I thought it would be also, but it doesn't affect anything. Same format.

zen · September 13, 2019

you maybe have to clear the smarty cache then...

otherwize : please give me the url of the page you have problem on.. and a screen shot will be also nice to have in order to help you on your precise case.

Occam · September 13, 2019

30 minutes ago, x97wehner said:

it doesn't affect anything. Same format.

Smarty cache isn't the problem in this case, activate once the option recompile.

zen · September 13, 2019

Just now, Occam said:

Smarty cache isn't the problem in this case, activate once the option recompile.

it's not the problem if your setup is correct.. there is also the first selection for "never recompile TPL files"

Occam · September 13, 2019

Factor · September 13, 2019

8 hours ago, zen said:

edit "address.tpl" file

Will this go away with an Update to the theme?

Occam · September 13, 2019

I hope not. In this case, European users are more likely to opt for other shop systems. It would be better if the arrangement were flexible so that the order could be rearranged without changing the core.

datakick · September 13, 2019

26 minutes ago, Factor said:

Will this go away with an Update to the theme?

Yes, of course. You can copy the theme to different directory, install it, and make changes there. Or use my child theme module

Factor · September 13, 2019

27 minutes ago, Occam said:

I hope not. In this case, European users are more likely to opt for other shop systems. It would be better if the arrangement were flexible so that the order could be rearranged without changing the core.

I did not mean be deleted from the system . sorry..

Factor · September 13, 2019

Seems like the best thing to do is make the Address format section and TPL more compliant. I U.S. we have this. https://pe.usps.com/cpim/ftp/pubs/Pub28/pub28.pdf

If you look at page 5 this is the general format for USA.

Is there a international postal standard we could look to as well?

Occam · September 13, 2019

I know this format which unfortunately does not comply with some of the bigger European countries though throughout the EU there is no common standard. For instance UK is more likely between the US postal format, but not the same.

Factor · September 13, 2019

7 minutes ago, Occam said:

I know this format which unfortunately does not comply with some of the bigger European countries though throughout the EU there is no common standard. For instance UK is more likely between the US postal format, but not the same.

Well we should use the 80/20 rule. What is the most widely adopted postal standards. Those should be added to the code. The other 20 percent should have to modify.

Edited September 13, 2019 by Factor

Occam · September 13, 2019

48 minutes ago, datakick said:

You can copy the theme to different directory, install it, and make changes there.

This may be a desirable solution from a programmer's point of view, but most merchants are pure users. They don't have your knowledge and don't want it. They are looking for a ready-made and want to sell. We already experienced this in Prestashop when Francois-Marie had the idea of the Starter Theme. That absorbed a lot of energy and was discarded at some point. The concept of the child-theme also seems to step in the same direction - but I feel that the needs of the average user are not met with such features.

Edited September 13, 2019 by Occam

Factor · September 13, 2019

40 minutes ago, Occam said:

merchants are pure users.

As my wife usually states.. "what you mean it just doesn't work..." I have said it a few times this week alone. You have to unlatch your programmer mind and think like a user. It should be KISS and standards based. In this example:

We all grew up filling out address' we were taught how from like age 13. So we expect it to just be that standard.

x97wehner · September 13, 2019

Through some tinkering I figured out the issue here, sort of. My issue was a result of me wanting to insert the state iso code into the address in place of the name. The OOB code requires country name and state name on the forms. When I replaced the state name with state iso code, the forms didn't know where to place the state name field and shoved it below country, since both are required. That made my printed addresses the way I wanted, to NA standards, but put the form field order way out of whack.

Replacing the iso code with name on the address makes the forms render correctly, but now the address spells out the state, which can work but is undesireable IMO.

Since the state field is dynamic based on the country, what I'd love to know is how to put the country at the top of only the forms, so that the user can designate it and then have the correct prefiltered state list when they get to it further down the form. The current flow I have now is non-user friendly if my user is non-U.S. based. They have to skip the state field, populate the country, and then go back up and populate the revised state list.

shoptechmedia · September 20, 2019

I hope this issue could be included in the next release as an added feature.. it really will serve a lot of developers well...

Sign In

How arrange address fields in my account and one page checkout

Recommended Posts

x97wehner

x97wehner

zen

x97wehner

datakick

zen

x97wehner

zen

Occam

zen

Occam

Factor

Occam

datakick

Factor

Factor

Occam

Factor

Occam

Factor

x97wehner

shoptechmedia

Create an account or sign in to comment

Create an account

Sign in