2011-05-20 26 views
6

Çoklu dil hata mesajları, çevrimiçi mağazamızın uluslararası sürümlerini oluşturuyoruz ve tüm javascript hata iletilerini çözme işiyle görevlendirildim, böylece bu sitede ilgili dilde görünüyorlar.javascript

Açıkçası yapmak istediğim, tüm siteler için aynı javascript kümesini tutmaktır, ancak örneğin bir almanca/fransızca/italyanca dil metin dosyasından birtakım hata mesajlarını yüklemeniz yeterlidir. Bunun sadece bir dizi düz metin hata mesajını tutan ayrı json dosyaları ile yapılmasının mümkün olabileceğini düşündüm.

Herkes bu sorunun en kolay ve en ölçeklenebilir çözümünü önerebilir mi? Teşekkürler. Saf JS

+0

@ Paul Eğer bu etiketlerde ısrar edecekseniz, gerçekte ilgili standartlarla ilgili sorular üzerinde nasıl emin olunur? – Charles

cevap

-1

i bunun yerine "kesintisiz" Sahip

7

Seçeneklerden biri JavaScript dil dosyaları oluşturmaktır yapmak için Accept-Language göre uygun çeşidini sağlamak üzere httpd yapılandırmak için tavsiye edersiniz navigator.language üzerinde dallanma ham sınırlıdır ve Javascript dosyanızdan önce doğru olanı ekleyin. Sunucu tarafında, seçilen dil bilinir, bu yüzden doğru dosya kolayca dahil edilebilir. Dil dosyasında kodunuzda kullanılabilecek değişkenleri tanımlarsınız. gibi

şey:

<script type="text/javascript" src="lang_en.js" /> 
<script type="text/javascript" src="yourjavascript.js" /> 

lang_en.js ya lang_de.js veya herhangi bir şey olabilir, sunucu karar verir. Eğer böyle bir şey var dil dosyalarında

(basitleştirilmiş, küresel şeyler, sadece fikir göstermek istiyorum):

var lang = { 
    ARE_YOU_SURE : 'Are you sure?', 
    ... 
}; 

Ve ana JavaScript

sadece yapabilirsiniz dosyası:

alert(lang.ARE_YOU_SURE); 
+1

Simples çözümü! Bunu beğendim, kodum için en uygun şeydi. Tek fark, js yerine bir json dosyası kullanmış olmasıdır. – rodrigorf

1

Mesajları nasıl alacağımı ve kendi değişkenlerimi nasıl değiştireceğimi sorunum çözdüm. İşte ben yerleşik basit bir test sayfasına kod şudur:

<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> 

ben şimdi yaşıyorum sorun Fransızca ve Almanca yabancı Dili Atatürk karakterler saçma olarak çıkan olmasıdır. Bu karakter kümeleri ile ilgili bir şey, ama ben utf-8 karakter kümesini kullanarak js iletileri dosyaya, html ve ajax çağrısı utf-8 için küme ayarladım. Bunun üstesinden gelmek için herhangi bir fikrin var mı?

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]"       
         } 
} 

ve burada bir dosya adı verilen ger_messages.js Alman mesajlarıdır: Sadece burada bütünlüğü uğruna

dosya eng_messages.js benim İngilizce Dili Atatürk mesajlar olduğunu

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]"      
         } 
}