Multi Language Settings

Let's add the French language.
  • Create a new file fr.json in the fr folder in the webroot/lang folder and copy the en.json file code in this file.
  • Now you need to add the language in the webroot/js/app.js file. In the function setLanguage, add the "Switch case" condition as below code and make sure to add the french.jpg file in the webroot/images/flags folder.
    case "fr":
        document.getElementById("header-lang-img").src = "/images/flags/french.svg";
    break; 
  • You can simply use key attributes in the HTML tag to convert the language text. Example: <div data-key="t-title">This is title.</div>
  • Add the below dropdown in the templates/element/topbar.php file in the language dropdown.

    <!-- item-->
    <a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="fr" title="French">
        <img src="/images/flags/french.jpg" alt="user-image" class="me-2 rounded" height="18">
        <span class="align-middle">French</span>
    </a> 
© Skote.