Most of a solution for Better Country / State options on OCST

[heatherwebdev]

I wanted my users to have a better UI on the Customer Info page on checkout, we have US and International users.

What I have set up is a user will select their country, then if the country is the US they will see a state selection field, and they will not see the Other State/Province field. If the user selects a country that is not the US, they will see the Other State/Province field, but not the state selection field.

Ive been testing this and it's so close to working perfectly.

The last issue that I can see, is that if a user selects the united states first, and selects a state, but then changes to international, and fills in a state, on the next screen (Shipping & Payment Options) I can see that the US state that they selected shows, instead of the state that they typed. It's a bug, and a user may never replicate how I got it, but I'd like to see if someone can find a solution, and I also want to share the code, since I see a lot of messages on here regarding the layout of these fields.

This requires that each US state is filled in as a selection option so I only have a couple options for testing purposes.

Shipping Info Country & State:

 <div class="&mvte:global:ShipCountry_Row;">
            <label class="control-label required" for="ShipCountry">Country:</label>
            <mvt:item name="countries" param="ShipCountry" />
        </div>
       <div class="&mvte:global:ShipState_Row; shipstateselect">
                <label class="required" for="ShipStateSelect"><span>* </span>State:</label>
                    <select name="ShipStateSelect" id="ShipStateSelect">
                    <option value="" class="shipus-states" selected>Select State</option>
                    <mvt:if expr="g.ShipStateSelect EQ 'AL'">
                    <option class="shipus-states" value="AL" selected>Alabama</option>
                    <mvt:else>
                    <option class="shipus-states" value="AL">Alabama</option>
                    </mvt:if>
                    <mvt:if expr="g.ShipStateSelect EQ 'AK'">
                    <option class="shipus-states" value="AK" selected>Alaska</option>
                    <mvt:else>
                    <option class="shipus-states" value="AK">Alaska</option>
                    </mvt:if>
                    <mvt:if expr="g.ShipStateSelect EQ 'AZ'">
                   <option class="shipus-states" value="AZ" selected>Arizona</option>
                   <mvt:else>
                    <option class="shipus-states" value="AZ">Arizona</option>
                   </mvt:if>
                    <mvt:if expr="g.ShipStateSelect EQ ''">
                   <option class="shipus-states" value="" selected>Outside US</option>
                   <mvt:else>
                    <option class="shipus-states" value="">Outside US</option>
                   </mvt:if>

                    </select>
            </div>

            <div class="&mvte:global:ShipState_Row; otherShipState">
                <label class="italic" for="ShipState">Other State/Province:</label>
                <input type="text" name="ShipState" id="ShipState" value="&mvte:global:ShipState;" class="textfield" />
            </div>

Billing Info Country & State:

<div class="&mvt:global:BillCountry_Row;">
            <label class="control-label required" for="BillCountry">Country:</label>
            <mvt:item name="countries" param="BillCountry" />
        </div>

<div class="&mvte:global:BillState_Row; billstateselect">
                <label class="required" for="BillStateSelect"><span>* </span>State:</label>
                    <select name="BillStateSelect" id="BillStateSelect">
                    <option value="" class="billus-states" selected>Select State</option>
                    <mvt:if expr="g.BillStateSelect EQ 'AL'">
                    <option class="billus-states" value="AL" selected>Alabama</option>
                    <mvt:else>
                    <option class="billus-states" value="AL">Alabama</option>
                    </mvt:if>
                    <mvt:if expr="g.BillStateSelect EQ 'AK'">
                    <option class="billus-states" value="AK" selected>Alaska</option>
                    <mvt:else>
                    <option class="billus-states" value="AK">Alaska</option>
                    </mvt:if>
                    <mvt:if expr="g.BillStateSelect EQ 'AZ'">
                   <option class="billus-states" value="AZ" selected>Arizona</option>
                   <mvt:else>
                    <option class="billus-states" value="AZ">Arizona</option>
                   </mvt:if>
                   <mvt:if expr="g.BillStateSelect EQ ''">
                   <option class="billus-states" value="" selected>Outside US</option>
                   <mvt:else>
                    <option class="billus-states" value="">Outside US</option>
                   </mvt:if>

                    </select>
            </div>

            <div class="&mvte:global:BillState_Row; otherBillState">
                <label class="italic" for="BillState">Other State/Province:</label>
                <input type="text" name="BillState" id="BillState" value="&mvte:global:BillState;" class="textfield" />
            </div>

