{"_id":"560b63f42d00ca0d00a1fdbf","project":"55a6e72e8cc73e0d00096635","category":{"_id":"560b5cd0c341310d00de2a02","project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","__v":9,"pages":["560b629c3616ac17004f1ca3","560b63343bcbd80d0077d10a","560b637e5148ba0d009bd0d0","560b63c53616ac17004f1ca8","560b63dd5148ba0d009bd0d3","560b63f42d00ca0d00a1fdbf","560b64ee5148ba0d009bd0d5","5617054c7f74330d00dfd73c","561705cbbd70650d00977851"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-30T03:53:52.522Z","from_sync":false,"order":15,"slug":"internationalizationlocalization","title":"Internationalization/Localization"},"parentDoc":null,"user":"55a6caa022cfa321008e01d6","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":5,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-30T04:24:20.683Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":8,"body":"[block:html]\n{\n  \"html\": \"Here is an example based on this file within the Stencil default theme:<br>\\n\\n<span class=\\\"inline-code\\\">&lt;theme‑name&gt;/templates/components<b>/cart/shipping-estimator</b>.html</span><br>\\n\\n <br>\\n\\nIn the excerpt below, each highlighted <span class=\\\"inline-code\\\">{{lang...}}</span> statement is a Handlebars helper. Each of the statements abstracts the message indicated by its (English-language) key name, to enable internationalization of that message:<br>\\n\\n<p></p><pre>&lt;div class=\\\"shipping-estimator\\\" style=\\\"display: none;\\\"&gt;\\n    &lt;form class=\\\"estimator-form\\\"&gt;\\n      &lt;button class=\\\"shipping-estimate-hide\\\"&gt;{{lang 'cancel'}}&lt;/button&gt;\\n      &lt;select name=\\\"shipping-country\\\"&gt;\\n      &lt;option&gt;{{lang 'cart.shipping_estimator.select_a_country'}}&lt;/option&gt;\\n      {{#each countries}}\\n          &lt;option value=\\\"{{id}}\\\" {{#if selected}}selected=\\\"selected\\\"{{/if}}&gt;\\n                {{name}}\\n          &lt;/option&gt;\\n      {{/each}}\\n      &lt;/select&gt;\\n      &lt;select name=\\\"shipping-state\\\"&gt;\\n      &lt;option&gt;{{lang 'cart.shipping_estimator.select_a_state'}}&lt;/option&gt;\\n      {{#each states}}\\n          &lt;option value=\\\"{{id}}\\\" {{#if selected}}selected=\\\"selected\\\"{{/if}}&gt;\\n              {{name}}\\n          &lt;/option&gt;\\n      {{/each}}\\n      &lt;/select&gt;\\n      &lt;input type=\\\"text\\\" name=\\\"shipping-zip\\\" value=\\\"{{selected_zip}}\\\"&gt;\\n      &lt;button class=\\\"shipping-estimate-submit\\\"&gt;{{lang 'cart.shipping_estimator.estimate_shipping'}}\\n      &lt;/button&gt;\\n    &lt;/form&gt;\\n    &lt;div class=\\\"shipping-quotes\\\"&gt;&lt;/div&gt;\\n&lt;/div&gt;</pre>\\n\\n\\nIn the excerpts below, you can see that the default theme’s basic <span class=\\\"inline-code\\\">.../lang/en.json</span> file includes matches, and value definitions, for each of the translation keys in the Handlebars helpers above:<br>\\n\\n<p></p><pre>{\\n  \\\"header\\\": {\\n        \\\"welcome_back\\\": \\\"Welcome back, {name}\\\"\\n  },\\n  ...\\n      \\\"label\\\": \\\"Cart\\\",\\n        \\\"is_empty\\\": \\\"Your cart is empty\\\",\\n        \\\"coupon_code\\\": \\\"Coupon Code\\\",\\n        \\\"gift_certificate\\\": \\\"Gift Certificate\\\",\\n        \\\"freeshipping\\\": \\\"Free Shipping\\\",\\n        \\\"shipping_peritem\\\": \\\"Per Item Shipping\\\",\\n      \\\"shipping_estimator\\\": {\\n            \\\"add_info\\\": \\\"Add Info\\\",\\n          \\\"select_a_country\\\": \\\"Select a Country\\\",\\n          \\\"select_a_state\\\": \\\"Select a State\\\",\\n          \\\"estimate_shipping\\\": \\\"Estimate Shipping\\\"\\n      }\\n  },\\n  \\\"common\\\": {\\n        \\\"currency_converter\\\": \\\"Currency Converter\\\",\\n        \\\"newsletter_signup\\\": \\\"Sign up for our newsletter\\\",\\n        \\\"form_submit\\\": \\\"Submit\\\",\\n        \\\"required\\\": \\\"Required\\\",\\n        \\\"email_address\\\": \\\"Email Address\\\",\\n      \\\"edit\\\": \\\"Edit\\\",\\n      \\\"no\\\": \\\"No\\\",\\n      \\\"yes\\\": \\\"Yes\\\",\\n      \\\"cancel\\\": \\\"Cancel\\\",\\n      \\\"share\\\": \\\"Share\\\",\\n      \\\"delete\\\": \\\"Delete\\\",\\n      \\\"public\\\": \\\"Public\\\",\\n        \\\"private\\\": \\\"Private\\\",\\n        \\\"view_all\\\": \\\"View All\\\",\\n        \\\"paginator\\\": {\\n            \\\"page_of\\\": \\\"Page {current} of {total}\\\"\\n      },\\n      ...</pre>\\n\\n<p></p>Translation files for other languages would use the same format, to define these keys’ values in their respective languages.\"\n}\n[/block]","excerpt":"","slug":"implementation-example","type":"basic","title":"Implementation Example"}

Implementation Example


[block:html] { "html": "Here is an example based on this file within the Stencil default theme:<br>\n\n<span class=\"inline-code\">&lt;theme‑name&gt;/templates/components<b>/cart/shipping-estimator</b>.html</span><br>\n\n <br>\n\nIn the excerpt below, each highlighted <span class=\"inline-code\">{{lang...}}</span> statement is a Handlebars helper. Each of the statements abstracts the message indicated by its (English-language) key name, to enable internationalization of that message:<br>\n\n<p></p><pre>&lt;div class=\"shipping-estimator\" style=\"display: none;\"&gt;\n &lt;form class=\"estimator-form\"&gt;\n &lt;button class=\"shipping-estimate-hide\"&gt;{{lang 'cancel'}}&lt;/button&gt;\n &lt;select name=\"shipping-country\"&gt;\n &lt;option&gt;{{lang 'cart.shipping_estimator.select_a_country'}}&lt;/option&gt;\n {{#each countries}}\n &lt;option value=\"{{id}}\" {{#if selected}}selected=\"selected\"{{/if}}&gt;\n {{name}}\n &lt;/option&gt;\n {{/each}}\n &lt;/select&gt;\n &lt;select name=\"shipping-state\"&gt;\n &lt;option&gt;{{lang 'cart.shipping_estimator.select_a_state'}}&lt;/option&gt;\n {{#each states}}\n &lt;option value=\"{{id}}\" {{#if selected}}selected=\"selected\"{{/if}}&gt;\n {{name}}\n &lt;/option&gt;\n {{/each}}\n &lt;/select&gt;\n &lt;input type=\"text\" name=\"shipping-zip\" value=\"{{selected_zip}}\"&gt;\n &lt;button class=\"shipping-estimate-submit\"&gt;{{lang 'cart.shipping_estimator.estimate_shipping'}}\n &lt;/button&gt;\n &lt;/form&gt;\n &lt;div class=\"shipping-quotes\"&gt;&lt;/div&gt;\n&lt;/div&gt;</pre>\n\n\nIn the excerpts below, you can see that the default theme’s basic <span class=\"inline-code\">.../lang/en.json</span> file includes matches, and value definitions, for each of the translation keys in the Handlebars helpers above:<br>\n\n<p></p><pre>{\n \"header\": {\n \"welcome_back\": \"Welcome back, {name}\"\n },\n ...\n \"label\": \"Cart\",\n \"is_empty\": \"Your cart is empty\",\n \"coupon_code\": \"Coupon Code\",\n \"gift_certificate\": \"Gift Certificate\",\n \"freeshipping\": \"Free Shipping\",\n \"shipping_peritem\": \"Per Item Shipping\",\n \"shipping_estimator\": {\n \"add_info\": \"Add Info\",\n \"select_a_country\": \"Select a Country\",\n \"select_a_state\": \"Select a State\",\n \"estimate_shipping\": \"Estimate Shipping\"\n }\n },\n \"common\": {\n \"currency_converter\": \"Currency Converter\",\n \"newsletter_signup\": \"Sign up for our newsletter\",\n \"form_submit\": \"Submit\",\n \"required\": \"Required\",\n \"email_address\": \"Email Address\",\n \"edit\": \"Edit\",\n \"no\": \"No\",\n \"yes\": \"Yes\",\n \"cancel\": \"Cancel\",\n \"share\": \"Share\",\n \"delete\": \"Delete\",\n \"public\": \"Public\",\n \"private\": \"Private\",\n \"view_all\": \"View All\",\n \"paginator\": {\n \"page_of\": \"Page {current} of {total}\"\n },\n ...</pre>\n\n<p></p>Translation files for other languages would use the same format, to define these keys’ values in their respective languages." } [/block]