Move position of State field on top of the Country field on One Page Checkout

Depending on the country selected, the State field becomes either a free-form text or a dropdown field. For example, Angola has a free-form State field whereas United States would have a dropdown list with prepopulated states that default to Alabama. 

In some cases, when shoppers select their country, they do not notice that the text they entered on the State field has been cleared and changed to a dropdown list defaulting to a value of Alabama. As a result, some of the Sales Orders generated have the State incorrect (i.e. Alabama). 

A. Copy the Checkout Address Form template and the templates.config file in the Custom Checkout application folder. You will modify the template file in the Custom Checkout application folder.

1. Go to Web Site Hosting Files > Live Hosting Files > SSP Applications > NetSuite Inc. > Reference Checkout > templates.

2. Click Copy Files.

3. Check the box next to checkout_addressformmacro.txt, and templates.config. 


Note: In version 1.1, there is no need to copy templates.config

4. In the Copy To field, select Web Site Hosting Files : Live Hosting Files : SSP Applications : NetSuite Inc. : Custom Checkout : templates.

B. Go to Web Site Hosting Files > Live Hosting Files > SSP Applications > NetSuite Inc > Custom Checkout > templates.

C. Click Edit next to checkout_addressformmacro.txt.

D. Move the node for Country and place it on top of the node of the State field so that it looks like this:

 -- This is the <div> node for the Country field.
<!-- This is the <div> node for the Country field --><div class="f-row"> <label for="country">Country</label> <div class="f-select"> <select name="country" id="country" class="validate-select" title="Country" onchange='BDK.fire("customCountryChange", this);return false;' class="validate-select"> {for c in obj.countries} <option value="${c.code}" {if obj.selectedCountryCode === c.code}selected{/if}>${c.name}</option> {/for} </select> </div></div><!-- This is the <div> node for the State field. --> <div class="f-row" > <label for="state">State</label> ${this.stateSection(obj)} </div> 

E. Save your changes.