How to add quick language switcher to merchant/affiliate panel or mini-site

Quick navigation

As changing languages by logging out and in or through a URL parameter is not very convenient, we've prepared for you simple quick language switchers for merchant/affiliate panels and for the signup mini-page.

Language switchers will work only if the chosen language is imported in your Configuration > Languages and Regional settings.

Language switcher for merchant/affiliate panel (Icons approach)

Navigate to Configuration > Design > Merchant panel theme or Signup page theme > Edit your currently Selected theme. In the editor open the "main.tpl" file, and insert the code below between lines {widget id="Menu"} and </div>.

<!-- language switcher -->
<div id="langselect" style="text-align:center;">
  <a href="?l=sk">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/sk.svg" alt="SK" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=en-US">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/us.svg" alt="US" style="width:21px;height:21px;border:0;"> 
  </a>
</div>
<!-- end of language switcher -->

Results

Adding more languages

To include more languages in the switcher,  add another HTML link tag <a>...</a> to the code, and do not forget to replace the language code in the href parameter and image source to match the country flag. You can find the correct language code in Configuration > Language and Regional settings > Import language, e.g. language code for English is "en-US", not "en", "EN", "USA", etc.

<a href="?l=LANGUAGE_CODE">
  <img src="COUNTRY_FLAG_DESTINATION_URL" alt="LANGUAGE_CODE" style="width:21px;height:21px;border:0;"> 
</a>

Codes for most used languages

  <a href="?l=cs">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/cz.svg" alt="CZ" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=de">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/de.svg" alt="DE" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=es">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/es.svg" alt="ES" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=fr">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/fr.svg" alt="FR" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=hu">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/hu.svg" alt="HU" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=it">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/it.svg" alt="IT" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=ru">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/ru.svg" alt="RU" style="width:21px;height:21px;border:0;"> 
  </a>
  <a href="?l=zh-CN">   
    <img src="https://raw.githubusercontent.com/lipis/flag-icons/95cbeb22405dad5b86ee76df892c3666e81882d8/flags/4x3/cn.svg" alt="zh-CN" style="width:21px;height:21px;border:0;"> 
  </a>

Language switcher for mini-site (Drop-down menu approach)

Navigate to Configuration > Design > Signup page theme > Edit your currently Selected theme. Open the "account_topmenu.stpl" file in the editor and replace its code with the code below.

The following example applies to the default August theme, and if the same code will be used in a different theme, it might corrupt it. However, a similar logic can be used in any other theme. It will just require different styling.
<!-- account_topmenu  -->
<div class="col-md-8">
    <nav class="mainmenu">
        <ul>
            {if $isNetwork eq true}
                <li><a href="{$baseUrl}/">##Home##</a></li>
                <li><a href="{$baseUrl}/affiliates/">##Affiliates##</a></li>
                <li><a href="{$baseUrl}/merchants/home.php">##Merchants##</a></li>
                <li>
                    {if ($panelType == "M")}
                        <a href="{$baseUrl}/merchants/login.php">##Login##</a>
                    {else}
                        <a href="{$baseUrl}/affiliates/login.php">##Login##</a>
                    {/if}
                </li>
                <li>
                    <select onchange="location = this.value;">
                      <option value="">Language...</option>
                      <option value="?l=sk">SK</option>
                      <option value="?l=en-US">en-US</option>
                    </select>
                </li>
            {else}
                <li><a href="{$baseUrl}/affiliates/">##Home##</a></li>
                <li><a href="{$baseUrl}/affiliates/signup.php#SignupForm">##Sign up##</a></li>
                <li><a href="{$baseUrl}/affiliates/login.php">##Login##</a></li>
                <li>
                    <select onchange="location = this.value;">
                      <option value="">Language...</option>
                      <option value="?l=sk">SK</option>
                      <option value="?l=en-US">en-US</option>
                    </select>
                </li>
            {/if}
        </ul>
    </nav>
</div>

Result

Adding more languages

To include more languages in the switcher,  add another HTML option tag <option>...</option> to the code, and do not forget to replace the language code in the value parameter. You can find the correct language code in Configuration > Language and Regional settings > Import language, e.g. language code for English is "en-US", not "en", "EN", "USA", etc.

<option value="?l=LANGUAGE_CODE">Language Name</option>

Codes for most used languages

  <option value="?l=cs">CZ</option>
  <option value="?l=de">DE</option>
  <option value="?l=es">ES</option>
  <option value="?l=fr">FR</option>
  <option value="?l=hu">HU</option>
  <option value="?l=it">IT</option>
  <option value="?l=ru">RU</option>
  <option value="?l=zh-CN">CN</option>