Localisation

Localisez votre site Web et ajoutez-y des descriptions de produits dans différentes langues afin de mieux répondre aux attentes des joueurs et de les fidéliser. Vous pouvez effectuer la localisation pour :

• Éléments généraux du site ;
• Description des produits sur le site ;
• Images.

Localisation du site

Pour localiser l’interface du site Web :

1. Ouvrez le projet dans le Compte éditeur.
2. Cliquez sur Project Settings.
3. Dans la fenêtre General Settings, sélectionnez les langues dans lesquelles vous souhaitez localiser le site.
4. Dans le champ Project Name, spécifiez le nom du projet localisé dans d’autres langues.
5. Cliquez sur Save.
6. Dans le menu latéral, cliquez sur Site Builder.
7. Dans la carte de votre site, cliquez sur Open Site Builder.
8. Accédez à la section Language Settings et réglez les bascules pour les langues requises sur On.
9. Choisissez l’emplacement du bouton de sélection de langue. Dans le panneau Language selector position, sélectionnez Header et/ou Footer.

Après avoir activé la localisation, tous les éléments de l’interface du site Web seront traduits dans les langues sélectionnées. Par défaut, les champs de texte et les traductions préparés par Xsolla sont utilisés. Pour modifier les traductions par défaut, double-cliquez sur le champ de texte et saisissez votre propre version.

Localisation des noms et des descriptions de produits

Pour localiser les achats sur le site (par exemple, les objets virtuels) :

1. Ouvrez le projet dans le Compte éditeur.
2. Cliquez sur Project Settings.
3. Dans la fenêtre General Settings, sélectionnez les langues dans lesquelles vous souhaitez localiser le site.
4. Dans le champ Project Name, spécifiez le nom du projet localisé dans d’autres langues.
5. Cliquez sur Save.
6. Dans le menu latéral, cliquez sur Store.
7. Dans le module Virtual Items, cliquez sur Configure ou Connect.
8. Dans le menu déroulant, sélectionnez Create Item ou cliquez sur Edit Item dans le menu contextuel d’un objet existant.
9. Spécifiez Item name et Description dans toutes les langues pour lesquelles vous avez activé la localisation.

10. Cliquez sur Save changes.
11. Dans le menu latéral, cliquez sur Site Builder.
12. Dans la carte de votre site, cliquez sur Open Site Builder.
13. Accédez à la section Language Settings et réglez les bascules pour les langues requises sur On.
14. Accédez à la section Store et sélectionnez le groupe d'objets pour lesquels la localisation est configurée.

Localisation des images

Pour intégrer une image à votre site Web avec du texte dans une langue spécifique, utilisez un code HTML personnalisé. Vous pouvez recourir à une solution prête à l’emploi ou ajouter votre propre code.

Exemple d'utilisation d'une solution existante

1. Ouvrez le projet dans le Compte éditeur.
2. Dans le menu latéral, cliquez sur Site Builder.
3. Dans la carte de votre site, cliquez sur Open Site Builder.
4. Accédez à la section Language Settings et réglez les bascules pour les langues requises sur On.
5. Ajoutez le contenu suivant au bloc Custom Code :

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

Dans la section CSS :

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

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

Dans la section JavaScript :

1. Dans le paramètre htmlLang, spécifiez la langue pour laquelle vous ajoutez l'image localisée.
2. Dans le paramètre localisedImage.dataset.src, spécifiez le lien vers l'image localisée.

Pour ajouter plusieurs langues de localisation, dupliquez les fragments de code JavaScript avec les valeurs de paramètres nécessaires.

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. Cliquez sur Preview pour voir les modifications. L'image sera localisée uniquement pour les langues que vous avez spécifiées dans le bloc Custom Code.

Ajouter votre propre code

1. Dans le constructeur, cliquez sur Add block et sélectionnez Custom code.

2. Insérez votre propre code dans le bloc.