Answers.Body: <p>The State and Country fields are output outside your <code>addressFields</code> loop so will always appear after all of the fields in that loop.</p>
  
  <p>On a recent project I just hard coded each field as it gave me greater control for things like input type, validation messages and layout.</p>
  
  <p>If you wanted to continue using your <code>addressFields</code> array you could add a query to output your country/state select input.</p>
  
  <pre><code>{% if field.key == 'country' %}
    &lt;select class="address-{{ field.key }}" name="{{ modelName }}[{{ field.key }}]"&gt;
      {% for key, option in countries %}
        {% set optionValue = (model ? model.countryId : '') %}
        &lt;option value="{{ key }}" {% if key == optionValue %} selected{% endif %}&gt;{{ option }}&lt;/option&gt;
      {% endfor %}
    &lt;/select&gt;
  {% endif %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-13T08:56:22.250Z
Answers.LastActivityDate: 2016-06-13T08:56:22.250Z
Answers.UserDisplayName: Luke Pearce
Body: <p>I am trying to order the address fields so that they read </p>
  
  <ul>
  <li>Business name</li>
  <li>First name</li>
  <li>Last name</li>
  <li>Company name</li>
  <li>Address 1</li>
  <li>Address 2</li>
  <li>City</li>
  <li>State</li>
  <li>Zip</li>
  <li>Phone</li>
  </ul>
  
  <p>I moved some of the items around in the <code>addressFields</code> array but I can't seem to move the Country or the State. Is there a way to do this?</p>
  
  <pre><code>      {% set countries = craft.commerce.countriesList %}
        {% set states = craft.commerce.statesArray %}
        {% set addressFields = [
            { key: 'businessName', label: 'Business Name', required: false },
            { key: 'firstName', label: 'First Name', required: true },
            { key: 'lastName', label: 'Last Name', required: true },
            { key: 'address1', label: 'Address 1', required: false },
            { key: 'address2', label: 'Address 2', required: false },
            { key: 'city', label: 'City', required: false },
            { key: 'zipCode', label: 'Zip Code', required: false },
            { key: 'phone', label: 'Phone', required: false },
        ] %}
  
  
        {% set modelName = modelName is defined ? modelName : 'address' %}
        {% set model = address is defined ? address : null %}
  
        &lt;div class="addressBox {{ modelName }}"&gt;
            {% for field in addressFields %}
                &lt;div class="form-group {% if model and model.getErrors(field.key) %}has-error{% endif %}"&gt;
                    &lt;label for="{{ modelName }}-{{ field.key }}"&gt;{{ field.label }}{{ field.required ? '*' : '' }}&lt;/label&gt;&lt;br/&gt;
                    &lt;input type="text" id="{{ modelName }}-{{ field.key }}" class="u-full-width" name="{{ modelName }}[{{ field.key }}]"
                           value="{{ model ? model[field.key] : '' }}"&gt;      
                    {% if model and model.getErrors(field.key) %}
                        &lt;span class="flash"&gt;{{ model.getErrors(field.key)|join }}&lt;/span&gt;
                    {% endif %}
                &lt;/div&gt;
            {% endfor %}
  
                &lt;div class="form-group {% if model and model.getErrors('stateId') %}has-error{% endif %}"&gt;
                &lt;label for="{{ modelName }}-stateId"&gt;State&lt;/label&gt;&lt;br/&gt;
                &lt;select class="address-state" name="{{ modelName ~ '[stateId]' }}"&gt;
                    {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
                    {% for key, option in options %}
                        {% set optionValue = (model ? model.stateId : '') %}
                        &lt;option value="{{ key }}" {% if key == optionValue %} selected{% endif %}&gt;{{ option }}&lt;/option&gt;
                    {% endfor %}
                &lt;/select&gt;
            &lt;/div&gt;
  
  
            &lt;div class="form-group {% if model and model.getErrors('countryId') %}has-error{% endif %}"&gt;
                &lt;label for="{{ modelName }}-countryId"&gt;Country&lt;/label&gt;&lt;br/&gt;
                &lt;select class="address-country" name="{{ modelName ~ '[countryId]' }}"&gt;
                    {% for key, option in countries %}
                        {% set optionValue = (model ? model.countryId : '') %}
                        &lt;option value="{{ key }}" {% if key == optionValue %} selected{% endif %}&gt;{{ option }}&lt;/option&gt;
                    {% endfor %}
                &lt;/select&gt;
                {% if model and model.getErrors('countryId') %}
                    &lt;span class="flash"&gt;{{ model.getErrors('countryId')|join }}&lt;/span&gt;
                {% endif %}
            &lt;/div&gt;
  
  
  
        &lt;/div&gt;
  
            {% includejs %}
            var states = {{ craft.commerce.statesArray|json_encode|raw }};
  
            $('select.address-country').change(function ()
            {
                var cid = $(this).val();
                var $states = $(this).closest('.addressBox').find('select.address-state');
                $states.find('option').remove();
  
                if (states.hasOwnProperty(cid))
                {
                    for (var id in states[cid])
                    {
                        var state = states[cid][id],
                                $option = $('&lt;option/&gt;');
  
                        $option.attr('value', id).text(state);
                        $states.append($option);
                    }
                }
  
            });
  
            $('select').addClass('form-control input-sm');
  
            {% endincludejs %}
  </code></pre>
  
Tags: <plugin-craftcommerce>
Title: Changing the order of address fields
ThreadText: # Changing the order of address fields
  
  (Asked by: username_0 on 2016-06-13)
  
  I am trying to order the address fields so that they read
  
  * Business name
  * First name
  * Last name
  * Company name
  * Address 1
  * Address 2
  * City
  * State
  * Zip
  * Phone
  
  I moved some of the items around in the `addressFields` array but I can't seem to move the Country or the State. Is there a way to do this?
  
  ```
        {% set countries = craft.commerce.countriesList %}
        {% set states = craft.commerce.statesArray %}
        {% set addressFields = [
            { key: 'businessName', label: 'Business Name', required: false },
            { key: 'firstName', label: 'First Name', required: true },
            { key: 'lastName', label: 'Last Name', required: true },
            { key: 'address1', label: 'Address 1', required: false },
            { key: 'address2', label: 'Address 2', required: false },
            { key: 'city', label: 'City', required: false },
            { key: 'zipCode', label: 'Zip Code', required: false },
            { key: 'phone', label: 'Phone', required: false },
        ] %}
  
        {% set modelName = modelName is defined ? modelName : 'address' %}
        {% set model = address is defined ? address : null %}
  
        <div class="addressBox {{ modelName }}">
            {% for field in addressFields %}
                <div class="form-group {% if model and model.getErrors(field.key) %}has-error{% endif %}">
                    <label for="{{ modelName }}-{{ field.key }}">{{ field.label }}{{ field.required ? '*' : '' }}</label><br/>
                    <input type="text" id="{{ modelName }}-{{ field.key }}" class="u-full-width" name="{{ modelName }}[{{ field.key }}]"
                           value="{{ model ? model[field.key] : '' }}">      
                    {% if model and model.getErrors(field.key) %}
                        <span class="flash">{{ model.getErrors(field.key)|join }}</span>
                    {% endif %}
                </div>
            {% endfor %}
  
                <div class="form-group {% if model and model.getErrors('stateId') %}has-error{% endif %}">
                <label for="{{ modelName }}-stateId">State</label><br/>
                <select class="address-state" name="{{ modelName ~ '[stateId]' }}">
                    {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
                    {% for key, option in options %}
                        {% set optionValue = (model ? model.stateId : '') %}
                        <option value="{{ key }}" {% if key == optionValue %} selected{% endif %}>{{ option }}</option>
                    {% endfor %}
                </select>
            </div>
  
            <div class="form-group {% if model and model.getErrors('countryId') %}has-error{% endif %}">
                <label for="{{ modelName }}-countryId">Country</label><br/>
                <select class="address-country" name="{{ modelName ~ '[countryId]' }}">
                    {% for key, option in countries %}
                        {% set optionValue = (model ? model.countryId : '') %}
                        <option value="{{ key }}" {% if key == optionValue %} selected{% endif %}>{{ option }}</option>
                    {% endfor %}
                </select>
                {% if model and model.getErrors('countryId') %}
                    <span class="flash">{{ model.getErrors('countryId')|join }}</span>
                {% endif %}
            </div>
  
        </div>
  
            {% includejs %}
            var states = {{ craft.commerce.statesArray|json_encode|raw }};
  
            $('select.address-country').change(function ()
            {
                var cid = $(this).val();
                var $states = $(this).closest('.addressBox').find('select.address-state');
                $states.find('option').remove();
  
                if (states.hasOwnProperty(cid))
                {
                    for (var id in states[cid])
                    {
                        var state = states[cid][id],
                                $option = $('<option/>');
  
                        $option.attr('value', id).text(state);
                        $states.append($option);
                    }
                }
  
            });
  
            $('select').addClass('form-control input-sm');
  
            {% endincludejs %}
  
  ```
  
  **Tags:** plugin-craftcommerce
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-06-13. Score: 2
  
  The State and Country fields are output outside your `addressFields` loop so will always appear after all of the fields in that loop.
  
  On a recent project I just hard coded each field as it gave me greater control for things like input type, validation messages and layout.
  
  If you wanted to continue using your `addressFields` array you could add a query to output your country/state select input.
  
  ```
  {% if field.key == 'country' %}
    <select class="address-{{ field.key }}" name="{{ modelName }}[{{ field.key }}]">
      {% for key, option in countries %}
        {% set optionValue = (model ? model.countryId : '') %}
        <option value="{{ key }}" {% if key == optionValue %} selected{% endif %}>{{ option }}</option>
      {% endfor %}
    </select>
  {% endif %}
  
  ```
  
  
  ---
  
  