ローカリゼーション

ウェブサイトのローカライゼーションをセットアップし、異なる言語で製品説明を追加することができます。これにより、顧客中心になり、ゲームへのロイヤルティが高まります。 次のローカライズを実行できます：

• 一般的なサイト要素。
• サイト上の製品説明。
• 画像。

サイトのローカライズ

ウェブサイトのインターフェイスをローカライズするには：

1. アドミンページでプロジェクトを開きます。
2. 「プロジェクト設定」をクリックします。
3. 「一般設定」ウィンドウで、サイトをローカライズしたい言語を選択します。
4. 「プロジェクト名」フィールドで、他の言語でローカライズされたプロジェクト名を指定します。
5. 「保存」をクリックします。
6. サイドメニューの「サイトビルダー」をクリックします。
7. サイトのカードで、「サイトビルダーを開く」をクリックします。
8. 「言語設定」セクションに移動し、必要な言語のスイッチを「オン」に設定します。
9. 言語選択ボタンをどこに配置するかを選択します。「言語選択位置」パネルで、「ヘッダー」または「フッター」を選択します。

ローカライゼーションを有効にすると、ウェブサイトのインターフェイスのすべての要素が選択した言語に翻訳されます。デフォルトでは、エクソーラによって準備されたテキストフィールドと翻訳が使用されます。デフォルトの翻訳を変更するには、テキストフィールドをダブルクリックし、独自のバージョンを入力します。

製品名と製品説明のローカライズ

サイトでの購入をローカライズするには（仮想アイテムなど）：

1. アドミンページでプロジェクトを開きます。
2. 「プロジェクト設定」をクリックします。
3. 「一般設定」ウィンドウで、サイトをローカライズしたい言語を選択します。
4. 「プロジェクト名」フィールドで、他の言語でローカライズされたプロジェクト名を指定します。
5. 「保存」をクリックします。
6. サイドメニューで「ストア」をクリックします。
7. 「仮想アイテム」モジュールで、「設定」または「接続」をクリックします。
8. ドロップダウンメニューから「アイテムを作成」を選択するか、既存のアイテムのコンテキストメニューから「アイテムを編集」をクリックします。
9. ローカライズを有効にしたすべての言語に、「アイテム名」と「説明」を追加します。

10. 「変更を保存」をクリックします。
11. サイドメニューの「サイトビルダー」をクリックします。
12. サイトのカードで、「サイトビルダーを開く」をクリックします。
13. 「言語設定」セクションに移動し、必要な言語のスイッチを「オン」に設定します。
14. 「ストア」セクションに移動し、ローカライズを設定するアイテムのグループを選択します。

画像のローカライズ

特定の言語で書かれたテキストを含む画像を、カスタムHTMLコードを使用してウェブサイトに追加することができます。既製のソリューションを使用するか、独自のコードを追加することができます。

既存ソリューションの使用例

1. アドミンページでプロジェクトを開きます。
2. サイドメニューで、「サイトビルダー」をクリックします。
3. サイトのカードで、「サイトビルダーを開く」をクリックします。
4. 「言語設定」セクションに移動し、必要な言語のスイッチを「オン」に設定します。
5. 「カスタムコード」ブロックに以下のコンテンツを追加します：

<div class="image-container">
  <img class="localised-image lazy loaded" data-src="https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/sitebuilder/71070/bc6d3c723c6381e85fbb929563922ecb.jpg" />
</div>

CSSセクションで：

.image-container {
  text-align: center;
  padding: 4em 1em;
}

.image-container img {
  width: 100%;
}

JavaScriptセクションで：

1. htmlLangパラメータでは、ローカライズされた画像を追加する言語を指定します。
2. localisedImage.dataset.srcパラメータでは、ローカライズされた画像へのリンクを指定します。

複数の言語をローカライズするには、必要なパラメーター値を持つJavaScriptコードフラグメントを複製してください。

const htmlLang = document.documentElement.lang;
const localisedImage = document.querySelector('.localised-image');
 if (htmlLang === 'es') {

   localisedImage.dataset.src = 'https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/sitebuilder/71070/bc6d3c723c6381e85fbb929563922ecb.jpg';
 }
 if (htmlLang === ‘it’) {

   localisedImage.dataset.src = 'https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/sitebuilder/71070/bc6d3c723c6381e85fbb929563922ecb.jpg';
 }

6. 「プレビュー」をクリックして変更を確認します。画像は「カスタムコード」ブロックで指定した言語のみにローカライズされます。

自分のコードを追加する

1. ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。

2. 独自のコードをブロックに挿入します。