Multiple language error messages in javascript
One option you have is to create Javascript language files and include the right one right before your Javascript file. On the server-side, the selected language is known, so the right file can easily be included. In the language file, you define variables that can be used in your code.
Something like:
<script type="text/javascript" src="lang_en.js" /><script type="text/javascript" src="yourjavascript.js" />lang_en.js can be either lang_de.js or anything, the server decides.
In the language files you have something like (simplified, global stuff, just want to show the idea):
var lang = { ARE_YOU_SURE : 'Are you sure?', ...};And in your main Javascript file you can simply do:
alert(lang.ARE_YOU_SURE);
i have kind of solved my issue of how to retrieve the messages and pass in variables of my own as well. Here is the code to a simple test page i have built:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://media.topshop.com/javascript/wearwiths/lib/jquery/jquery.js"></script> <script type="text/javascript" src="brand.js"></script> <script type="text/javascript"> var msg, xVal = 2, yVal = 8, prodName = "Blue Skirt", msg_type = "information", lang = "eng"; $.ajax({ url: lang + '_messages.js', dataType: 'script', scriptCharset: 'utf-8', success: function() { console.log("The " + lang + " language file was loaded."); msg = messages || {}; } }); function translate(message, details) { if(message.indexOf("{currency}") != -1) { message = message.replace("{currency}", Arcadia.Brand.currency); console.log(typeof Arcadia.Brand.currency); } if(message.indexOf("{val}") == -1) { return message; } else { for (var i = 0; i < details.length; i++) { message = message.replace("{val}", details[i]); } return message; } } $(document).ready(function() { var listItem, listIndex; $('#item_list li a').click(function() { listItem = $(this).parent(); listIndex = $('ul#item_list li').index(listItem); toString(listIndex); switch (msg_type) { case "information": $("p#error").text(translate(msg.information["mes_" + listIndex], [xVal, "14"])); console.log(translate(msg.information["mes_" + listIndex], [xVal, "14"])); break; case "product_or_bundle": $("p#error").text(translate(msg.product_or_bundle["mes_" + listIndex], [xVal, "14"])); console.log(translate(msg.product_or_bundle["mes_" + listIndex], [xVal, "14"])); break; case "error": $("p#error").text(translate(msg.error["mes_" + listIndex], [xVal, "14"])); console.log(translate(msg.error["mes_" + listIndex], [xVal, "14"])); break; case "code": $("p#error").text(translate(msg.code["mes_" + listIndex], [xVal, "14"])); console.log(translate(msg.code["mes_" + listIndex], [xVal, "14"])); break; } return false; }); $('ul#message_select li a').click(function() { msg_type = $(this).attr('href'); msg_type = msg_type.replace('#', ""); }); $('select#lang').change(function () { lang = $(this).val(); $.ajax({ url: lang + '_messages.js', contentType: "application/x-www-form-urlencoded; charset=utf-8", dataType: 'script', success: function() { console.log("The " + lang + " language file was loaded."); msg = messages || {}; } }); }); }); </script> <style type="text/css"> p { background: green; color: #fff; } p span { background: darkblue; } em { font-weight: bold; font-style: normal; color: yellow; } </style> </head> <body> <h1>V7 site messaging test</h1> <h2>Select message language</h2> <form> <select id="lang"> <option value="eng" title="Switch the language to English">English</option> <option value="fra" title="Switch the language to French">French</option> <option value="ger" title="Switch the language to German">German</option> </select> </form> <h2>Select message type</h2> <ul id="message_select"> <li><a href="#information" title="Information">Information</a></li> <li><a href="#product_or_bundle" title="Product or Bundle">Product or Bundle</a></li> <li><a href="#error" title="Error">Error</a></li> <li><a href="#code" title="Code">Code</a></li> </ul> <h3>Message</h3> <ul id="item_list"> <li><a href="#" title="list item 1">list item 1</a></li> <li><a href="#">list item 2</a></li> <li><a href="#">list item 3</a></li> <li><a href="#">list item 4</a></li> <li><a href="#">list item 5</a></li> <li><a href="#">list item 6</a></li> <li><a href="#">list item 7</a></li> <li><a href="#">list item 8</a></li> <li><a href="#">list item 9</a></li> <li><a href="#">list item 10</a></li> <li><a href="#">list item 11</a></li> <li><a href="#">list item 12</a></li> <li><a href="#">list item 13</a></li> <li><a href="#">list item 14</a></li> <li><a href="#">list item 15</a></li> <li><a href="#">list item 16</a></li> <li><a href="#">list item 17</a></li> <li><a href="#">list item 18</a></li> <li><a href="#">list item 19</a></li> <li><a href="#">list item 20</a></li> <li><a href="#">list item 21</a></li> <li><a href="#">list item 22</a></li> </ul> <p id="error">Error Message will appear here</p> </body></html>The issue i am now having is that the foreign laguage characters for French and German are coming out as nonsense. It is something to do with character sets, but i have set the charset to utf-8 in the html and the ajax call, to the js messages file specifies using the utf-8 charset. Any ideas how to overcome this?
Just for completeness sake here is my English laguage messages in the file eng_messages.js:
var messages = {"information": { "mes_0": "this link will open in a new browser window", "mes_1": "This link will open in a new browser window", "mes_2": "Rollover image from left to right to rotate", "mes_3": "Loading tweets...", "mes_4": "Latest Tweets", "mes_5": "Click to view photo {val}", "mes_6": "Click to view 360", "mes_7": "Click to view video", "mes_8": "Click to view photo", "mes_9": "out of stock", "mes_10": "low stock", "mes_11": "click on a size below", "mes_12": "Sorry, this item is out of stock.", "mes_13": "Select Size: ", "mes_14": "Please wait", "mes_15": "Continue shopping", "mes_16": "{val} item(s) added to bag", "mes_17": "Size {val}", "mes_18": "{val} item(s) in your bag Subtotal: {currency}{val}", "mes_19": "s", "mes_20": "item", "mes_21": "You need to select a size before you can add this item to your bag." },"product_or_bundle": { "mes_0": "Rollover image to zoom.", "mes_1": "View large image", "mes_2": "Photo {val} of prod name", "mes_3": "Scroll up", "mes_4": "Scroll down", "mes_5": "View details of {val}", "mes_6": "Remove this item", "mes_7": "Remove", "mes_8": "Scroll left", "mes_9": "Scroll right", "mes_10": "Check Availability In Store:", "mes_11": "Outfit added to bag", "mes_12": "Click to view full details of this item" },"error": { "mes_0": "Sorry, an error occurred when trying to add your item. Please try again.", "mes_1": "Sorry, an error occurred when trying to add your items. Please try again.", "mes_2": "You need to select a size for each item before you can add the outfit to your bag." },"code": { "mes_0": "[View your bag] [Go to checkout] continue shopping button", "mes_1": "[View your bag] [Go to checkout]" }}and here are the German messages in a file called ger_messages.js:
var messages = {"information": { "mes_0": "Dieser Link wird in einem neuen Fenster öffnen", "mes_1": "Dieser Link wird in einem neuen Browser-Fenster geöffnet", "mes_2": "Rollover-Bild von links nach rechts zu drehen", "mes_3": "Loading tweets...", "mes_4": "Aktuelle Tweets", "mes_5": "Klicken Sie auf ein Foto, Blick {val}", "mes_6": "Klicken Sie auf 360 Ansicht", "mes_7": "Klicken Sie, um Video anzusehen", "mes_8": "Klicken Sie auf ein Foto, Blick", "mes_9": "ausverkauft", "mes_10": "Wenige Exemplare auf Lager", "mes_11": "Klicken Sie auf eine Größe unterhalb", "mes_12": "Leider ist der Artikel nicht auf Lager.", "mes_13": "Wählen Sie Größe:", "mes_14": "Bitte warten", "mes_15": "Einkauf fortsetzen", "mes_16": "{val} Artikel hinzugefügt Tasche", "mes_17": "Größe {val}", "mes_18": "{val} Artikel hinzugefügt Tasche Zwischensumme: £{val}", "mes_19": "s", "mes_20": "artikel", "mes_21": "Sie müssen eine Größe auswählen, bevor Sie diesen Artikel in Ihre Tasche hinzufügen können." },"product_or_bundle": { "mes_0": "Rollover-Bild zu vergrößern.", "mes_1": "Bild vergrößern", "mes_2": "Foto {val} von {val}", "mes_3": "Blättern Sie nach oben", "mes_4": "Blättern Sie nach unten", "mes_5": "Detailansicht der {val}", "mes_6": "Diesen Artikel entfernen", "mes_7": "Entfernen", "mes_8": "Blättern Sie nach links", "mes_9": "Blättern Sie nach rechts", "mes_10": "Überprüfen Sie die Verfügbarkeit im Shop:", "mes_11": "Outfit hinzugefügt Tasche", "mes_12": "Hier klicken vollständigen Details zu diesem Element anzuzeigen" },"error": { "mes_0": "Leider trat ein Fehler beim Versuch, Ihren Artikel hinzuzufügen. Bitte versuchen Sie es erneut.", "mes_1": "Leider trat ein Fehler beim Versuch, Ihre Elemente hinzuzufügen. Bitte versuchen Sie es erneut.", "mes_2": "Sie müssen eine Größe für jeden Artikel, bevor Sie das Outfit, Ihre Tasche hinzufügen möchten." },"code": { "mes_0": "[Sehen Sie Ihre Tasche] [Zur Kasse]-Taste weiter einkaufen", "mes_1": "[Sehen Sie Ihre Tasche] [Zur Kasse]" }}
in pure JS you are limited to crude branching on navigator.languagei do recommend to configure httpd to provide appropriate variant based on Accept-Language instead for making it "seamless"