Jump to content

Multilingual website - language switcher - URL Mapping

Recommended Posts

Hello!

I'm building a multilingual website (5 languages) using the following two tutorials.

https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template

https://www.bradgood.net/articles/multi-language-squarespace-site-with-url-mapping

I got almost all of it working, except the language switcher, which I placed in the footer. So when I'm on the English biography page and I click "Français" it should send me to the French biography page. I think I don't fully understand the second tutorial. Do I need to list all pages here? And how do I adapt it to five languages?

 

This is the code that I put directly in the footer (with a Code element) - maybe the issue is here? I'm not sure which link I should put here actually, I don't have a "home" page.

<div class="language"><a href="/en/" class="lang-en">English</a>  |  <a href="/nl/" class="lang-nl">Nederlands</a>  |  <a href="/fr/" class="lang-fr">Français</a>  |  <a href="/de/" class="lang-de">Deutsch</a>  |  <a href="/es/" class="lang-es">Español</a></div>

 

Edited by elolitta
Link to comment
  • elolitta changed the title to Multilingual website - language switcher - URL Mapping
  • Replies 1
  • Views 249
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

So this is how I solved it so far (Advanced > Code Injection) to at least make it work but it's of course way too long and ugly 😅

$(function() {
  /* SETUP URL REROUTE FOR MATCHING LANGUAGE PAGE */
  switch (window.location.pathname) {
      /* Biography */
    case '/en/biography':
        $(".language a.lang-en").attr("href", "/en/biography");
        $(".language a.lang-nl").attr("href", "/nl/biografie");
        $(".language a.lang-fr").attr("href", "/fr/biographie");
        $(".language a.lang-de").attr("href", "/de/biografie");
        $(".language a.lang-es").attr("href", "/es/biografia");
      break;
    case '/nl/biografie':
        $(".language a.lang-en").attr("href", "/en/biography");
        $(".language a.lang-nl").attr("href", "/nl/biografie");
        $(".language a.lang-fr").attr("href", "/fr/biographie");
        $(".language a.lang-de").attr("href", "/de/biografie");
        $(".language a.lang-es").attr("href", "/es/biografia");
      break;
      case '/fr/biographie':
      $(".language a.lang-en").attr("href", "/en/biography");
      $(".language a.lang-nl").attr("href", "/nl/biografie");
      $(".language a.lang-fr").attr("href", "/fr/biographie");
      $(".language a.lang-de").attr("href", "/de/biografie");
      $(".language a.lang-es").attr("href", "/es/biografia");
    break;
    case '/de/biografie':
        $(".language a.lang-en").attr("href", "/en/biography");
        $(".language a.lang-nl").attr("href", "/nl/biografie");
        $(".language a.lang-fr").attr("href", "/fr/biographie");
        $(".language a.lang-de").attr("href", "/de/biografie");
        $(".language a.lang-es").attr("href", "/es/biografia");
      break;
      case '/es/biografia':
        $(".language a.lang-en").attr("href", "/en/biography");
        $(".language a.lang-nl").attr("href", "/nl/biografie");
        $(".language a.lang-fr").attr("href", "/fr/biographie");
        $(".language a.lang-de").attr("href", "/de/biografie");
        $(".language a.lang-es").attr("href", "/es/biografia");
      break;

/* A Sensitive Case */
case '/en/performances/a-sensitive-case':
        $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-case");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-case");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-case");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-case");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-case");
      break;
    case '/nl/voorstellingen/a-sensitive-case':
    $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-case");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-case");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-case");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-case");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-case");
      break;
      case '/fr/spectacles/a-sensitive-case':
      $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-case");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-case");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-case");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-case");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-case");
    break;
    case '/de/vorstellungen/a-sensitive-case':
    $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-case");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-case");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-case");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-case");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-case");
      break;
      case '/es/espectaculos/a-sensitive-case':
      $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-case");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-case");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-case");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-case");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-case");
      break;    

/* A Sensitive Build */
case '/en/performances/a-sensitive-build':
        $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-build");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-build");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-build");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-build");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-build");
      break;
    case '/nl/voorstellingen/a-sensitive-build':
    $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-build");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-build");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-build");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-build");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-build");
      break;
      case '/fr/spectacles/a-sensitive-build':
      $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-build");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-build");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-build");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-build");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-build");
    break;
    case '/de/vorstellungen/a-sensitive-build':
    $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-build");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-build");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-build");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-build");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-build");
      break;
      case '/es/espectaculos/a-sensitive-build':
      $(".language a.lang-en").attr("href", "/en/performances/a-sensitive-build");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-sensitive-build");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-sensitive-build");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-sensitive-build");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-sensitive-build");
      break;    

      /* A Departure from Thought */
