Search code examples
javascriptsquarespace

Javascript to re-assign link in navigation Squarespace

I have made a bilingual website in Squarespace. I am not in developper mode, so have limited access to the code. I can insert javascript / HTMl / CSS in the header, or on the page, and have used this to override several aspects such as changing the company logo in the header, and pointing it to alternate URLs with JS.

What I am trying to do is make a specific link "English" or "Francais" in my navigation act differently depending on the page (if you're on the French version of a page, clicking English in the navigation would direct you to the english version of that page). Currently, the [EN] and [FR] links in the nav simply go to the english or french homepage. They are "Link" type "Pages" in squarespace and look like this when you inspect them:

<li class=" external-link">
<a href="/home">[EN]</a>
</li>

Copying the selector yields:

#topNav > nav > ul > li:nth-child(7) > a

I have included this code on my page. The first function that was recommended by a wonderful user here made the french logo (overridden from the english logo set in the panel) link to the french home page, I was hoping the second part would make the nav link act as I want:

<script>
var logo = document.querySelectorAll('h1.logo');
logo[0].addEventListener("click", function() {
location.href = "/home-fr";
})
var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > 
a');
eng[0].addEventListener("click", function() {
location.href = "/englishpage";
})
</script>

This is a slightly different situation vs making the logo link, because the logo was not a link to begin with.Perhaps that or my selector is why this does not work?

Edit - Here is the whole HTML for the Nav:

<div id="topNav">
      <nav class="main-nav dropdown-hover"><ul data-content-field="navigation">
  <li class="gallery-collection"> 
        <a href="/selected-work/">selected work</a>
  </li>
  <li class="page-collection"> 
        <a href="/about/">about</a>
  </li>
  <li class="page-collection">
        <a href="/contact/">contact</a>
  </li>
  <li class="gallery-collection">
        <a href="/realisations/">réalisations</a>
  </li>
  <li class="page-collection"> 
        <a href="/agence/">agence</a>
  </li>
  <li class="page-collection">
        <a href="/coordonnees/">coordonnées</a>
  </li>
  <li class=" external-link">
        <a href="/home">[EN]</a>
  </li>
  <li class=" external-link">
        <a href="/home-fr">[FR]</a>
  </li>
  <li class=" external-link">
        <a href="/home">return / retour</a> 
  </li>
</ul>
</nav>
    </div>

Note that most of these links are hidden through the CSS depending on which page you're on - For example, on a french page, only childs 4,5,6, and 8 are visible.

Solution

  • You have two options for accomplishing this.

    For the Englinsh link

    Change the href of the anchor to a new one like so:

    var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > a');
eng[0].href = location.pathname.replace('-fr', '');

    Use a click event handler like you were doing.

    var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > a');
eng[0].addEventListener("click", function(e) {
    e.preventDefault();
    location.href = location.href.replace('-fr', '');
    return false;
});

    For the French link

    Change the href of the anchor to a new one like so:

    var fr = document.querySelectorAll('#topNav > nav > ul > li:nth-child(8) > a');
fr[0].href = location.pathname + '-fr';

    Use a click event handler like you were doing.

    var fr = document.querySelectorAll('#topNav > nav > ul > li:nth-child(8) > a');
fr[0].addEventListener("click", function(e) {
    e.preventDefault();
    location.href = location.href + '-fr';
    return false;
});