i18n Query String

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();
                                });
                        
                    

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now