case '/en/performances/a-departure-from-thought':
        $(".language a.lang-en").attr("href", "/en/performances/a-departure-from-thought");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-departure-from-thought");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-departure-from-thought");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-departure-from-thought");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-departure-from-thought");
      break;
    case '/nl/voorstellingen/a-departure-from-thought':
    $(".language a.lang-en").attr("href", "/en/performances/a-departure-from-thought");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-departure-from-thought");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-departure-from-thought");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-departure-from-thought");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-departure-from-thought");
      break;
      case '/fr/spectacles/a-departure-from-thought':
      $(".language a.lang-en").attr("href", "/en/performances/a-departure-from-thought");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-departure-from-thought");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-departure-from-thought");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-departure-from-thought");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-departure-from-thought");
    break;
    case '/de/vorstellungen/a-departure-from-thought':
    $(".language a.lang-en").attr("href", "/en/performances/a-departure-from-thought");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-departure-from-thought");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-departure-from-thought");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-departure-from-thought");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-departure-from-thought");
      break;
      case '/es/espectaculos/a-departure-from-thought':
      $(".language a.lang-en").attr("href", "/en/performances/a-departure-from-thought");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-departure-from-thought");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-departure-from-thought");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-departure-from-thought");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-departure-from-thought");
      break;    

            /* A Futile Act of Domestication */
case '/en/performances/a-futile-act-of-domestication':
        $(".language a.lang-en").attr("href", "/en/performances/a-futile-act-of-domestication");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-futile-act-of-domestication");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-futile-act-of-domestication");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-futile-act-of-domestication");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-futile-act-of-domestication");
      break;
    case '/nl/voorstellingen/a-futile-act-of-domestication':
    $(".language a.lang-en").attr("href", "/en/performances/a-futile-act-of-domestication");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-futile-act-of-domestication");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-futile-act-of-domestication");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-futile-act-of-domestication");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-futile-act-of-domestication");
      break;
      case '/fr/spectacles/a-futile-act-of-domestication':
      $(".language a.lang-en").attr("href", "/en/performances/a-futile-act-of-domestication");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-futile-act-of-domestication");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-futile-act-of-domestication");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-futile-act-of-domestication");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-futile-act-of-domestication");
    break;
    case '/de/vorstellungen/a-futile-act-of-domestication':
    $(".language a.lang-en").attr("href", "/en/performances/a-futile-act-of-domestication");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-futile-act-of-domestication");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-futile-act-of-domestication");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-futile-act-of-domestication");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-futile-act-of-domestication");
      break;
      case '/es/espectaculos/a-futile-act-of-domestication':
      $(".language a.lang-en").attr("href", "/en/performances/a-futile-act-of-domestication");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/a-futile-act-of-domestication");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/a-futile-act-of-domestication");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/a-futile-act-of-domestication");
        $(".language a.lang-es").attr("href", "/es/espectaculos/a-futile-act-of-domestication");
      break;    

           /* A Celery Royale */
           case '/en/performances/celery-royale':
        $(".language a.lang-en").attr("href", "/en/performances/celery-royale");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/celery-royale");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/celery-royale");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/celery-royale");
        $(".language a.lang-es").attr("href", "/es/espectaculos/celery-royale");
      break;
    case '/nl/voorstellingen/celery-royale':
        $(".language a.lang-en").attr("href", "/en/performances/celery-royale");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/celery-royale");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/celery-royale");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/celery-royale");
        $(".language a.lang-es").attr("href", "/es/espectaculos/celery-royale");
      break;
      case '/fr/spectacles/celery-royale':
        $(".language a.lang-en").attr("href", "/en/performances/celery-royale");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/celery-royale");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/celery-royale");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/celery-royale");
        $(".language a.lang-es").attr("href", "/es/espectaculos/celery-royale");
    break;
    case '/de/vorstellungen/celery-royale':
        $(".language a.lang-en").attr("href", "/en/performances/celery-royale");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/celery-royale");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/celery-royale");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/celery-royale");
        $(".language a.lang-es").attr("href", "/es/espectaculos/celery-royale");
      break;
      case '/es/espectaculos/celery-royale':
        $(".language a.lang-en").attr("href", "/en/performances/celery-royale");
        $(".language a.lang-nl").attr("href", "/nl/voorstellingen/celery-royale");
        $(".language a.lang-fr").attr("href", "/fr/spectacles/celery-royale");
        $(".language a.lang-de").attr("href", "/de/vorstellungen/celery-royale");
        $(".language a.lang-es").attr("href", "/es/espectaculos/celery-royale");
      break;    

          
