Modify link for language change [SOLVED]

Hi everyone!

Ive made a webside with 3 languages with blocs, but this one uses a lot of pages, and count of it rising every week.

The main goal is simple button click to change language and stay on same page without integration of http link to every page.

Maybe it’s possible to change link with java?

For example:
proposals-de.html
Can be change by some code with this function:
If webpage name have “-de” and button with “-en” was clicked, than find “-de” and replace with “-en” and follow new link!

Is it possible?

Thanks for your advices! :slight_smile:

Hey @Edward,

There is probably a better way to code this, I’m still learning Javascript. (pretty sure there is a way to easily replace everything after the - that’s better than what I am doing here) But it works.

Step 1

Give each language button a class called
.btn-lang

And add a custom attribute called (replace the value for the language)

data-language = "fr"

Step 2

Post this code into the footer of the page.
<script>
var currentURL = window.location.href;
var sliceURL = currentURL.substring(0, currentURL.length - 7);

document.querySelectorAll('.btn-lang').forEach(function(button) {
 	var newLang = (button.getAttribute("data-language"));
 	(button.setAttribute("href", sliceURL +  newLang + ".html" ));
});
</script>
1 Like

So the trick is that this code read currentUrl than create sliceUrl by deleting 7 characters and after takes attribute from button and add to SliceUrl?

And button should be with empty HREF?

And the script should be placed at the head of page?

If I change button to flag image I should use IMG instead of BUTTON?

1 Like

No you don’t need to change this. It can be anything.

But yes, its grabbing the current URL, removing 7 characters and adding the language abbreviation + “.html” at the end.

So you can change this if your using clean urls rather easily (just remove the + “.html”).

And you can have any many language buttons as you want.

2 Likes

Thanks for your help! I’ll test it tomorrow!

You can make a language brick for blocs with user manual!

1 Like

The script not working with image, so I rewrite btn to img and the link is generating, but the location of HREF is in wrong place

    <script>
var currentURL = window.location.href;
var sliceURL = currentURL.substring(0, currentURL.length - 7);
 document.querySelectorAll('.img-language').forEach(function(img) {
 	var newLang = (img.getAttribute("data-language"));
 	(img.setAttribute("href", sliceURL +  newLang + ".html" ));
});
</script>

UPD: script working without corrections, but still href is in wrong place

I tested it as a button, not an image. (Adding those sort of details in your original post can help) Let me get back to you. You can see the “a“ anchor is wrapping the image, so of course it’s not going to use the href that was created attached to the image itself.

1 Like

Hey @Edward

Ok I made some modifications, the code will add an “Onclick” to the image. So you don’t need to use the interaction option to make the image a link. And it will also turn the curser into a pointer.

Example Project

Blocs_Add_Language_Suffix_To_URL_Image_Link.bloc (719.5 KB)

Step 1

Add the following class to the image
.btn-lang

Step 2

Add the following custom attribute to the image (change the value for the language)
data-language="en"

Step 3

Copy this code to your page footer
<script>
var currentURL = window.location.href;
var sliceURL = currentURL.substring(0, currentURL.length - 5);

document.querySelectorAll('.btn-lang').forEach(function(button) {
 	var newLang = (button.getAttribute("data-language"));
 	button.style.cursor = 'pointer'; 
 	(button.setAttribute("onclick", "location.href = '" + sliceURL + "-" + newLang + ".html';"));
});
</script>

Step 4

Make any adjustments needed to suit your site.
1 Like

Thank you for your help! The last one with onclick is working fine in any cases!

1 Like