Multilingual website: translating the blog items such as "Read more", "next", "previous", and month dates

Site URL: https://lifelab.world/en/home

Hello everyone,

I need some help on the blog page as there are some words that are not translated. I am on a SS 7.0 business plan. I used bradgood tutorial in creating a multilingual site.  

I have been trying to follow other threads and solutions here on SS forum, but none seem to work on my end:

I tried using this script for the blog dates but it does not change. I changed the "New Date" for the German translation.

This code is from tuanphan from forum thread: 

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('time.blog-meta-item--date span').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

I also used this script to translate the "read more" but it did not work. This is from tuanphan as well. From this forum thread: 

<script>
$('body.body-et .blog-more-link:contains("Read More")').text('Mehr lesen'); 
</script>

Am I doing anything wrong? I tried my best to do further research, but I failed. I am seeking for your kind assistance. 

Thank you in advance!

Can you share link to some pages where we can see these text?

Hi @tuanphan,

My apologies for not providing more details. 😞
 
Here is the link for the main blog section:
https://lifelab.world/de/blog

Here is an example of one blog page indicating dates below the title and the "previous" and "next" on the bottom part of the blog:

https://lifelab.world/de/blog/was-eine-geschftspartnerschaft-ausmacht-ein-interview-mit-unseren-mitbegrndern

I have attached the screenshots of these as well. I hope it does not get translated in the English version. 

Thank you again. 😊

On 2/22/2022 at 4:26 PM, Naomi-lifelab said:

Hi @tuanphan,

My apologies for not providing more details. 😞
 
Here is the link for the main blog section:
https://lifelab.world/de/blog

 

Here is an example of one blog page indicating dates below the title and the "previous" and "next" on the bottom part of the blog:

https://lifelab.world/de/blog/was-eine-geschftspartnerschaft-ausmacht-ein-interview-mit-unseren-mitbegrndern

I have attached the screenshots of these as well. I hope it does not get translated in the English version. 

Thank you again. 😊

With previous/next, add this to Design > Custom CSS

a.lang-de.BlogItem-pagination-link--prev .BlogItem-pagination-link-label {
    visibility: hidden;
}

a.lang-de.BlogItem-pagination-link--next .BlogItem-pagination-link-label {
    visibility: hidden;
}

a.lang-de.BlogItem-pagination-link--prev .BlogItem-pagination-link-label:before {
    content: "new previous";
    visibility: visible;
}

a.lang-de.BlogItem-pagination-link--next .BlogItem-pagination-link-label:after {
    content: "new next";
    visibility: visible;
}

with blog date, edit above code, I mean this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('time.blog-meta-item--date span').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

to this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

On 2/27/2022 at 10:52 AM, tuanphan said:

With previous/next, add this to Design > Custom CSS

a.lang-de.BlogItem-pagination-link--prev .BlogItem-pagination-link-label {
    visibility: hidden;
}

a.lang-de.BlogItem-pagination-link--next .BlogItem-pagination-link-label {
    visibility: hidden;
}

a.lang-de.BlogItem-pagination-link--prev .BlogItem-pagination-link-label:before {
    content: "new previous";
    visibility: visible;
}

a.lang-de.BlogItem-pagination-link--next .BlogItem-pagination-link-label:after {
    content: "new next";
    visibility: visible;
}

with blog date, edit above code, I mean this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('time.blog-meta-item--date span').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

to this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

 

Hello @tuanphan
 

Thank you for looking into this! 

The pagination translation code has worked. I really appreciate your help on this.
 

But for the date translation, it doesn't seem to work on my end:
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "Jän",
    	Feb: "Feb",
    	Mar: "März",
    	Apr: "Apr",
    	May: "Mai",
    	Jun: "Juni",
    	Jul: "Juli",
    	Aug: "Aug",
    	Sep: "Sept",
    	Oct: "Okt",
    	Nov: "Nov",
    	Dec: "Dek"
}
const translate1 = {
    	January: "Januar",
    	February: "Februar",
    	March: "März",
    	April: "April",
    	May: "Mai",
    	June: "Juni",
    	July: "Juli",
    	August: "August",
    	September: "September",
    	October: "Oktober",
    	November: "November",
    	December: "Dezember"
}
const day = {
    
    Monday: "Montag",
    Tuesday: "Dienstag",
    Wednesday: "Mittwoch",
    Thursday: "Donnerstag",
    Friday: "Freitag",
    Saturday: "Samstag",
    Sunday: "Sonntag"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "Jän",
    	Feb: "Feb",
    	Mar: "März",
    	Apr: "Apr",
    	May: "Mai",
    	Jun: "Juni",
    	Jul: "Juli",
    	Aug: "Aug",
    	Sep: "Sept",
    	Oct: "Okt",
    	Nov: "Nov",
    	Dec: "Dek"
}
const translate1 = {
    	January: "Januar",
    	February: "Februar",
    	March: "März",
    	April: "April",
    	May: "Mai",
    	June: "Juni",
    	July: "Juli",
    	August: "August",
    	September: "September",
    	October: "Oktober",
    	November: "November",
    	December: "Dezember"
}
const day = {
    
    Monday: "Montag",
    Tuesday: "Dienstag",
    Wednesday: "Mittwoch",
    Thursday: "Donnerstag",
    Friday: "Freitag",
    Saturday: "Samstag",
    Sunday: "Sonntag"
}
$(document).ready(function() {
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

Is there something I missed? 

Thank you in advance and for your time and efforts on this. 🙏
 

Hello again @tuanphan
I was also trying to apply the "Read more" translated with this code that I learned from you from other threads.
 

<script>
$('body.body-de .blog-more-link:contains("Read More")').text('Mehr lesen'); 
</script>

I am not sure why it does not work as well. I tweaked the body-de as the language is Deutsch. 

I know that I am almost there. But I can seem to make it work. 😅

May I also ask help on this? Thank you!

I left all the code in the code injection > footer for your reference.

1 hour ago, Naomi-lifelab said:

Hello again @tuanphan
I was also trying to apply the "Read more" translated with this code that I learned from you from other threads.
 

<script>
$('body.body-de .blog-more-link:contains("Read More")').text('Mehr lesen'); 
</script>

I am not sure why it does not work as well. I tweaked the body-de as the language is Deutsch. 

I know that I am almost there. But I can seem to make it work. 😅

May I also ask help on this? Thank you!

I left all the code in the code injection > footer for your reference.

Just a quick update I found this code and tested it out, but it keeps on showing in all languages. 
I am not good with coding, but  I tried adding this 'body.body-de. It doesn't seem to work and show only in DE/German page. 

May I please ask for help in having this applied only in the German pages?

<script>
  // Read More Text
  document.querySelectorAll('.BlogList-item-readmore span').forEach(function(summary) {
      summary.textContent = "View Full Article"; // Customize text here
  })
</script>

 in this thread:

Thank you!

try change this

.BlogList-item-readmore span

to

body.body-de .BlogList-item-readmore span

On 3/3/2022 at 8:57 PM, tuanphan said:

try change this

.BlogList-item-readmore span

to

body.body-de .BlogList-item-readmore span

 

Hello @tuanphan

Thanks for getting back to me. 

I have tried adding the "body.body-de", but it still doesn't seem to work. 😞

Is there any other way?

Thank you so much!