Changing the language of the text diplayed in a dynamic table

Ask the community
, ,
1

Hi,

On my Wix-site I have a dataset connected table for displaying different prices for house rental according to the time of year and the number of days a customer want to rent a specific house:

841×265 7.81 KB

This table is in Norwegian but my site is multilingual (Norwegian, English and German). I want to use some Velo-code to translate the table headings and the first (leftmost) column to English and German, depending on which language is chosen by the user.

I want to avoid creating a single dataset for each language. I am not familiar with JavaScript, but I have started some coding that may help show what I am trying to do:

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

$w . onReady ( function () {

**let**  language  =  wixWindow.multilingual.currentLanguage ; 
**if**  ( language  ===  "no" ) { 
    $w ( '#table1' ). rows [ 0 ][ "prisperiode" ] =  "Prisperiode" ;     
    } 
**else if**  ( language  ===  "en" ) { 
    $w ( '#table1' ). rows [ 0 ][ "prisperiode" ] =  "Price period" ; 
    } 
**else if**  ( language  ===  "de" ) { 
    $w ( '#table1' ). rows [ 0 ][ "prisperiode" ] =  "Preise im Zeitraum" ; 
}

})

I think this looks a bit hard coded. Maybe it is possible to change the content of the first row and the first column by using some sort of array?

Thanks!

2

So I can think of a few options, one is just cleaning up the code you shared a little to reduce some code

let language = wixWindow.multilingual.currentLanguage; 
let header = "Prisperiode"

if( language === "en"){
header = "Price Period"
}
else if (language ==="de"){
header = "Preise im Zeitraum"
}

$w('#table1').rows[0]["prisperiode"] = header

The other is perhaps to maintain different collections by language and just swap out the data reference for the table in code?

There may be other ideas around but that’s what came to mind first. Also, I would reach out to customer care and submit a feature request for this to be an OOTB functionality for multilingual so you wouldn’t have to do the manual translation in the future ideally

3

Thank you for your reply, AmandaM!

I adjusted my code according to your suggestion but it did not change the language in the table heading. The code was running fine, no errors in the log. I think the way the header text was assigned in the last line was the problem.

After some trial and error I achieved the functionality I wanted using this code:

let language = wixWindow.multilingual.currentLanguage
let header1 = $w ( “#table1” ). columns [ 0 ]. label
let header2 = $w ( “#table1” ). columns [ 1 ]. label
let header3 = $w ( “#table1” ). columns [ 2 ]. label
let header4 = $w ( “#table1” ). columns [ 3 ]. label

if ( language == “en” ) {
header1 = “Price period”
header2 = “Weekly price”
header3 = “Daily price for 7 days or more”
header4 = “Daily price for less than 7 days (minimum 2 days)”
}
else if ( language == “de” ) {
header1 = “Preise im Zeitraum”
header2 = “Wochenpreis”
header3 = “Tagespreis für 7 Tage und mehr”
header4 = “Tagespreis für weniger als 7 Tage (minimum 2 Tage)”
}

$w ( “#table1” ). columns = [
{
“id” : “col1” ,
“dataPath” : “prisperiode” ,
“label” : header1 ,
“type” : “string”
},
{
“id” : “col2” ,
“dataPath” : “vekespris” ,
“label” : header2 ,
“type” : “string”
},
{
“id” : “col3” ,
“dataPath” : “dagprisForMeirEnn7Dagar” ,
“label” : header3 ,
“type” : “string”
},
{
“id” : “col4” ,
“dataPath” : “dagprisForMindreEnn7DagarMinimum2Dagar” ,
“label” : header4 ,
“type” : “string”
}
]

I don’t think this is the most elegant way of doing it (by redefining the column arrays at the end) but it works for now. This solution allows me to only use one single collection for all three languages.

And yes: I strongly agree that multilingual collection tables should be an OOTB feature and I have now submitted my vote for this.