Localisation

Localisez votre site Web et ajoutez-y des descriptions d’objets 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 objets sur le site ;
• Images.

Localisation du site

Pour localiser l’interface du site Web :

1. Ouvrez le projet dans le Compte éditeur.
2. Appuyez 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. Appuyez sur Save.
6. Dans le menu latéral, appuyez sur Storefronts > Websites.
7. Dans la carte du site, appuyez 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 descriptions d'objets

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

1. Ouvrez le projet dans le Compte éditeur.
2. Appuyez 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. Appuyez sur Save.
6. Accédez à la section Items catalog > Virtual items.
7. Dans le menu déroulant, sélectionnez Create Item ou appuyez sur Edit Item dans le menu contextuel d’un objet existant.
8. Ajoutez le Nom d’objet et la Description dans toutes les langues pour lesquelles vous avez activé la localisation.

9. Appuyez sur Save changes.
10. Dans le menu latéral, appuyez sur Storefronts > Websites.
11. Dans la carte de du site, appuyez sur Open Site Builder.
12. Accédez à la section Language Settings et réglez les bascules pour les langues requises sur On.
13. 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 et accédez à la section Storefronts > Websites.
2. Dans la carte du site, appuyez sur Open Site Builder.
3. Accédez à la section Language settings et réglez les bascules pour les langues requises sur On.
4. Ajoutez le contenu suivant au bloc Custom Code :

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

Dans la section CSS :

1.image-container {
2  text-align: center;
3  padding: 4em 1em;
4}
5
6.image-container img {
7  width: 100%;
8}

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.

 1const htmlLang = document.documentElement.lang;
 2const localisedImage = document.querySelector('.localised-image');
 3 if (htmlLang === 'es') {
 4
 5   localisedImage.dataset.src = 'https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/sitebuilder/71070/bc6d3c723c6381e85fbb929563922ecb.jpg';
 6 }
 7 if (htmlLang === ‘it’) {
 8
 9   localisedImage.dataset.src = 'https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/sitebuilder/71070/bc6d3c723c6381e85fbb929563922ecb.jpg';
10 }

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

Liens utiles