文章彙整

翻譯Magento PWA Venia的主題

Astral WebBy Astral Web 1 year agoNo Comments
首頁  /  Magento操作  /  Open Source  /  翻譯Magento PWA Venia的主題

1. 基礎翻譯

對於商家來說,針對來自不同國家和語言的顧客,支援不同語言是必須的。原因不用多說:更大的客戶群就意味著更多的商機。

有以上需求的Magento商家不用擔心語言支援會是一個麻煩:即使Venia / Magento PWA主題沒有提供拆開即用的國際包(也就是美式英語作為預設語言(en_US));但翻譯一個Venia網站是非常簡單的過程。以下我們就教你怎麼快速進行在Magento中進行前端語言的轉換與翻譯。

以搜尋按鈕為例,它位在任何Venia環境右上角,現在我們試著將它翻譯成西班牙文。

假設本地項目已全部配置完成的狀況下,步驟如下:

  1. 從Venia複製原始的en_US並將其貼入專案的根目錄中

    # cp project_root/node_modules/@magento/venia-ui/i18n  /local_project
  2. 使用以下格式,建立一個新的辭典:
    language-abreviation_country.json
    範例:
    es_MX.json
    zh_TW.json
  3. 用所需的翻譯語言更換英語內容;讓我們將es_MX使用於墨西哥西班牙語。
    範例:
    原始的:
    “searchTrigger.search”: “Search”翻譯的:
    “searchTrigger.search”: “Buscar”
  4. 重新編寫並重新啟用Venia(開發或正式模式都可以)。
    之後搜尋按鈕就會完全被翻譯成西班牙文。

2.客製翻譯/高級翻譯

當嘗試去翻譯新字詞或客製化翻譯時,你需要額外的步驟來翻譯這些新詞。

最簡單的程序如下:

  1. 增加一個新的id至本地根目錄項目的en_US.json和自定義的翻譯資料夾。Id可採用任何模式。
    範例:
    en_us.json:
    “menu.men”: “Men”

    custom.json:
    “menu.men”: “Hombres”
  2. 在程式碼中,需要進行以下更改來翻譯新的字詞。
    範例:

    import {FormattedMessage} from "react-intl";
    …
    …
    let trans = (
       <FormattedMessage
           id={'menu.men'}
           defaultMessage={'Men'}
       />
    );
    …
    
    // In this case “trans” is just a variable to hold the translation text result.

     

  3. 重新編寫及重新啟動Venia(開發或正式環境都可以)。


在此之後,客製的翻譯將會被使用在自定義id的每個元件中。

最後翻譯過程可能會需要更複雜的步驟,像是:API calls、coding等等,但上述的步驟涵蓋了大多數的情況使用。

請記得當後台伺服器啟用時需要盡快加入這些自定義的辭典,因為當後台使用多於一個不同於en_US的語言時,某些Venia的版本可能會需要自定義辭典來正常運行。

 

以上是有Magento PWA Venia主題的相關介紹,喜歡歐斯瑞文章的讀者們,想要掌握更多新知嗎?那就記得要追蹤歐斯瑞FB粉絲團IG,也別忘了訂閱我們電子報,就不會錯過囉!有任何問題也歡迎隨時與我們聯繫呦!

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  Open SourceAdobe Commerce前端開發Magento操作後端開發技術應用

留下回應

你的電子郵件地址不會被公開.