Я как бы решил свою проблему получения и передачи собственных переменных. Вот код для простой тестовой страницы, которую я построил:
<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>
Проблема, с которой я сейчас сталкиваюсь, заключается в том, что иностранные языковые символы для французского и немецкого языков кажутся бессмыслицей. Это как-то связано с наборами символов, но я установил кодировку utf-8 в html и вызов ajax, чтобы файл сообщений js определял использование кодировки utf-8. Есть идеи как это побороть?
Просто для полноты излагаю мои сообщения на английском языке в файле 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]"
}
}
и вот немецкие сообщения в файле с именем 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]"
}
}