Help with script to naviagte

[wkennyspain]

My site has English and Spanish versions of each page. The folder structure is identical for both, but all Spanish pages are under a /_spanish folder. For example:
/index.htm is English version
/_spanish/index.htm is Spanish version

I'd like to include a button on each page making it easy to swap languages.

The logic is:

onclick parse the current page name
if it does not contain /_spanish/
insert/_spanish/ and go to that page e.g. go from http://mysite.com/index.htm to http://mysite.com/_spanish/index.htm
else (it does contain /_spanish/)
remove /_spanish and go to that page e.g. go from http://mysite.com/_spanish/index.htm to http://mysite.com/index.htm

Thanks in advance for any help.

[coothead]

Hi there wkennyspain,


this can be done without javascript.

Here is an example...

https://codepen.io/coothead/full/JjYNWmM

... and the code...

https://codepen.io/coothead/pen/JjYNWmM



coothead

[wkennyspain]

Hi Coothead,

Thanks for the reply, but that is not what I want, since it would mean editing every page to include an explicit new target, and I could have used a simple "a href=" for that.

I want a piece of generic code that can be pasted into the SSI include I use for the main nav menu, so I think it has to be something that can do the logic I mentioned in the OP.

[coothead]

Hi there wkennyspain,,


you did not mention that you were using an SSI include in your O.P. :eek:

Try putting this...



<button id="language-tester"></button>

<script>
( function( w, d ) {
var but = d.getElementById( 'language-tester' );
if ( w.location.href.match('_spanish') ) {
but.textContent = 'English';
but.onclick = function() {
w.location.href ='https://mysite.com/index.html';
}
}
else {
but.textContent = 'Spanish';
but.onclick = function() {
w.location.href ='https://mysite.com/_spanish/index.html';
}
}

} ( window, document ) );
</script>

...in your SSI include. ;)


coothead

[wkennyspain]

Thanks again for your time, Coothead, but that is not going to work for me either. I need a solution that parses the current page address, an duses that to build the address of the new one. Then, I can plug it in without having to be explicit about any address.

This is what I've been playing aorund with, but cannot get it working, and I have no idea how to debug JS.



<script>
function myFunction() {
var currentpage = window.location.href;
var n = currentpage.indexof(_spanish);
var len = location.path.length;

if n>0 {
/* make the new page address without _spanish */
var firstbit = location.hostname;
var secondbit = currentpage.substr(n+1,len-n);
var newpage= concat(firstbit, secondbit);
}
else {
/* make the new page address with _spanish inserted after domain name*/
var spa = "/_spanish/"
var firstbit = location.hostname;
var secondbit = location.path;
var newpage= concat(firstbit,spa, secondbit);
}
location.href=newpage
}
</script>

[coothead]

Hi there wkennyspain,


this amendment is not file name dependent...



<button id="language-tester"></button>

<script>
( function( w, d ) {
var but = d.getElementById( 'language-tester' ),
adr = w.location.href,
str = adr.substring( adr.lastIndexOf('/') + 1 );
if ( adr.match('_spanish') ) {
but.textContent = 'English';
but.onclick = function() {
w.location.href ='https://mysite.com/' + str;
}
}
else {
but.textContent = 'Spanish';
but.onclick = function() {
w.location.href ='https://mysite.com/_spanish/' + str;
}
}

} ( window, document ) );
</script>



coothead

[wkennyspain]

Thanks again, Coothead. I managed to get my version working - it has the benefit of letting me test it on localhost


<button style="width:100px;height:100px;" onclick="myFunction()"></button>

<script>
function myFunction() {

var host = location.hostname;
var path = location.pathname;
var n = path.indexOf('/_spanish');
var len = path.length;

if (n>-1) {
/* make the new page address without _spanish */

var newpath = path.substr(10,len-9);
var newpage = '/'.concat(newpath);
}
else {
/* make the new page address with _spanish inserted*/
var newpath = path.substr(10,len-9);
var spa = "/_spanish/";
var newpages= spa.concat(path);
/*Replace double // that will occur in sub-directories */
newpage = newpages.replace(/\/\//,"/");
}

window.location.href = newpage;
}
</script>