Question:
I made a dynamic page and I want to add two languages. How can I implement the correct text when I switch to another language. Can Anyone help me with this?
Product:
Wix Studio
What are you trying to achieve:
A Dynamic page with two languages where I can swap a bio to the bio in that language.
What have you already tried:
I have added two columns, one with the text in Dutch and one in English. I changed the page to English, but when I swapped the input and switched back to Dutch the text stayed English. I did find someone who mentioned that you can add a query to Wix to change the language, but I didnât understand how I could do this. Can someone explain this to me step by step?
Please add this code to dynamic item page,Ensure your dynamic page is connected to the correct datase.Replace #bioTextElement with the ID of the text element displaying the bio.This code retrieves the dynamic itemâs data, detects the active language, and displays the corresponding text.Use the language switcher on your site to toggle between languages. you donât need to query data just use getcurrentItem() from the dataset as we have dynamic page.
import wixLocation from âwix-locationâ;
import wixData from âwix-dataâ;
$w.onReady(function () {
// Get the current language from the URL
const currentLang = wixLocation.path[0]; // Example: âenâ or ânlâ
// Retrieve dynamic item data
const dynamicDataset = $w('#dynamicDataset');
dynamicDataset.onReady(() => {
const itemData = dynamicDataset.getCurrentItem();
// Switch content based on the current language
let bioText;
if (currentLang === 'nl') {
bioText = itemData.bio_dutch;
} else if (currentLang === 'en') {
bioText = itemData.bio_english;
} else {
bioText = itemData.bio_english; // Default to English
}
// Update the page content
$w('#bioTextElement').text = bioText;
});
});
Thank you! I will give it a try!
As far as I know Wix Multilingual has a CMS integration, so extra fields are probably not a good solution, check the dashboard multilingual page to translate CMS records
I donât think it is integrated for dynamic pages, unfortunately.
Could you please explain where and how I should add this code? Iâm very new to coding with Wix. Thank you!
If you have added the item dynamic page. turn on the dev mode. place the code bottom of the page, try to test it,
if you need further help please reach out to me!
Thank you for your help!
Iâve added the code, but the text is not showing yet. Not sure what Iâm doing wrong.
I changed the name of the (â#bioTextElementâ) and I changed the itemData to the names in my dynamic page tap I want to load into the text area.
The code does seem to run, but the text area remains empty.
This is the code I am using now:
import wixLocation from âwix-locationâ;
import wixData from âwix-dataâ;
$w.onReady(function () {
// Get the current language from the URL
const currentLang = wixLocation.path[0]; // Example: âenâ or ânlâ
// Retrieve dynamic item data
const dynamicDataset = $w(â#dynamicDatasetâ);
dynamicDataset.onReady(() => {
const itemData = dynamicDataset.getCurrentItem();
// Switch content based on the current language
let bioText;
if (currentLang === 'NL') {
bioText = itemData.biografieNl;
} else if (currentLang === 'EN') {
bioText = itemData.biografieEng;
} else {
bioText = itemData.biografieEng; // Default to English
}
// Update the page content
$w('#bio').text = bioText;
});
});
The dynamicDataSet has an collection, should I add this to the code somewhere?
I need to know whatâs the type of text field in the databse?
It is a short text of a view lines
Please do share the screenshot for the database so i can get you better!
1 Like
Field type is text.
and the field ID is: biografieNl and biografieEng
I would like the text box on the site to display Biografie NL on the Dutch page, And Biografie ENG on the English page
I have updated the code upon your request:
Make sure that your dataset (#dynamicDataset) is connected to your page and that it has the fields biografieNl and biografieEng.
Verify that the text element (#bio) has the correct ID on your page and matches what youâre using in the code. If you donât get it right then i would need to check it in the editor
import wixLocation from âwix-locationâ;
import wixData from âwix-dataâ;
$w.onReady(function () {
// Get the current language from the URL path (e.g., â/enâ or â/nlâ)
const currentLang = wixLocation.path[0]; // This should return âenâ for English or ânlâ for Dutch
// Access the dynamic dataset
const dynamicDataset = $w('#dynamicDataset');
dynamicDataset.onReady(() => {
const itemData = dynamicDataset.getCurrentItem();
// Check if itemData is valid
if (itemData) {
let bioText;
// Switch content based on the current language
if (currentLang === 'nl') {
bioText = itemData.biografieNl; // Display Dutch biography
} else if (currentLang === 'en') {
bioText = itemData.biografieEng; // Display English biography
} else {
bioText = itemData.biografieEng; // Fallback to English if language is not recognized
}
// Update the text box with the appropriate biography
if (bioText) {
$w('#bio').text = bioText;
} else {
$w('#bio').text = "Content not available."; // Fallback text if no content is found
}
} else {
console.log('Item data is not available.');
}
});
});
Now it shows that âContent not availableâ⌠So the connection works but I cant load the correct data it seems. Can you help me with this?
Please add collabrator to your site so i can check and sort this out. As soon as possible i can.
technicalguydesigns@gmail.com
