If you want to change the language of certain parts of your Juicer feed, such as the "Load More" button, you can do so using JavaScript. This article will guide you through the process of translating feed elements.
Translating the "Load More" Button Text
To change the text of the "Load More" button, follow these steps:
Insert the following JavaScript function after your Juicer embed code on the webpage, regardless of whether you're using a standard website or a WordPress site:
<script type="text/javascript">
document.addEventListener('juicer:feedLoaded', () => {
setInterval(() => {
const btn = document.querySelector('.j-paginate');
if (btn) btn.textContent = "Load More in another Language";
}, 500);
});
</script>Replace "Load More in another Language" with the exact translated version of "Load More" that you want to appear.
Translating the "Read More" Button Text
The "Read More" link appears on truncated posts when using the truncate parameter in your embed code. To translate it, change the 'Read More in another Language' to your desired phrase and add it after your Juicer embed code.
function translateReadMore() {
document.querySelectorAll('.j-read-more').forEach(function (link) {
link.textContent = 'Read More in another Language';
});
}
document.addEventListener('juicer:feedLoaded', translateReadMore);
document.addEventListener('juicer:feedPaginated', translateReadMore);
setInterval(translateReadMore, 1000);
Explanation of the JavaScript Code
The
document.addEventListener('juicer:feedLoaded', ...)function waits for the Juicer feed to load before executing the code inside.The
setInterval(() => { ... }, 500)function runs the code inside every 500 milliseconds (0.5 seconds) to check for the presence of the "Load More" button.The
const btn = document.querySelector('.j-paginate')line selects the "Load More" button element using its CSS class.The
if (btn) btn.textContent = "..."line checks if the button exists and, if so, changes its text content to the specified translation.
Translating Other Feed Elements
This example demonstrates how to change the "Load More" button text, but you and your development team can write similar JavaScript code to translate other areas of the feed. The process involves:
Identifying the CSS class or ID of the element you want to translate
Selecting the element using
document.querySelector()Modifying the element's text content using the
textContentproperty
Conclusion
By using JavaScript, you can easily translate various elements of your Juicer feed to better suit your audience.
⚠️ These functions should be inserted after your embed code on the webpage, regardless of whether you're using a standard website or a WordPress one.