I’ve been using this code for every project now to translate dynamic words like months or days in Webflow.
Credits goes to i think @bart who gave the base of the code to @vincent
The way it works :
Simply add combo class classdate on any text block you want to translate.
Change the words in the code below if you to change de translation or add a new line you want to translate in monthsEn and the translation in monthsFr
Add the script bellow in the footer of your project.
Insert the following script on the footer code of the desired page (or even the whole project if needed):
<script>
function translateDate(o,n,l) {
let DateTime = luxon.DateTime
let x = document.getElementsByClassName("luxon");
let i;
for (i = 0; i < x.length; i++) {
x[i].innerText = DateTime.fromFormat(x[i].innerText, o).setLocale(l).toFormat(n);
}
}
Webflow.push(function() {
translateDate("LLL dd, yyyy","dd LLLL yyyy","fr")
});
</script>
Configure the script. The translateDate() function needs 3 arguments: old format (o), new format (n), locale (l). On the example below modify the following piece of code accordingly.
Add the class attribute “luxon” to the HTML element which contains the original date. Please note that the code replaces any text contained within that element, so please target one that only contains the date.
Publish your website. Note that it won’t display the translation within the designer.
Feel free to tweak the code, adjust it to your own needs! I didn’t need more than that, so I kept it to the bare minimums. The main advantage of that method is that it’s totally automatic and you can do fairly advanced manipulations.
Please don’t ask me why Webflow does not implement such a simple feature …
I’m trying to use that code with Finsweet’s CMS Load, but it’s not working.
Basically, the content that shows after clicking on the Load More button doesn’t translate.
Has anyone already had this problem?