Nectar Documentation
DemoBuy Now
  • Introduction
  • Getting Started
    • Requirements
    • Installation
    • Directory Structure
    • Dependencies & Plugins
  • Basics
    • Configuration
    • Routes
    • Layout
    • Navigation
    • Initialization
    • Theming
    • Internationalization
    • Store Management
  • UI & UX
    • Components
      • Accordion
      • Action Sheet
      • Audio
      • Autocomplete
      • Badge
      • Breadcrumb
      • Button
      • Card
      • Chart
      • Checkbox
      • Chip
      • Color Picker
      • Content Block
      • Data Table
      • Date-Time Picker
      • Dialog
      • Dropcap
      • Elevation
      • Embed
      • Empty State
      • Expandable Card
      • Flip Card
      • Floating Action Button
      • Form Input
      • Form Validator
      • Gauge
      • Grid
      • Icon
      • Image
      • Image Compare
      • Image Hotspot
      • Infinite Scroll
      • Keypad
      • Line Divider
      • List Index
      • List View
      • Marquee
      • Menu
      • Menu List
      • Navbar
      • Note
      • Notification
      • Pagination
      • Photo Browser
      • Picker
      • Popover
      • Popup
      • Preloader
      • Progress Bar
      • Pull-to-Refresh
      • Quote
      • Radio
      • Range Slider
      • Rating
      • Ribbon
      • Searchbar
      • Sheet Modal
      • Show More/Less
      • Side Panel
      • Signature Pad
      • Skeleton
      • Smart Select
      • Sortable List
      • Stepper
      • Subnavbar
      • Swipeout
      • Swiper Slider
      • Syntax Highlighter
      • Tab
      • Text Editor
      • Timeline
      • Timer
      • Toast
      • Toggle
      • Toolbar
      • Tooltip
      • Tour Guide
      • Tree View
      • Video
      • Virtual List
    • Screens
      • Splash Screen
  • Advanced
    • Web APIs
      • App Badging API
      • App Shortcuts API
      • Battery Status API
      • Clipboard API
      • Contact Picker API
      • Device Memory API
      • Device Orientation API
      • File API
      • Fullscreen API
      • Geolocation API
      • Get Installed Related Apps API
      • HTML Media Capture API
      • Local Storage API
      • Network Information API
      • Notifications API
      • Online & Offline Status API
      • Page Visibility API
      • Permissions API
      • Picture-In-Picture API
      • Quota Estimation API
      • Screen Orientation API
      • Screen Wake Lock API
      • Server-Sent Events API
      • Session Storage API
      • Vibration API
      • Web Share API
    • Cordova Plugins
      • Battery Status
      • Build Info
      • Camera
      • Contacts Info
      • Device
      • Dialogs
      • Fingerprint Authentication
      • Geolocation
      • In-App Browser
      • Media Capture
      • Network Information
      • Social Sharing
      • Splash Screen
      • SQLite
      • Status Bar
      • Vibration
    • Integrations
      • AlaSQL
      • Disqus
      • Embedly
      • Facebook Comments
      • Google AdMob
      • Google Maps
      • Google Sheets
      • Gravatar
      • Lottie
      • Mailchimp
      • QR Code
      • RSS
      • Telegram Comments
      • WordPress
      • YouTube
  • Publishing
    • Progressive Web App
    • Cordova App
  • Help
    • Changelog
    • Support
    • Customization
  • Tutorials
    • How to Create and Animate an SVG Image Using JavaScript
Powered by GitBook
On this page
  • Overview
  • Configuration Variables
  • Set Primary Language
  • Language Switcher
  • i18n Related Methods
  • app.i18n.initialize();
  • app.i18n.currentLanguage();
  • app.i18n.changeLanguage(languageCode);
  • app.i18n.localize();
  • app.i18n.translate(key, fallback, options);
  • languageChanged Event
  1. Basics

Internationalization

PreviousThemingNextStore Management

Last updated 2 years ago

Overview

Nectar is multi-lingual. It supports Internationalization (i18n) and Right-to-Left languages such as Arabic, Hebrew etc.

It uses library for implementing i18n.

The translation files in JSON format are present inside /assets/custom/i18n/ folder.

By default, Internationalization (i18n) is enabled in Nectar.

Configuration Variables

The configuration variables for i18n are present in /assets/custom/js/config.js file, inside window.config.i18n object.

window.config.i18n = {
    enabled: true, // If your app uses multiple languages, then set to true.
    languages: { // List of languages your app supports, this is used to load translations and populate language selector widgets.
        en: {
            name: 'English',
            slug: 'english',
            code: 'en',
            locale: 'en-UK',
            dir: 'ltr',
            flag: 'https://flagcdn.com/gb.svg'
        },
        hi: {
            name: 'Hindi',
            slug: 'hindi',
            code: 'hi',
            locale: 'hi-IN',
            dir: 'ltr',
            flag: 'https://flagcdn.com/in.svg'
        },
        ar: {
            name: 'Arabic',
            slug: 'arabic',
            code: 'ar',
            locale: 'ar-AE',
            dir: 'rtl',
            flag: 'https://flagcdn.com/ae.svg'
        }
    },
    defaultLanguage: 'en', // This is the default or primary language of your app.
    fallbackLanguage: 'en', // In case, if translations are not present in JSON files, then the string is translated into fallback language.
    namespaces: ['common'] // These are the i18n JSON translation files without the suffix .json
}

Set Primary Language

By default, the primary language for Nectar is set to English (en)

To change the primary language from English to any other language (suppose French), follow these steps:

  1. Open index.html and set <html lang="fr" dir="ltr">

  2. In case, your primary language is RTL (suppose Arabic), then set <html lang="ar" dir="rtl"> Additionally, change: <link class="f7" rel="stylesheet" href="assets/vendor/framework7/framework7-bundle.min.css" /> to <link class="f7" rel="stylesheet" href="assets/vendor/framework7/framework7-bundle-rtl.min.css" />

  3. Now, open /assets/custom/js/config.js file.

  4. Inside window.config.i18n = { change defaultLanguage from en to fr

  5. Go to /assets/custom/i18n/ and create a new folder fr

  6. Inside /assets/custom/i18n/fr/, create a file common.json and add translation strings.

This way, you can set your Primary Language.

Language Switcher

When your app is multi-lingual, you might want to provide a way for your users to switch languages. We have implemented one, and it is located at /partials/select-language.html

The list of available languages is populated from window.config.i18n.languages

i18n Related Methods

The code which manages i18n in Nectar is present in /assets/custom/js/init.js inside app.i18n = { object.

app.i18n.initialize();

This code initializes the i18n library.

app.i18n.currentLanguage();

Using this, you can get the current language of the app.

app.i18n.changeLanguage(languageCode);

Using this, you can change the current language of the app. For example, app.i18n.changeLanguage('hi');

app.i18n.localize();

This code looks for all the data-i18n attributes in HTML elements and translate them. This is useful when you dynamically add elements in DOM.

app.i18n.translate(key, fallback, options);

This is used to translate string present in JSON translation files. For example, app.i18n.translate('app-title', 'Nectar', //i18next options);

If the current language is Hindi, then this will output 'नेक्टर'. If app-title key is not present, then the translation will fallback to 'Nectar'.

languageChanged Event

Whenever the current language of the app is changed, languageChanged event is emitted by the app, which you can listen to and perform required actions. For example,

app.on('languageChanged', function(language) {

});

Read the official documentation of i18next for advanced usage here

i18next
https://www.i18next.com