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);
}
