Question

I’m not a programmer, but I’ve done all the customizations for my web shop myself. I use zen-cart. I’m trying to make it more user friendly for international customers and its become apparent that zen-cart is only “international” on a cursory level. it is very US-centric with some token nods to other “common” countries like Canada, UK, etc.

Anyway, I’m trying to re-do the sign-up sheet so the address is more sensical for any visitor regardless of their country. So they select the country and the “state” auto-populates… that’s built in already (just have to add all the “states” for each country manually to the database) but the problem is the JS gets rather huge. Further than that, I want to change how the labels are displayed. ie. “city” should read “municipality” for visitors from Argentina. An obvious one is “province” for Canada, etc. But then the JS just gets that much more huge.

You end up with a ginormous series of if statements covering some 260 countries with an average of some 8 to 10 “states” each and then each having its own wording for “street”, “suburb”, “city”, “state” and “postal” labels.

So my question is… can this be efficient? Can this be “lite”? Do we really have to populate the client browser with all that data or is there a better way (and still have it be dynamic without extraneous page loads)?

Or is it OK to just have it all piled in there? On my local server, it loads reasonably quick. I haven’t tried it on a web server and I really don’t have a way to test on a “slow” connection so I just want to code it properly from the beginning.

Thanks.

Answer 1

That amount of data is not huge if you are going to improve the user interface with it.

Your server should be implementing a gzip method to compress the data before being sent to the client, and repetitive data compresses really well.

I expect you should be using a data structure something like this in JSON

var countryData = [
  { name: "USA",
    provinceName: "City",
    suburbName: "Suburb"
  },
  { name: "Canada",
    provinceName: "Province",
    suburbName: "Suburb"
  }
]

You could keep all that in a separate file to help keep your javascript organized, and use a script tag to load it before your main script runs.

Also, to test the performance hit, I would use a tool like YSlow which runs inside the firebug extension for firefox browser. It is made by yahoo, and allows you to see the loading time for all the components of a page, with caching or without, and allows you to examine which files are compressed or not.