Language of the nuvo importer
languageβ
Type | "en" , "de" , "es" , "pt" , "pl" , "fr" , "it" , "nl' , "sv" , "no" , "cz" , "dk" , "hu" , "lt" , "ru" , "sk" , or "zh" |
Default | en |
Description | This feature enables you to choose the default language for the nuvo Importer, which can be tailored to your particular requirements. Additionally, you have the option to switch languages dynamically before initializing the importer. We currently offer support for a variety of languages, including English (en), German (de), Spanish (es), Portuguese (pt), Polish (pl), French (fr), Italian (it), Dutch (nl), Swedish (sv), Norwegian (no), Slovak (sk), Czech (cz), Danish (dk), Hungarian (hu), Lithuanian (lt), Russian (ru), and Chinese (zh). |
Below, you can see an example of how to use it.
- React
- Angular
- Vue
- JavaScript
<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "product_data",
language: "de",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
}}
/>
licenseKey!: string
settings!: SettingsAPI;
ngOnInit(): void {
this.licenseKey = "Your License Key"
this.settings = {
developerMode: true,
identifier: "product_data",
language: "de",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
]
};
}
export default {
name: "App",
components: {
NuvoImporter,
},
setup() {
const settings = {
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
language: "de",
};
return { settings };
},
data: () => {
return {
licenseKey: "Your License Key",
};
},
};
Our vanilla JS syntax has changed since v2.9. If you use v2.8 or lower, please migrate to the latest version by following our migration guide.
<div class="nuvo-container" />
<script type="module">
import { launchNuvoImporter } from "nuvo-vanilla-js";
launchNuvoImporter(".nuvo-container", {
licenseKey: "Your License Key",
settings: {
developerMode: true,
identifier: "product_data",
language: "de",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
},
});
</script>
i18nOverridesβ
The i18nOverrides
feature in the NuvoImporter
enables you to customize the application's default language keys according to your unique requirements. You can override the language keys for each language by using the i18nOverrides
option in the settings
of the NuvoImporter
.
Below, you can see an example of how to use it.
- React
- Angular
- Vue
- JavaScript
<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "product_data",
i18nOverrides: {
txt_page_upload_desc: "Hi there π",
},
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
}}
/>
licenseKey!: string
settings!: SettingsAPI;
ngOnInit(): void {
this.licenseKey = "Your License Key"
this.settings = {
developerMode: true,
identifier: "product_data",
i18nOverrides: {
"txt_page_upload_desc": "Hi there π"
}
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
]
};
}
export default {
name: "App",
components: {
NuvoImporter,
},
setup() {
const settings = {
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
i18nOverrides: {
txt_page_upload_desc: "Hi there π",
},
};
return { settings };
},
data: () => {
return {
licenseKey: "Your License Key",
};
},
};
Our vanilla JS syntax has changed since v2.9. If you use v2.8 or lower, please migrate to the latest version by following our migration guide.
<div class="nuvo-container" />
<script type="module">
import { launchNuvoImporter } from "nuvo-vanilla-js";
launchNuvoImporter(".nuvo-container", {
licenseKey: "Your License Key",
settings: {
developerMode: true,
identifier: "product_data",
i18nOverrides: {
txt_page_upload_desc: "Hi there π",
},
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
},
});
</script>
Dynamic overwrite with variablesβ
The i18n overwrites functionality allows you to define translation keys either statically or dynamically. In the case of dynamic keys, you can insert variables into the key values. For example, if you have the user's name stored in the userName variable, you can personalize the title of the upload page in your importer by dynamically adding the user's name. Use the following code snippet to achieve this:
i18nOverrides: {
"txt_upload_data": `Welcome to our importer, ${userName}!`
}
Additionally, you can modify the value of the variable within the cleaning functions to dynamically change the i18n overwrite during the importing process. You can find an example sandbox here.
Add title & description to "Match Columns" & "Review Entries" stepβ
The nuvo importer offers optional i18n keys that are initially empty. If you want to add a title and/or a description text to the "Match Columns" or "Review Entries" steps, you can define the following four keys. By using the provided code snippet, you can modify these keys and observe how the UI changes in the mapping and review steps of our importer.
i18nOverrides: {
"txt_match_column": "I am a title",
"txt_match_column_description": "I am a description text",
"txt_review_entries": "I am a title",
"txt_review_entries_description": "I am a description text"
}
This code snippet allows you to customize the text displayed in the title and description sections of the "Match Columns" and "Review Entries" steps. Feel free to adjust the values as needed to suit your requirements.
Multilingual applicationβ
The i18nOverrides
feature also works with multilingual applications. You can easily customize the language keys for each language, ensuring a consistent user experience across all languages.
Here is an example of how to use i18nOverrides
inside a multilingual application:
i18nOverrides: {
"de": {
"txt_upload_data": "Hochladen",
"txt_allow_data_type": "Datei zum Hochladen hierher ziehen",
"txt_select_files": "Datei auswΓ€hlen"
},
"en": {
"txt_upload_data": "Upload",
"txt_allow_data_type": "Drop your file here",
"txt_select_files": "Select file"
},
"es": {
"txt_upload_data":"Subir",
"txt_allow_data_type":".xls, .xlsx, .csv, .xml y .json archivo aceptado.",
"txt_select_files":"Seleccione Archivo"
}
}
In the example code above, we have defined i18n overrides for English (en), German (de), and Spanish (es). By following the same pattern, you can easily add more language overrides to meet your specific needs.
It's worth noting that the overrides will automatically be applied to the default language defined in the settings
of the NuvoImporter
. This means that any language key that is not overridden will be displayed in the default language. With this level of customization, you can ensure a consistent and tailored user experience for all users, regardless of their language preferences.
i18n keysβ
To help you finding the correct i18n keys faster, you can take a look at our default translation templates below:
Translations | Download |
---|---|
English (en) | download |
German (de) | download |
Dutch (nl) | download |
Italian (it) | download |
Swedish (sv) | download |
Portuguese (pt) | download |
Polish (pl) | download |
French (fr) | download |
Spanish (es) | download |
Russian (ru) | download |
Lithuanian (lt) | download |
Hungarian (hu) | download |
Danish (dk) | download |
Czech (cz) | download |
Slovak (sk) | download |
Norwegian (no) | download |
Chinese (zh) | download |
If you have any questions or your language still needs to be included inside the language property, please get in touch with us at [email protected].