JS:

<script>
    var billSelect = document.getElementById('BillStateSelect');
    var shipSelect = document.getElementById('ShipStateSelect');
    var billState = '&mvte:global:basket:bill_state;';
    var shipState = '&mvte:global:basket:ship_state;';

    var billCountrySelect = document.getElementById('BillCountry');
    var shipCountrySelect = document.getElementById('ShipCountry');
    var billCountry = '&mvte:global:basket:bill_cntry;';
    var shipCountry = '&mvte:global:basket:ship_cntry;';

    var otherShipState = document.getElementById('ShipState');
    var otherBillState = document.getElementById('BillState');

    console.log(shipSelect.value);

    if (billState != '' && billSelect.value != billState) {
        billSelect.value = .billus-state;
    }
    if (shipState != '' && shipSelect.value != shipState) {
        shipSelect.value = .shipus-state;
    }

    if (billCountry != '' && billCountrySelect.value != billCountry) {
        billCountrySelect.value = billCountry;
    }
    if (shipCountry != '' && shipCountrySelect.value != shipCountry) {
        shipCountrySelect.value = shipCountry;
    }




</script>
<script type="text/javascript">
$(function(){ 
    checkCountry();   
    $("#BillCountry").on('change',checkCountry);
    function checkCountry() {
      var bcountry = $("#BillCountry").val();
      if( bcountry!='US') {
         $(".otherBillState").show();    
         $(".billstateselect").hide();
      } else if(bcountry=='US') {
        $(".otherBillState").hide();
        $(".billus-state").show();
      } 
     else {

        $(".otherBillState").css("display", "block");
      }

       if( bcountry=='US') {
         $(".otherBillState").hide();    
         $(".billstateselect").show();
      }
};
});
</script>
<script type="text/javascript">
$(function(){ 
    checkCountry();   
    $("#ShipCountry").on('change',checkCountry);
    function checkCountry() {
      var scountry = $("#ShipCountry").val();
      if( scountry!='US') {
         $(".otherShipState").show();    
         $(".shipstateselect").hide();
      } else if(scountry=='US') {
        $(".otherShipState").hide();
        $(".shipus-state").show();
      } 
     else {

        $(".otherShipState").css("display", "block");
      }

       if( scountry=='US') {
         $(".otherShipState").hide();    
         $(".shipstateselect").show();
      }


};
});
</script>

[heatherwebdev]

I'd also like to get the Other State / Province field set to not required, without updating it from the store options / states page. When I did that, a large amount of my pages got messed up. If I can get it to send over n/a or something if it isnt filled in when a non-us country is selected, that would awesome. I've been contacted by international users before saying that their country doesnt use states/provinces

Edit: Got this set up.

<script>
 var input = document.getElementById('BillState');

if(input.value.length == 0)
    input.value = "Enter State if Applicable";

</script>
<script>
 var input = document.getElementById('ShipState');

if(input.value.length == 0)
    input.value = "Enter State if Applicable";

</script>

Also add after if( bcountry=='US' ) {
$(".otherBillState").hide();
$(".billstateselect").show();
}

if( bcountry =='' ) {
         $(".otherBillState").hide();            
      }

And after if( scountry=='US' ) {
$(".otherShipState").hide();
$(".shipstateselect").show();
}
add

 if( scountry =='' ) {
         $(".otherShipState").hide();            
      }

Still have no solution for the issue in the original post though.