Multilanguage support

[StevenChoo]

Description

Currently all texts are in Duch and not other language is supported

Expected Behavior

ConsentCookie should have the option to show texts in different languages. Also you should be able to update the language settings, so that you can toggle between different translations.

Actual Behavior

No multi language support

[StevenChoo]

Example of init with all possible resource keys

<script type="application/javascript">
  ConsentCookie.init({
    'general': {
      'gdpr': {
        'contact': ''
      },
      'consentwall': {
        'enabled': true,
        'timeout': 1000,
      }
    },
    'apps': {
      'endpoint': '',
      'consent': {
        'cc': {
          'initstate': 'optin'
        },
        'iq': {
          'initstate': 'optin'
        },
        'ga': {
          'initstate': 'optin'
        },
        'gtm': {
          'initstate': 'optin'
        }
      }
    },
    'design': {
      'layout': {
        'position': 'right'
      },
      'colorscheme': {
        'primary': '',
        'secondary': '',
      }
    },
    'resources': {
      nl: {
        general: {
          on: 'Aan',
          off: 'Uit',
          close: 'Sluiten',
          moreInfo: 'Meer informatie',
        },
        menu: {
          applications: 'Jouw instellingen',
          about: 'Over ConsentCookie',
          open: 'ConsentCookie openen',
          close: 'ConsentCookie sluiten',
          disabled: 'accepteer eerst',
        },
        applications: {
          title: 'Jouw instellingen',
          moreInfo: 'Meer informatie over deze applicaties',
          moreInfoLink: 'https://www.consentcookie.nl',
          actions: {
            gdpr: 'Recht op...',
          },
          detail: {
            moreInfo: 'Meer informatie over',
            gdprInfo: 'Contact over jouw AVG rechten',
          },
          profile: {
            title: 'Jouw profiel',
            loading: 'Profiel wordt opgehaald',
            noPlugin: 'Deze applicatie heeft geen publiek profiel beschikbaar',
            noProfile: 'Geen profiel beschikbaar',
          },
        },
        about: {
          title: 'Over ConsentCookie',
          text: '', // When empty it takes the default
        },
        consent: {
          title: 'ConsentCookie!',
          text: '', // When empty it takes the default
          button: 'Ok!',
          infolink: 'https://www.consentcookie.nl',
        },
      }
    }
  });
</script>

The nl in the resource stands for the language code. To add a translation for another language add a new resource node with the language code of the chosen language.

<script type="application/javascript">
  ConsentCookie.init({
    resources: {
      'nl': {
        general: {
          on: 'Aan',
          off: 'Uit',
          close: 'Sluiten',
          moreInfo: 'Meer informatie',
        },
      },
      'en-US': {
        general: {
          on: 'On',
          off: 'Off',
          close: 'Close',
          moreInfo: 'More information',
        },
      },
      'de': {
        general: {
          on: 'Auf',
          off: 'Aus',
          close: 'Schließen',
          moreInfo: 'Mehr Informationen',
        },
      },
    }
  });
</script>

