Langues & localisation

Découvrez comment ajouter plusieurs langues au sein de votre projet.

PandaSuite ne traduit pas automatiquement votre contenu, mais l’outil facilite grandement l’intégration de votre contenu en plusieurs langues.

PandaSuite gère les langues à deux niveaux complémentaires :

• Interface statique : textes, images et vidéos placés directement dans les écrans. Vous éditez chaque élément langue par langue depuis l’éditeur.
• Données dynamiques (Datastore) : contenu piloté par des collections (catalogue, articles, points d’intérêt…). Le Datastore génère automatiquement une version par langue pour chaque propriété de type Texte.

Selon votre projet, vous utiliserez l’un, l’autre, ou les deux combinés.

Approche 1 : Interface statique (éléments manuels)

Cette approche couvre tous les contenus placés directement dans vos écrans : textes saisis manuellement, images, vidéos, propriétés de composants.

Ajouter une langue

Par défaut, votre projet est construit en une seule langue. Avant d’éditer les contenus dans une autre langue, il est nécessaire d’ajouter cette langue dans votre projet.

Voici les étapes pour ajouter la nouvelle langue :

1. Rendez-vous dans les propriétés du Projet.
2. Dans la section Langues, cliquez sur + Ajouter.
3. Déclarez la langue initiale du projet, celle dans laquelle vous avez travaillé jusqu’à présent.

4. Ajoutez une ou plusieurs autres langues. Vous pouvez ajouter autant de langues que nécessaire.
5. Utilisez l’icône punaise pour définir la langue par défaut, celle qui s’appliquera automatiquement à l’ouverture du projet.

Éditer une langue

Lorsque vous souhaitez modifier une langue spécifique :

1. Cliquez sur le drapeau situé en bas à droite de votre espace de travail.
2. Sélectionnez le drapeau correspondant à la langue souhaitée.

Vous pouvez modifier :

• Les textes, images, contenus audios/vidéos (Lecteur Vidéo et Vidéo plein écran). Assurez-vous que les images respectent le même ratio pour éviter toute distorsion.
• Les propriétés spécifiques de certains composants comme le composant URL Media Player ou le composant Web (exemple : modifier une URL par langue). Il n’est pas encore possible de changer les actions (par exemple, Ouvrir une URL externe) par langue, mais vous pouvez ajouter un data binding sur cette URL vers une variable par langue.
• L’affichage dynamique grâce au composant Flexbox qui ajuste la taille d’un bloc selon la langue.

Limites : la mise en page de référence est celle de la langue initiale. Il n’est donc pas possible de modifier la mise en page pour une langue spécifique. Modifier la taille d’un bloc pour une langue spécifique impacte toutes les autres versions.

Créer un menu de changement de langue

Vous pouvez personnaliser le menu de changement de langue :

• Sélectionnez l’élément déclencheur (drapeaux, FR/EN, etc.)
• Ajoutez une nouvelle action.
• Sélectionnez l’action Changer de langue et définissez la langue souhaitée.

Votre application s’adaptera automatiquement.

Localisation automatique selon la langue de l’appareil

Vous pouvez synchroniser votre application avec la langue de l’appareil de l’utilisateur.

Voici comment procéder :

• Ajoutez un composant Condition et créez une condition par langue
• Activez l’option Évaluation automatique pour que la condition soit automatiquement évaluée
• Dans le champ Si, choisissez la donnée Projet > Context > locale, puis utilisez la fonction Débute par.
• Définissez la valeur de la langue souhaitée (par exemple, “fr” pour le français, “en” pour l’anglais, etc.). Pour connaître le code correspondant à la langue : Language designators with region
• Définissez une action : si la condition est remplie (c’est-à-dire si la langue de l’appareil correspond à la valeur définie), utilisez l’action Changer de langue et sélectionnez la langue appropriée.
• Répétez ces étapes pour chaque langue intégrée.

Localisation automatique selon un paramètre de l’URL

Il est possible de définir la langue de l’application via un paramètre d’URL.

Ajouter un paramètre pour la langue dans les propriétés du projet

1. Accédez aux propriétés de votre projet et ajoutez un paramètre personnalisé nommé lang.
2. Définissez une valeur par défaut (par exemple, fr pour le français).

Créer une condition pour évaluer le paramètre lang

1. Ajoutez un composant Condition au niveau du projet.
2. Configurez une condition pour vérifier la valeur du paramètre lang.

Configurer l’action de changement de langue

1. Dans le champ Si, sélectionnez la donnée Projet > Contexte > Launch > Parameter(s) > lang.
2. Ajoutez une règle pour évaluer la valeur du paramètre (par exemple, lang = en pour l’anglais).
3. Définissez l’action Changer de langue

Répéter pour chaque langue prise en charge

Reproduisez les étapes précédentes pour chaque langue de votre projet en ajoutant une condition spécifique pour chacune.

Approche 2 : Données dynamiques (Datastore)

Pour le contenu piloté par des collections — catalogues, articles, points d’intérêt, fiches produits — le Datastore offre une gestion CMS intégrée des traductions.

Comment ça fonctionne

Les langues du Datastore sont indépendantes des langues de l’interface : elles doivent être ajoutées séparément, directement dans le Datastore.

Dans votre Datastore, ajoutez les langues souhaitées. Pour chaque propriété de type Texte, une entrée par langue devient alors disponible. Par exemple, une propriété titre peut être renseignée en français, en anglais, en allemand, etc.

Renseignez les traductions pour chaque élément de la collection. Lorsque l’utilisateur change de langue dans l’application, les Collection / Liste et les liaisons de données affichent automatiquement la version correspondante — sans aucune action supplémentaire de votre part.

Quand utiliser cette approche

• Votre contenu est structuré en collection (catalogue, base d’articles, POI…).
• Les traductions sont mises à jour régulièrement.
• Vous souhaitez centraliser toutes les traductions dans un seul endroit, sans modifier les écrans.

Avec une source externe (Airtable, API…)

Si vos données proviennent d’une source externe, gérez les traductions directement à la source (par exemple des colonnes titre_fr et titre_en dans Airtable). Utilisez ensuite le composant Transform pour exposer la bonne valeur selon la langue active, en vous appuyant sur la donnée Projet > Contexte > locale.