How to change language of the merchant/affiliate panel and affiliate mini-site

 

How to activate/deactivate languages

The language which you would like to use has to be enabled in your Post Affiliate Pro or Post Affiliate Network account. You can enable/disable languages in your merchant panel under Configuration > Languages and regional settings.

To add more languages click on the ‘Import language’ button and on the next screen select all the languages you want to import/enable. Once the languages are imported, users (merchants, affiliates, visitors) are able to use these.

One of the languages can be set as default and this will be used if no other language will be recognized for the user.


 

How are languages selected when a user arrives at your affiliate mini-site

  • If the user has a cookie in his browser with a certain language and this language is active in your Post Affiliate Pro or Post Affiliate Network account, it will be selected. The cookie is created when users log in to the merchant or affiliate panel.
  • If the user doesn't have a cookie, the language is selected based on the "preferred language for viewing websites" setting in his browser.
  • If none of these options match, the language which is marked as default is selected.

 

How to change the language if I am already logged in the merchant or affiliate panel

Both merchants and affiliates choose the language directly from the login form. If they are already logged in and they would like to change the language, they have to log out from the panel and choose a different language from the login form.


 

There is also a way to force the language using URL and language codes. This method doesn’t require logging out from the panel. You can simply add language URL parameter (lower case L) with language code into the URL like this: ?l=LANGUAGE_CODE

 

So, let’s say I am logged in the merchant panel and this is the URL in the browser:

https://URL.postaffiliatepro.com/merchants/index.php#Configuration-Manager

I can add the parameter like this to change the panel to the English language:

https://URL.postaffiliatepro.com/merchants/index.php?l=en-US#Configuration-Manager

 

Please note, that this will also create the language cookie in the visitor's browser, so the language will be remembered and you don’t have to do this every time.

 

How to add a language switcher to your panels

The method to change the language using language codes can be very useful. For example, if you would like to provide your affiliates with an option to choose the language directly from the mini-site, or even from the affiliate panel, you can use design customization and create a language switcher option.

The following examples apply to the August theme and if the same code will be used in a different theme it will most probably corrupt it. However a similar logic can be used in any other theme, it will just require different styling.

#1 using language icons

In Configuration > Design > edit ‘Signup page theme’ > find ‘header.stpl’ file and replace the code with this one (code in bold is the language switcher)

 

<!-- header -->
<header class="top_header"> 
<div class="container">

<div id="langselect">
    <a href="?l=cs">   
      <img src="https://lipis.github.io/flag-icon-css/flags/4x3/cz.svg" alt="CZ" style="width:21px;height:21px;border:0;"> 
    </a>
    <a href="?l=sk">   
      <img src="https://lipis.github.io/flag-icon-css/flags/4x3/sk.svg" alt="SK" style="width:21px;height:21px;border:0;"> 
    </a>
    <a href="?l=en-US">   
      <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" alt="US" style="width:21px;height:21px;border:0;"> 
    </a>
</div>

    {* <!--
    <div class="row">
        <div class="col-md-4 pull-right">
            <a href="{$baseUrl}/affiliates/login.php#login">Affiliate login</a><span>|</span>
            <a href="{$baseUrl}/merchants/login.php#login">Merchant login</a>
        </div> 
    </div>
    --> *}
    <div class="row">
        <div class="col-md-4 text-left">
            <strong>
                <a class="c1_Logo" title="{$programName|escape}" href="{$baseUrl}/">
                    <img src="{$programLogo|escape}" class="LogoImage" />
                    <span></span>
                </a>
            </strong>
        </div>
        {include file='account_topmenu.stpl'}
    </div>
</div>
</header>

RESULT:

 

#2 using the language selector

In Configuration > Design > edit ‘Signup page theme’ > find ‘account_topmenu.stpl’ file and replace the code with this one (code in bold is the language switcher)

 

<!-- 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=cs">CZ</option>
                      <option value="?l=sk">SK</option>
                      <option value="?l=en-US">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=cs">CZ</option>
                      <option value="?l=sk">SK</option>
                      <option value="?l=en-US">US</option>
                    </select>
                </li>
            {/if}
        </ul>
    </nav>
</div>

RESULT:

TIP: You can customize this as you want using your own HTML and CSS codes.