Hiding the 'States/Provinces' list unless it is required

[cdicken]

Hi there

Over on the v7 forum, someone asked how to hide the 'States/Provinces' list on the checkout unless someone selects the US or Canada.

I don't think it's possible in v7 (as the same code is used by both the invoice drop downs and the delivery drop downs and this would break the Javascript) but it is possible in v8.

And it goes a little something like this:

1. Go to 'Design | Library | Layouts' and expand the 'Checkout Area' group.
2. Open the 'Delivery Location' layout.
3. Locate this code:

         <Actinic:LOCATION TYPE="DELIVERSELECTSTATE">
            <actinic:variable name="DeliveryStateList" />
         </Actinic:LOCATION>

4. Replace it with this code:

     <div id="showhidearea" style="visibility: hidden">
         <Actinic:LOCATION TYPE="DELIVERSELECTSTATE">
            <actinic:variable name="DeliveryStateList" />
         </Actinic:LOCATION>
     </div>

5. Now click 'OK' on this layout and go to the 'Delivery' country list group.
6. Open the 'Delivery Country List' layout
7. Click the orange 'Click here to edit list layout settings' link.
8. Replace the entire contents of the 'Start Of List' field with the following:

   <select id="lstDeliveryCountry" name="LocationDeliveryCountry" onchange="javascript:div = document.getElementById('showhidearea'); if (this.options[this.selectedIndex].value == 'US' || this.options[this.selectedIndex].value == 'CA') div.style.visibility = 'visible'; else div.style.visibility = 'hidden';">
   <option value="">
   <Actinic:Variable Name="SelectCountry" if="%3cactinic%3avariable%20name%3d%22InvoiceLocationIsUsed%22%20%2f%3e%20%3d%3d%20False"/>
   <Actinic:Variable Name="UseInvoiceLocation" if="%3cactinic%3avariable%20name%3d%22InvoiceLocationIsUsed%22%20%2f%3e"/>

9. Click OK (twice) and then close the library and upload.

[los_design]

nice one Chris.

Added to the snippets on the lovely, over-bloated DW CS3

[bluemax]

This one is really cleans things up.

Thanks a bunch.

[Jonathan Hunter]

This is a great addition.

Is there a way of having multiple state/country drop downs? For example, if the customer selects US then US states appear, if the customer Selects UK then UK counties appear.

[cdicken]

I would do this by hard-coding multiple drop down lists into the layout, each one with a different set of provinces. Then wrap each one in a <div> tag with a different id for each one e.g. <div id="UK-states"> <div id="USA-States"> etc, and then create three different JavaScript functions, which are responsible for showing and hiding each drop down list.

[OriginalTouch]

I need this too as, currently, Ireland is only showing UK counties as options - but javascript is too technical - do you have an example?

[OriginalTouch]

Tried your workround to apply to the UK but when changing your code, the UK states disappeared when choosing the UK!

[TraceyHand]

Sam, show us what you did..what code you used and which bits you changed from what Chris originally posted (don't forget the [CODE] tags, please)

[OriginalTouch]

Got it working - needed to change the UK code in the script, instead of US.
It was getting late last night!

So yes, hiding this drop down box does work for any zone!!

Would still be interested in seeing the script for multiple drop down boxes though!

[bentleybloke]

Just one problem: when someone chooses UK, the states/regions box appears. They make a choice and click next. Then if they go back again to choose a different reqion, the field with the option to hide does not appear.

Nor does it appear when you select UK in the list again. Your customer will have to select another country and then select UK again to get the region field to show. Frustration + confusion = lost sale.

[OriginalTouch]

I agree, got it working, but whenever a customer goes back to this cart (maybe after adding something else), this dropdown box does not show. I have also noted that it does not show when previous customers return (cookies keeping old address info on page). It only returns when you physically change to another country and back to UK again.

This is probably because the script is told to run when choosing the UK. Cannot work when UK is already in the box. (Doesn't know it has to do anything - ie go and get counties - but only a guess as haven't a clue how to write script myself). So do not know if this can be changed.

I am going to see if this is a major problem for customers. In the meantime, I have added "UK only: Please select" to the dropdown list to help against confusion. Therefore, if it is a problem, I will just leave it showing all the time.

However, as already asked, I would like soon to add regions to another country (Ireland).
Is it possible that when choosing different countries, then different dropdown boxes will show?
Hardcoding has been mentioned above - but need examples of scripts and where to add.
This may help towards this 'disappearing' of dropdown box, if it is replaced by another dropdown box for another country.

[OriginalTouch]

Sorry to cross-post but there is another thread about this where people have not quite understood the above code of this thread:
http://community.actinic.com/showthr...716#post217716

So to pull it all together:

The code given above for the Delivery Country List is for the countries (say) US and CA (US and Canada) to show states when required. If you need to do the same for the UK, change the US to the UK. Or even better copy this line
this.options[this.selectedIndex].value == 'US'
as many times as you need to replicate it for as many countries as you need.

Heres my code for the US and the UK:

<select id="lstDeliveryCountry" name="LocationDeliveryCountry" onchange="javascript:div = document.getElementById('showhidearea'); if (this.options[this.selectedIndex].value == 'US' || this.options[this.selectedIndex].value == 'UK') div.style.visibility = 'visible'; else div.style.visibility = 'hidden';">
<option value="">
<Actinic:Variable Name="SelectCountry" if="%3cactinic%3avariable%20name%3d%22InvoiceLocationIsUsed%22%20%2f%3e%20%3d%3d%20False"/>
<Actinic:Variable Name="UseInvoiceLocation" if="%3cactinic%3avariable%20name%3d%22InvoiceLocationIsUsed%22%20%2f%3e"/>

If you were to add say Canada then add CA, then add as many lines as you want ensuring that the country codes match those in your country setups in Actinic. EG:

<select id="lstDeliveryCountry" name="LocationDeliveryCountry" onchange="javascript:div = document.getElementById('showhidearea'); if (this.options[this.selectedIndex].value == 'US' || this.options[this.selectedIndex].value == 'UK' || this.options[this.selectedIndex].value == 'CA') div.style.visibility = 'visible'; else div.style.visibility = 'hidden';">
<option value="">
<Actinic:Variable Name="SelectCountry" if="%3cactinic%3avariable%20name%3d%22InvoiceLocationIsUsed%22%20%2f%3e%20%3d%3d%20False"/>
<Actinic:Variable Name="UseInvoiceLocation" if="%3cactinic%3avariable%20name%3d%22InvoiceLocationIsUsed%22%20%2f%3e"/>

[Golf Tee Warehouse]

Has anybody found a solution to the problem described in post #11 above.

I have hidden the states/provinces drop down list as describved in the AUG but if someone selects an incompatible region an error message states "Select Shipping Destination - The country/region combination you selected is invalid. Please check and re-enter your selection", but the states/provinces drop-down box is no longer visable to select a correct entry, which makes the AUG solution unusable without the risk of losing any customers who make an incorrect selection.

[James13009]

Bumping this topic also trying to find a solution in post 11.

I have tried "onload" in the body code but the javascript needs editing, as its not working. Not sure how though