Jump to content

Redirect a link from Navigation Bar

Recommended Posts

Posted

Hi, I'm trying to create my own multilingual website using a combination of Squarespace's folders and links with URL redirects. My goal is when I'm at a page and select a different language, I want to be redirected to a replicated page in the respective language I've created. I'm familiar with programming, novice at code injecting javascript into the footer.

I've so far structured a folder within the main navigation that contains an English and Francais links. I also have the relative path link and am trying to change the page to the path link when I press the link (<a> tag). My problem right now is that I've tried using "windows.location" but despite it going to a public live page, it seems the original path I set from the link doesn't get overriden by my code.

I'm wondering if there is a solution or different object line of code I need to be using in order to override the href so that it opens to a specified page (that gets redirected)


My test dummy site is: https://cat-tangerine-psza.squarespace.com/
password: jason10

My pages are structured so that /en/home is paired with /fr/maison as well as /en/general with /fr/generale.

URL Mappings are as follows:
/fr/home -> /fr/maison 301
/fr/general -> /fr/generale 301

/en/maison -> /en/home 301
/en/generale -> /en/general 301

My code so far:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('a').click(function(){ // Bind a click event to my <a> tag

    let en = "english";
    let fr = "francais";
    let link = "/";
    //if content says english
    if (this.textContent.toLowerCase().includes(en.toLowerCase())) {
      //grab the current href
      var a = window.location.href;
      //modify 
      var partsArray = a.split('/');
      //prepend and load new url
      link = "/en/" + partsArray[partsArray.length-1]; // Load the new page
      //alert("redirecting to FRENCH: " + link);
    }else if (this.textContent.toLowerCase().includes(fr.toLowerCase())) {
      //grab the current href
      var a = window.location.href;
      //modify 
      var partsArray = a.split('/');
      //prepend and load new url
      link = "/fr/" + partsArray[partsArray.length-1]; // Load the new page
      //alert("redirecting to FRENCH: " + link);
    }
      console.log("full url is: " + a);
      console.log("parsing: " + partsArray);
      alert(link);
      window.location = link;
    });
  });
</script>

 

  • Replies 0
  • Views 284
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.