(Don`t mind the bad translations)

[christianvriens]

@StevenChoo can you check the questionmarks in this comment.

Tests

Test 1 Check if all fields are changed by filling them in JSON

In Dutch I tested with an extra letter for the first word in the json, so the difference between standard CC and the text in the json would be visible.

• [x] Are for all the available fields the changes visible.

general:

• [x] on: 'Aaan',
• [x] off: 'Uitt', :question: close: 'Sluiiten',
• [x] moreInfo: 'MMeer info', (gebruikt op Consent pagina voor de infolink)

  menu

• [x] applications: 'jJouw instellingen' (mouseover in menu)
• [x] about: 'oOver ConsentCookie', (mouseover in menu)
• [x] open: 'cConsentCookie openen',(mouseover in menu)
• [x] close: 'cConsentCookie sluiten',(mouseover in menu)
• [x] disabled: 'aaccepteer eerst',(mouseover in menu)

applications:

• [x] title: 'jjJouw instellingen', :question: moreInfo: 'mMeer informatie over deze applicaties', :question: moreInfoLink: 'https://www.consentcookie.eu',

  actions:

  :question: gdpr: 'RRecht op...',

  detail:

• [x] moreInfo: 'MMeer informatie over',
• [x] gdprInfo: 'CContact over jouw AVG rechten',

  profile:

• [x] title: 'JJouw profiel',
• [x] loading: 'PProfiel wordt opgehaald',
• [x] noPlugin: 'DDeze applicatie heeft geen publiek profiel beschikbaar',
• [x] noProfile: 'GGeen profiel beschikbaar',

about:

• [x] title: 'OOver ConsentCookie',
• [x] text: 'ttext', // When empty it takes the default

consent

• [x] title: 'CConsentCookie!',
• [x] text: 'ttxt', // When empty it takes the default
• [x] button: 'OOk!',
• [x] infolink: 'https://www.consentcookie.eu',

Test 2 Change default language in Chrome

• [x] Does the text change to another language when selecting another default language in Chrome

  Test 3 Default language Chrome is not available.

  A Only one language

  Tested with only Russian in the preferred list

• [x] Is the default dutch when the preferred chrome language is not available
• [x] Expect Dutch translation because the preferred language Russian is not available.

  B Preferred language not available, second preference 'en-US'

  Tested with Russian preferred second 'en-US', third 'de' and fourth 'nl'. Because dutch is the default in the ConsentCookie code I expect this is used in stead of 'en-US'

• [x] Expect Dutch translation because the preferred language Russian is not available. In future the check might take into account that 'en-US' has a higher preference then 'nl'. Should be new improvement.

  Test 4 Language doesn't have all the fields

  Used 'de' as preferred language, but only filled 4 fields with text.

• [x] If not all the fields are available in the language are the other fields shown in the default language Dutch

Testdata used

Tested this in Chrome by putting a language in the settings advanced on top.
Dutch: nl English US: en-US German: de

json

<script src="//cdn.humanswitch.services/cc/consentcookie/consentcookie.min.js"></script>
<script type="application/javascript">
    ConsentCookie.init({
        'general': {
            'gdpr': {
                'contact': 'https://www.christianvriens.com'
            },
            'consentwall': {
                'enabled': true,
                'timeout': 1000,
            }
        },
        'apps': {
            'endpoint': '',
            'consent': {
                'cc': {
                    'initstate': 'optin'
                },
                'iq': {
                    'initstate': 'optin'
                },
                'ga': {
                    'initstate': 'optin'
                },
                'gtm': {
                    'initstate': 'optin'
                }
            }
        },
        'design': {
            'layout': {
                'position': 'right'
            },
            'colorscheme': {
                'primary': '',
                'secondary': '',
            }
        },
        'resources': {
            'nl': {
                general: {
                    on: 'Aaan',
                    off: 'Uitt',
                    close: 'Sluiiten',
                    moreInfo: 'MMeer info',
                },
                menu: {
                    applications: 'jJouw instellingen',
                    about: 'oOver ConsentCookie',
                    open: 'cConsentCookie openen',
                    close: 'cConsentCookie sluiten',
                    disabled: 'aaccepteer eerst',
                },
                applications: {
                    title: 'jjJouw instellingen',
                    moreInfo: 'mMeer informatie over deze applicaties',
                    moreInfoLink: 'https://www.consentcookie.eu',
                    actions: {
                        gdpr: 'RRecht op...',
                    },
                    detail: {
                        moreInfo: 'MMeer informatie over',
                        gdprInfo: 'CContact over jouw AVG rechten',
                    },
                    profile: {
                        title: 'JJouw profiel',
                        loading: 'PProfiel wordt opgehaald',
                        noPlugin: 'DDeze applicatie heeft geen publiek profiel beschikbaar',
                        noProfile: 'GGeen profiel beschikbaar',
                    },
                },
                about: {
                    title: 'OOver ConsentCookie',
                    text: 'ttext', // When empty it takes the default
                },
                consent: {
                    title: 'CConsentCookie!',
                    text: 'ttxt', // When empty it takes the default
                    button: 'OOk!',
                    infolink: 'https://www.consentcookie.eu',
                },
            },
            'en-US': {
                general: {
                    on: 'on',
                    off: 'off',
                    close: 'close',
                    moreInfo: 'More more',
                },
                menu: {
                    applications: 'Your configuration',
                    about: 'About CC',
                    open: 'Open CC',
                    close: 'Close CC',
                    disabled: 'First accepts',
                },
                applications: {
                    title: 'Your configuration',
                    moreInfo: 'More info about this app',
                    moreInfoLink: 'https://www.consentcookie.eu',
                    actions: {
                        gdpr: 'Your rights on .. ',
                    },
                    detail: {
                        moreInfo: 'More info',
                        gdprInfo: 'Contact us about your GDPR rights',
                    },
                    profile: {
                        title: 'Your profile',
                        loading: 'Get profile',
                        noPlugin: 'This app doesnt have a public profile',
                        noProfile: 'No profile available',
                    },
                },
                about: {
                    title: 'About CC',
                    text: 'This is en text', // When empty it takes the default
                },
                consent: {
                    title: 'CC!',
                    text: 'this is en text', // When empty it takes the default
                    button: 'Agree!',
                    infolink: 'https://www.consentcookie.eu',
                }
            },'de': {
                general: {
                    on: 'Auf',
                    off: 'Aus',
                    close: 'Schließen',
                    moreInfo: 'Mehr Informationen',
                },
            }
        }
    });
</script>

[christianvriens]

My suggestion with with previous comment: If text with questionmark isn't used remove it. https://github.com/humanswitch/consentcookie/issues/47#issuecomment-397280111

[christianvriens]

@StevenChoo shouldn't the field 'general': 'moreinfo' be with 'consent'?

And if this is changed will existing users still be able to use this in CC? ❓ create improvement issue for this

[StevenChoo]

@StevenChoo shouldn't the field 'general': 'moreinfo' be with 'consent'?

And if this is changed will existing users still be able to use this in CC? question create improvement issue for this

Need to check this out

[StevenChoo]

My suggestion with with previous comment: If text with questionmark isn't used remove it.

47 (comment)

All text referenced in the config are beeing used. If not its a bug.

[StevenChoo]

question close: 'Sluiiten', Removed from default config due to not beeing used.

question gdpr: 'RRecht op...', Is used for the link shown at every application for requesting GDPR actions. It is only shown when the GDPR option is used

question moreInfo: 'mMeer informatie over deze applicaties', question moreInfoLink: 'https://www.consentcookie.eu',

It seems to be removed since v0.6.0

Created issue for this: #58

[StevenChoo]

Fixed