How Can I Implement a Language Picker

In some cases it might be practical to allow users to change the language of a specific content by using a language selector.

Before you begin: To implement a language picker, a template must exist and you have to activate Scroll Translations.

1. Define a language picker in your HTML template by adding the following code to the page.vm or the include-sidebar.vm:

   CODE

   #if($scrollVersions.Language)
       <form class="aui" action="">
           <select class="select sp-version-picker">
               <!-- 
                   Language options need to be added manually since there is no placeholder for all languages in Scroll HTML right now.
                   Note the value attribute as we need to put the export files in separate folders matching this value
               -->
               <option value="en" #if($scrollVersions.Language.Key == "en") selected="selected" #end>English</option>
               <option value="de" #if($scrollVersions.Language.Key == "de") selected="selected" #end>Deutsch</option>
           </select>
       </form>
   #end
   <script>
       $('.sp-version-picker').change(function(ev) {
           var pathSegments = location.href.split(/[\\\/]/);
           pathSegments[pathSegments.length - 2] = ev.target.value;
           location.href= pathSegments.join('/');
       });
   </script>

2. Set the file naming in your exports to "Page ID only".
3. Export all languages separately using this file naming.
4. Unzip all languages to parallel folders.
5. Rename all language folders according to the set value attribute in the language picker (see code example above).

The language picker in your template has to pick the corresponding page and folder for each language. Due to the naming settings from step 2, all pages have the same page title in the different languages.

The folder structure should look like this:

• ParentFolder
  • en
    • index.html
    • page1.html
    • page2.html
  • de
    • index.html
    • page1.html
    • page2.html

If you open any of those pages in one of the export folders and change the language in the dropdown, you will be redirected to the file with the same name but a different folder.

Unfortunately the naming of the pages is not very intuitive, as they now all use the page ID instead of the page title in the filename. Therefore we have created another improvement in our JIRA system: EXP-610