### i18n Query String

### $5,668

Sales

#### Query String

This example demonstrates how to switch language using query string parameter change. i18next language detection plugin use to detect user language in the browser with support for: 1. querystring, 2. cookie, 3. localStorage, 4. navigator, 5. htmlTag. Every time on click or change event, i18next loads json file with selected language and initialize translation on a new page load. To change the language on click, use `<a href="?lng=en">EN</a>` markup.

##### Example Markup

                                <div aria-labelledby="dropdown-flag" class="dropdown-menu dropdown-menu-right">
                                    <a href="?lng=en" class="dropdown-item">
                                        <i class="flag-icon flag-icon-gb"></i> English
                                    </a>
                                    <a href="?lng=es" class="dropdown-item">
                                        <i class="flag-icon flag-icon-es"></i> Spanish
                                    </a>
                                    <a href="?lng=pt" class="dropdown-item">
                                        <i class="flag-icon flag-icon-pt"></i> Portuguese
                                    </a>
                                    <a href="?lng=fr" class="dropdown-item">
                                        <i class="flag-icon flag-icon-fr"></i> French
                                    </a>
                                </div>

##### Js Code For Switching

                                i18next
                                    .use(window.i18nextBrowserLanguageDetector)
                                    .use(window.i18nextXHRBackend)
                                    .init({
                                        debug: true,
                                        detection: {
                                            lookupQuerystring: 'lng',
                                        },
                                        fallbackLng: false,
                                        backend: {
                                            loadPath: "../../../app-assets/data/locales/{{lng}}/{{ns}}.json",
                                        },
                                        returnObjects: true
                                    },
                                    function (err, t) {
                                        // Initialize Localization
                                        jqueryI18next.init(i18next, $);

                                        $('.main-menu').localize();
                                    });