/* Calendar */
case '/en/calendar':
        $(".language a.lang-en").attr("href", "/en/calendar");
        $(".language a.lang-nl").attr("href", "/nl/kalender");
        $(".language a.lang-fr").attr("href", "/fr/calendrier");
        $(".language a.lang-de").attr("href", "/de/kalender");
        $(".language a.lang-es").attr("href", "/es/calendario");
      break;
    case '/nl/kalender':
        $(".language a.lang-en").attr("href", "/en/calendar");
        $(".language a.lang-nl").attr("href", "/nl/kalender");
        $(".language a.lang-fr").attr("href", "/fr/calendrier");
        $(".language a.lang-de").attr("href", "/de/kalender");
        $(".language a.lang-es").attr("href", "/es/calendario");
      break;
      case '/fr/calendrier':
        $(".language a.lang-en").attr("href", "/en/calendar");
        $(".language a.lang-nl").attr("href", "/nl/kalender");
        $(".language a.lang-fr").attr("href", "/fr/calendrier");
        $(".language a.lang-de").attr("href", "/de/kalender");
        $(".language a.lang-es").attr("href", "/es/calendario");
    break;
    case '/de/kalender':
        $(".language a.lang-en").attr("href", "/en/calendar");
        $(".language a.lang-nl").attr("href", "/nl/kalender");
        $(".language a.lang-fr").attr("href", "/fr/calendrier");
        $(".language a.lang-de").attr("href", "/de/kalender");
        $(".language a.lang-es").attr("href", "/es/calendario");
      break;
      case '/es/calendario':
        $(".language a.lang-en").attr("href", "/en/calendar");
        $(".language a.lang-nl").attr("href", "/nl/kalender");
        $(".language a.lang-fr").attr("href", "/fr/calendrier");
        $(".language a.lang-de").attr("href", "/de/kalender");
        $(".language a.lang-es").attr("href", "/es/calendario");
      break;                   

/* Media */
case '/en/media':
        $(".language a.lang-en").attr("href", "/en/media");
        $(".language a.lang-nl").attr("href", "/nl/media");
        $(".language a.lang-fr").attr("href", "/fr/medias");
        $(".language a.lang-de").attr("href", "/de/medien");
        $(".language a.lang-es").attr("href", "/es/medios");
      break;
    case '/nl/media':
    $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/medias");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
      break;
      case '/fr/medias':
      $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/contact");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
    break;
    case '/de/medien':
    $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/contact");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
      break;
      case '/es/medios':
      $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/contact");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
      break;                   

      /* Partner */
case '/en/partner':
        $(".language a.lang-en").attr("href", "/en/partner");
        $(".language a.lang-nl").attr("href", "/nl/partners");
        $(".language a.lang-fr").attr("href", "/fr/partenaires");
        $(".language a.lang-de").attr("href", "/de/partner");
        $(".language a.lang-es").attr("href", "/es/socios");
      break;
    case '/nl/partners':
    $(".language a.lang-en").attr("href", "/en/partner");
        $(".language a.lang-nl").attr("href", "/nl/partners");
        $(".language a.lang-fr").attr("href", "/fr/partenaires");
        $(".language a.lang-de").attr("href", "/de/partner");
        $(".language a.lang-es").attr("href", "/es/socios");
      break;
      case '/fr/partenaires':
      $(".language a.lang-en").attr("href", "/en/partner");
        $(".language a.lang-nl").attr("href", "/nl/partners");
        $(".language a.lang-fr").attr("href", "/fr/partenaires");
        $(".language a.lang-de").attr("href", "/de/partner");
        $(".language a.lang-es").attr("href", "/es/socios");
    break;
    case '/de/partner':
    $(".language a.lang-en").attr("href", "/en/partner");
        $(".language a.lang-nl").attr("href", "/nl/partners");
        $(".language a.lang-fr").attr("href", "/fr/partenaires");
        $(".language a.lang-de").attr("href", "/de/partner");
        $(".language a.lang-es").attr("href", "/es/socios");
      break;
      case '/es/socios':
      $(".language a.lang-en").attr("href", "/en/partner");
        $(".language a.lang-nl").attr("href", "/nl/partners");
        $(".language a.lang-fr").attr("href", "/fr/partenaires");
        $(".language a.lang-de").attr("href", "/de/partner");
        $(".language a.lang-es").attr("href", "/es/socios");
      break;                   

/* Contact */
case '/en/contact':
        $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/contact");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
      break;
    case '/nl/contact':
    $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/contact");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
      break;
      case '/fr/contact':
      $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/contact");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
    break;
    case '/de/kontakt':
    $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/contact");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
      break;
      case '/es/contacto':
      $(".language a.lang-en").attr("href", "/en/contact");
        $(".language a.lang-nl").attr("href", "/nl/contact");
        $(".language a.lang-fr").attr("href", "/fr/contact");
        $(".language a.lang-de").attr("href", "/de/kontakt");
        $(".language a.lang-es").attr("href", "/es/contacto");
      break;                          }
});

 

Link to comment

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.