Help with script to naviagte

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.

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

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.

Hi there wkennyspain,,

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

Try putting this...

Code:

---


<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

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.

Code:

---

<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>

---

Hi there wkennyspain,

this amendment is not file name dependent...

Code:

---


<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

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

Code:

---

<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>

---