Jump to content

Multilingual site and dropdown menu

Recommended Posts

Posted

Site URL: https://www.ugnesstory.com

Hi all,

I have implemented multilingual solution to my site with https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template solution for EN and LT language. But I am experiencing issues with links as I can't duplicate URL's if I am using dropdown menu, as per below:
image.thumb.png.24cd5559fa5da684b71b9fed0a23dd22.png
So, I have original stores placed to not linked navigation pages which I simply set up as en/store and lt/parduotuve. Then I created two dropdown menus with links. With links I have no problems, because I can use URL to make it work - https://www.ugnesstory.com/lt/parduotuve/kaklo-papuosalai and https://www.ugnesstory.com/en/store/necklaces for example. The problem is with dropdown buttons Parduotuvė and Store itself, as I can't use URL like https, but I need to use directly path like lt/parduotuve and en/store, but these paths are already taken to setup original Store and Parduotuvė in not linked navigation menu. So, if I do not set up dropdown buttons as lt/parduotuve and en/store they will be always visible and it doesn't matter what language I use for my page. In conclusion to this I just set URL slugs for dropdown buttons as /store and /parduotuve and tried to additionally hide /store and/parduotuve when either LT or EN language is selected with this code:

     /* HIDE /parduotuve LINK WHEN ENGLISH IS SELECTED */
        if (lang === 'en') {
            $('a[href="/parduotuve"]').hide(); // Hide /parduotuve link when EN is active
        }

        /* HIDE /store LINK WHEN LITHUANIAN IS SELECTED */
        if (lang === 'lt') {
            $('a[href="/store"]').hide(); // Hide /store link when LT is active
        }

Everything looking great on desktop and mobile for LT - /parduotuve, but I am having issues with /store, because when I am pressing Store nothing happens and seems dropdown menu just not working for EN version. Please see video attached.

 

So, I hope that somebody can help me with this, as I can't find how to solve this. Thank you very much in advance!

My full code:
 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function() {
        /* SETUP MULTI-LANGUAGE */
        var defaultLanguage = 'lt';
        var lang = location.pathname.split("/")[1];
        var defaultClass = 'lang-'+defaultLanguage+'';
        var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
        if (lang == "" || lang.length > 2 ){
          var lang = defaultLanguage;
        }

        /* ADD LANGUAGE CLASSES */
        $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
        $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
          var langType = $(this).attr('href').split("/")[1];
          var multiLanguageClass = 'multilanguage lang-' + langType + '';
          if (undefined !== langType && langType.length <= 2) 
            $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
        });
        $('nav button').each(function () {
          var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
          var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
          if (undefined !== langTypeFolder && langTypeFolder.length <= 2) 
            $(this).addClass(multiLanguageClass);
        });

        /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
        if (lang == "en") {
          $('a[href="/"]').attr("href", "/en/home/");
          	  $('body').addClass('body-lt');
        }

        /* ADD EXCLUSION NAV ITEMS */
        $('.exclude-me,.exclude-me a').addClass('exclude');
        $('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude');

        /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
        $('.multilanguage:not(".lang-'+lang+',.exclude")').remove();

        /* SETUP LANGUAGE SWITCHER */
$('body').prepend('<div class="language"><a href="/lt/namai" class="lang-lt">LT</a><span class="separator">|</span><a href="/en/home" class="lang-en">EN</a></div>');
      
 
        /* HIDE /parduotuve LINK WHEN ENGLISH IS SELECTED */
        if (lang === 'en') {
            $('a[href="/parduotuve"]').hide(); // Hide /parduotuve link when EN is active
        }

        /* HIDE /store LINK WHEN LITHUANIAN IS SELECTED */
        if (lang === 'lt') {
            $('a[href="/store"]').hide(); // Hide /store link when LT is active
        }

    });
</script>




 

 

  • 1 month later...
  • Replies 1
  • Views 468
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.