Jump to content

Multilanguage website showing all in menu

Recommended Posts

Site URL: http://kitzbuehel-brautboutique-lilee.squarespace.com

Hi,

I have a website where I need it to be in English and in German. The website is: kitzbuehel-brautboutique-lilee.squarespace.com which I originally duplicated from brautboutique-lilee.com .. I added the code that I saw in another post and it was working fine, until I had to add another two indexes and then it broke. Can someone please help me? I am seeing all the pages now in the menu bar, in both English and German. I'm in desperate need!

Thank you so much!

Link to comment
  • Replies 8
  • Views 509
  • Created
  • Last Reply
<script>

 YUI().use('node', function (Y) {
 
   // output a menu
   var output = true;
 
   // here is where you set your default language
   var language = "en";
 
   // define the allowed languages
   var allowedLanguages = new Array();
   allowedLanguages['es'] = {
         label:'Español',
         short:'ES',
         url:'/es/home',
         lang:'es-ES'
   };
   allowedLanguages['en'] = {
         label:'English',
         short:'EN',
         url:'/en/home',
         lang:'en-EN'
   };
 
   var urlparts = document.location.pathname;
   if(urlparts.startsWith("/")){
     urlparts = urlparts.substr(1);
   }
   if(urlparts.endsWith("/")){
     urlparts = urlparts.substr(0,urlparts.length-1);
   }
   if(urlparts.length) {
     urlparts = urlparts.split("/");
     if(urlparts[0] in allowedLanguages){
       language = urlparts[0];
     }
   }
   var selector = [
     '#mainNavigation > div > label:not([data-href*=\"/' + language + '/\"])', 
     '#mainNavigation > div > a:not([href*=\"/' + language + '/\"])', 
     '#mobileNavigation > div > label:not([data-href*=\"/' + language + '/\"])', 
     '#mobileNavigation > div > a:not([href*=\"/' + language + '/\"])',
     '#secondaryNavigation > div > label:not([data-href*=\"/' + language + '/\"])', 
     '#secondaryNavigation > div > a:not([href*=\"/' + language + '/\"])'
   ]; 
   
   Y.all(selector.join()).get('parentNode').remove();
 
   if(output){    
     Y.all('#mainNavWrapper,#mobileNavWrapper').append(buildLanguageMenuHTML(language, allowedLanguages, 'right top'));
   }
   
   Y.one('html').setAttribute('lang', allowedLanguages[language].lang);
 });
 
 function buildLanguageMenuHTML(strCurrentLang, arrAllowedLangs, strClass){
     var htmlTemplate = '<nav id="langNavigation" class="' + strClass + '"><div class="folder"><input type="checkbox" name="folder-toggle-lang-navigation" id="folder-toggle-lang-navigation" class="folder-toggle-box hidden"><label for="folder-toggle-lang-navigation" class="folder-toggle-label" onclick="" data-href="' + arrAllowedLangs[strCurrentLang].url + '">' + arrAllowedLangs[strCurrentLang].short + '</label><div class="subnav">###languages###</div></div></nav>';
     var htmlTemplateInner = '<div class="collection"><a href="###url###">###label###</a></div>';
     var htmlInner='';
     var htmlOutput='';
     for(language in arrAllowedLangs){
         if(arrAllowedLangs.hasOwnProperty(language)){
             htmlInner += htmlTemplateInner.replace('###label###',  arrAllowedLangs[language].label).replace('###url###',arrAllowedLangs[language].url);
         }
     }    htmlOutput = htmlTemplate.replace('###languages###',htmlInner);
     return htmlOutput;
 }
 </script>
 
I had that code in the CSS part, but it stopped working and then I deleted it. I am on Personal plan so I cannot use Code Injection from the Advanced settings. Please, is there any way around this? I am using Squarespace 7.0 Thank you so much!
Link to comment
5 minutes ago, kimbmica said:

I had already came across your tutorial but Code Injection is not possible on Personal Plan.. See my screenshot attached.

Read again the guide.

I never mentioned Code Injection in the guide.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Yes, you're right. I had already tried inserted the Code Block in the first page, in the top part. See screenshots attached please. Am I inserting the code in the wrong page? After I added the code, the German pages were still showing. Order in the Navigation is English, German, English, German, etc.. Thank you.

Screenshot 2020-10-05 at 09.59.08.png

Screenshot 2020-10-05 at 09.59.24.png

Link to comment

Your site is 7.0, scroll down in the guide & find correct code for 7.0 template

To check template name, access Home > Design > Site Styles.

Or use this code (for Brine Template Family). Disable Ajax Loading if the code doesn't work properly (Home > Design > Site Styles > Ajax Loading)

<style>
.Header-nav-inner>.Header-nav-item:nth-child(even) {
    display: none;
}
.Mobile-overlay-nav>.Mobile-overlay-nav-item:nth-child(even) {
    display: none;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.