2011-05-20 63 views
6

chúng tôi đang tạo phiên bản quốc tế của cửa hàng trực tuyến và tôi đã được giao nhiệm vụ gỡ rối tất cả các thông báo lỗi javascript, vì vậy chúng xuất hiện bằng ngôn ngữ có liên quan trên trang web đó.Nhiều thông báo lỗi ngôn ngữ trong javascript

Điều tôi rõ ràng muốn làm là giữ cùng một bộ javascript cho tất cả các trang web, nhưng chỉ tải trong tập hợp các thông báo lỗi từ tệp văn bản tiếng Đức/tiếng Pháp/tiếng Ý chẳng hạn. Tôi nghĩ rằng điều này có thể có thể làm với các tập tin json riêng biệt mà chỉ giữ một tập hợp các thông báo lỗi văn bản đơn giản.

Có ai có thể đề xuất giải pháp dễ dàng và dễ mở rộng nhất cho vấn đề này không? Cảm ơn.

+0

@ Paul , nếu bạn định nhấn mạnh vào các thẻ đó, làm thế nào để đảm bảo rằng chúng nằm trên các câu hỏi thực sự về các tiêu chuẩn liên quan? – Charles

Trả lời

-1

trong JS tinh khiết bạn được giới hạn thô nhánh trên navigator.language tôi khuyên bạn nên để cấu hình httpd để cung cấp biến thể thích hợp dựa trên Accept-Language thay vì để làm cho nó "liền mạch"

7

Một lựa chọn mà bạn có là để tạo ra các file ngôn ngữ Javascript và bao gồm một quyền ngay trước tệp Javascript của bạn. Ở phía máy chủ, ngôn ngữ đã chọn được biết, vì vậy có thể dễ dàng bao gồm đúng tệp. Trong tệp ngôn ngữ, bạn xác định các biến có thể được sử dụng trong mã của bạn.

Cái gì như:

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

lang_en.js có thể là bất cứ điều gì lang_de.js hay, máy chủ quyết định.

Trong các tập tin ngôn ngữ bạn có một cái gì đó tương tự (đơn giản hóa, công cụ toàn cầu, chỉ muốn thể hiện ý tưởng):

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

Và trong Javascript chính của bạn tập tin bạn chỉ có thể làm:

alert(lang.ARE_YOU_SURE); 
+1

Giải pháp mẫu! Tôi thích nó, nó phù hợp nhất với mã của tôi. Sự khác biệt duy nhất là tôi đã sử dụng một tệp json thay vì js. – rodrigorf

1

tôi đã giải quyết được vấn đề của mình về cách truy xuất thư và chuyển các biến của chính mình. Đây là mã cho một trang thử nghiệm đơn giản mà tôi đã xây dựng:

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

Vấn đề hiện tại là các ký tự laguage nước ngoài cho tiếng Pháp và tiếng Đức đang phát ra vô nghĩa. Nó là một cái gì đó để làm với bộ ký tự, nhưng tôi đã đặt bộ ký tự để utf-8 trong html và cuộc gọi ajax, đến tệp tin js chỉ định bằng cách sử dụng bộ ký tự utf-8. Bất kỳ ý tưởng làm thế nào để vượt qua điều này?

Chỉ cần cho đầy đủ vì đây là thông điệp laguage tiếng Anh của tôi trong eng_messages.js file:

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

và đây là những thông điệp của Đức trong một tập tin gọi là 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]"      
         } 
} 
Các vấn đề liên quan