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.

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>