Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

softworks

Member
  • Posts

    37
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by softworks

  1. Please read number 3f) of the descripton. You have to adapt the injections points for your template. You will need JS/YUI/CSS skills.This tutorial was a proof of concept mainly targeted for developers. For customers i offer an enhanced and extended commercial script supporting several templates. The script does not yet support the Skye Family (Ready template) - but i could built in support. You can send me a mail to info@soft-works.biz if you are interested.
  2. @Matouche - I will contact you under your mail address. Yes i can build this for the Skye template. This requires setting up a blog for each single language used.
  3. Hi @AnnaM , it also works for Bedford and other templates. But, as I described in my post, you need to adapt the injection points for each template family, because the html differs from template to template. You can do this on your own (requires skills in JS, HTML, CSS, YUI) or book me. I have an adapted commercial multitemplate version of the script with additional features running out of the box for lots of templates. In case of questions you can contact me via mail: registrar@soft-works.biz.
  4. Hi @lazalee. As I described in my post, you need to adapt injection points for each template family.You can do this on your own (requires basic skills in JS, HTML, CSS, YUI) or book me. I have an adapted commercial multitemplate version of the script.
  5. Hi @maxkloosterman. Solution 1: You would have to createa mapper function to define therelations between the pages, eg. theurl for the german disclaimer andthe url for the english disclaimer.Disadvantage - If you often changeyour page this will be hard work tomaintain, as you do this manually. Solution 2:You have to build urls by convention, e.g. en/disclaimer, de/disclaimer. Disadvantage - you are goona loose the url for seo purposes.In both cases you will have to change the logic of the script.
  6. Hi @Fabpax you need to adapt the script for each template. Basically it should work, i use it e.g. for Hunter and Brine - they are in same template family like Sonora. But I haven't tested this with Sonora yet.I have developed a multitemplate version of the script for my customers, please contact me directly per mail if you are interested - registrar(at)soft-works(dot).biz
  7. @kristjan - probably your home resides in "not linked" section in Squarespace Backend? Or it has no language specific url?Make a home per language or use a cover page for a multilingual version. Your home is the url defined in language configuration of the script. One improvement i made in commercial version of my script - the logo url is changed to the configured home url per language, so that the logo always points to the home of the current language.
  8. @kristjan you probably misconfigured your english URL.Please configure an abolute Url for each language starting with a slash. In your case: /en/our-service
  9. @Simonhuesler, basically this should work with css and media queries. if you did not find a solution yet, send url of your sqs page.
  10. @Jason_Fu as i wrote: This will not work for onepager designs with jump urls (sections urls) in main navigation. Technically you cannot set a sections url to something like /en/section as RFC for sections does not allow slashes in sections. So: it does not work for all designs with index pages that use the subpages/sections inside the main navigation.
  11. As i wrote in the article - you have to adapt injections points per layout.I have a developped a version of the script for multiple layouts and it will be adapted for each derivative sub layout. Pls contact me for conditions. And see post below - techically this cannot work for onepager designs, where section pages are used for main navigation.
  12. @octopus - I agree with some points but not with all. The "ridiculously bloated" code could be written shorter. But it is readable and understandable. If you have ideas to improve it - don't hesitate to post your ideas. Whats wrong with duplication - SQS does the same. It is not the best technically. It does not offer side by side translation. You can create each language with a different structure. Right, blog elements not translated - easy to map them in js or use css. Answers are here in the forum. (I did not use the blog in the sample project).
  13. Hallo @hausecec Template FIVE Adaptions You need to adapt the Javascript as described in f) as each template has another html structure. You need to adapt the CSS as stated in the post as each template has another html structure Adaption of Javascript a) Change the selector variable. Because i cannot see in the five demo if there is a secondary navigation, perhaps you need to add the code for the secondary navigation if you need a multilingual secondary nav. var selector = [ '#mainNavigation > ul > li > a:not([data-href*=\"/' + language + '/\"])', '#mobileNavigation > ul > li > label:not([data-href*=\"/' + language + '/\"])', '#mobileNavigation > ul > li > a:not([href*=\"/' + language + '/\"])' ]; b) Change the output injections point in case you want to use the dropdown menu: you have to try this out and you have to adapt the css for the injection point. // output: append to main and mobile navigation if(output){ Y.one('#page-header-wrapper').append(buildLanguageMenuHTML(language, allowedLanguages, 'right top')); } Adaption of CSS You need to adapt the css for the injection point. #page-header-wrapper #langNavigation .folder-toggle-label{ background: #1d1a1a; border-radius: 50px; padding: 0; line-height: 3em; width: 3em; } #page-header-wrapper #langNavigation.top{ top:-3px; }
  14. There is a much easier way, using the same technique.A lot of multilingual websites use the iso-2 code to differ the urls, e.g. /de/url or /en/url oder de/ordner/seite and en/folder/page. Using this technique together with YUI/JS manipulation is much more robust and does not depend on Ids. It just depends on manipulated Url slugs and a properly configured script: Works for main and secondary nav, mobile nav, layered nav Script remains the same and detects new and deleted pages or modified pages. Script autmatically set html lang tags Script does not depend on order of pages or ids. Script optionally produces a fully styleable and adaptable language menu Script is configurable for each template Script works for all page types: page, collections, links, blogs all you have to do is define url slugs. I wrote a tutorial for this, take a look here:https://answers.squarespace.com/questions/124120/how-to-build-a-multilingual-site-in-squarespace-7.html
  15. This code was used together with the PACIFIC template. The configured selectors have to be adapted for other templates. If anyone uses this code with other templates please post the selectors here. Any improvements are welcome. Thank you.
  16. Solution with Javascript based on built in YUI3. The proof of concept is here, but not yet online, as it is not translated yet. You need a password to open it.http://www.inselhostel.com - Password: inselhostel This solution has the following features: as many languages you want to add and delete pages in configured languages with automatically adapted menues works automatically for primary and secondary navigation easy configuration of new languages while translating into a new language or translating a new page, these pages do not appear on your site you can create a fully styleable and customizable language menue no extra cost for external services no template restrictions: should be adaptable to each template SEO works: Google uses natural language detection and pages do physically exist under unique urls Quick step by step tutorial: 1) Create your pages in Squarespace.Use iso language codes to for defining unique url slugs per page in the page settings. Translate the url slugs to the respective language. For example: **en**/index **de**/index **en**/folder/index **de**/ordner/index **en**/folder/page **de**/ordner/seite The DE--- and EN--- Pages in the tree are just a visual orientation help without function. Just disabled pages oder folders. 2) Inject the javascript snippet described below in Settings > Advanced > Injection > Footer and configure the script to your needs. This will be explained below step by step. Check your site, if the menues are display correct. Check with debugger for JS errors. 3) Create your language switch. Solution 1-3 require no coding skills. Solution 4 requires css and js skills. a) Solution 1: Create a cover page with a button or link for each language. b) Solution 2: Create the language menue within the main navigation Examle structure for two lanuges ---------------------------------------------------------------- label Url Slug Page Type ---------------------------------------------------------------- EN /en/language Folder English /en/index Page / Link / Index Deutsch /de/index Page / Link / Index DE /de/language Folder English /en/index Page / Link / Index Deutsch /de/index Page / Link / Index c) Solution 3: Create the language menue in the secondary navigation if supported by your template Examle structure for two lanuges ---------------------------------------------------------------- label Url Slug Page Type ---------------------------------------------------------------- English /en/index Page / Link / Index Deutsch /de/index Page / Link / Index English /en/index Page / Link / Index Deutsch /de/index Page / Link / Index d) Solution 4: create menue dynamically with yui, javascript and customize it for your needs and template. Inject custom CSS in Squarespace. You may use a flag sprite to display country flags in language menue. Example CSS posted below. Full script snippet <script> /* LANGUAGE MENUE IN SQS WITH YUI3 ** (c) Raphael Boos, soft.works 2015 ** Version: 1.0 ** Inject in Settings > Advanced > Code Injection ** Easy Language Menues in SQS ** Convention: first level of all URL Slugs is language separator ** Expects predefined html structures: #mobileNavigation|#mainNavigation|#secondaryNavigation > div > a|label ** Old code: var allowedLanguages = ['de','en']; if(allowedLanguages.indexOf(urlparts[0]) != -1){ */ YUI().use('node', function (Y) { // output a menu var output = false; // set default language var language = "de"; // define languages var allowedLanguages = new Array(); allowedLanguages['de'] = { label:'Deutsch', short:'DE', url:'/de/index', flag:'<i class="flag-icon flag-icon-de"></i>', lang:'de-DE' }; allowedLanguages['en'] = { label:'English', short:'EN', url:'/en/index', flag:'<i class="flag-icon flag-icon-en"></i>', lang:'en-GB' }; // detect current language 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 + '/\"])' ]; // remove all nodes not in current language Y.all(selector.join()).get('parentNode').remove(); // output: append to main and mobile navigation if(output){ Y.all('#mainNavWrapper,#mobileNavWrapper').append(buildLanguageMenuHTML(language, allowedLanguages, 'right top')); } // adapt html lang attribute 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].flag + arrAllowedLangs[language].label).replace('###url###',arrAllowedLangs[language].url); } } htmlOutput = htmlTemplate.replace('###languages###',htmlInner); return htmlOutput; } </script> Explanation of the script STEP by STEP a) This load the YUI node module you need for manipulation YUI().use('node', function (Y) { b) If output is true a menue is output. You have to adapt the menue output for your template. // output a menu var output = false; c) Define your default language. The language key must be the same used in the URL slugs. // set default language var language = "de"; d) Define all allowed lanuages and configure them for your needs.Each key in the array 'de' or 'en' represents one language and is the same used for your url slugs. label is used for menue output short is used for menue output url is the start url slug for each language flag is a html snippet i use to render a language flag with css and a sprite. lang is used for the manipulation of the html lang attribute // define languages var allowedLanguages = new Array(); allowedLanguages['de'] = { label:'Deutsch', short:'DE', url:'/de/index', flag:'', lang:'de-DE' }; allowedLanguages['en'] = { label:'English', short:'EN', url:'/en/index', flag:'', lang:'en-GB' }; e) Here we detect the curent language, if not configured we use the default language. // detect current language 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]; } } f) This is the most tricky part. Probably you will have to adapt this for your template. 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 + '/\"])' ]; g) All menue elements that do not belong to the detected language are removed from the page menue. // remove all nodes not in current language Y.all(selector.join()).get('parentNode').remove(); h) Here the output flag is checked and if true the function for menue creation is called // output: append to main and mobile navigation if(output){ Y.all('#mainNavWrapper,#mobileNavWrapper').append(buildLanguageMenuHTML(language, allowedLanguages, 'right top')); } i) The html lang attribute is adapted // adapt html lang attribute Y.one('html').setAttribute('lang', allowedLanguages[language].lang); }); j) The function for building the menu. This function builts a dropdown menue with default SQS dropdown markup.Parameters of the function: strCurrentLang - Current Language arrAllowedLangs - array with configured language strClass - injects css Classes to the nav Tag to define the position. Example CSS will be posted below. CSS Example You have to adapt CSS and output for your template #headerNav #langNavigation .folder-toggle-label{ background: #1d1a1a; border-radius: 50px; padding: 0; line-height: 3em; width: 3em; } #headerNav #langNavigation.top{ top:-3px; } #showOnScrollWrapper #langNavigation .folder-toggle-label{ background: #292525; border:5px solid #292525; } #langNavigation{ position: absolute; z-index: 10050; } #langNavigation.right{ right: 0; } #langNavigation.left{ left: 0; } #langNavigation.top{ top: 0; } #langNavigation.bottom{ bottom: 0; } html:not(.touch-styles) body:not(.always-use-overlay-nav) .nav-wrapper #langNavigation.right .folder .subnav { left: auto; right: 0; } /* FLAG ICONS FOR LANGUAGE MENU ** svg images+css from http://lipis.github.io/ ** upload images to SQS and use static url for referencing ** add as many languages you need */ .flag-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat; position: relative; display: inline-block; width: 1.33333333em; line-height: 1em; height: 1em; font-size: .85em; margin-right: .5em; } .flag-icon-de { background-image: url(//static1.squarespace.com/static/56b1f8b060b5e9f4fa0f2143/t/56b33d8ae32140d4e6e85a10/1454587288318/de.svg); } .flag-icon-en { background-image: url(//static1.squarespace.com/static/56b1f8b060b5e9f4fa0f2143/t/56b33dc0e32140d4e6e85ab9/1454587328016/gb.svg); }
  17. There are several approaches to realize a multilingual site in Squarespace.All of the existing solutions have drawbacks. In the answer, you will find a solution for localization of squarespace sites without drawbacks. 1) Official Squarespace Solution Does not work on all templates. Structural limitation - you only have one navigation level left perlanguage. Language selector menu not very nice. 2) Using multiple squarespace sites with language subdomains You have to pay the Squarespace fee per language3) Using external localization services like localize.js oder bablic.com You have to pay for external services. There are additional resources that have to be downloaded Does SEO work well on these solutions? Did not investigate this. 4) Javascript based on CSS Selectors and page IDs Unflexible when adding pages, JS has to be adapted and grows
×
×
  • Create New...