JSFiddle - React, Tailwind, and code Playground

Fliplet component i10n example

by ibroom

HTML

<script src="https://api.fliplet.com/sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/19.4.4/i18next.min.js"></script>
<h1 data-i18n-key="component.login:title">Login</h1>
<p data-i18n-key="component.login:instruction">Enter your access details below</p>
<input type="email" class="form-control profile_email" name="Email" data-i18n-key="component.login:emailPlaceholder" data-i18n-type="attr" data-i18n-attr="placeholder" placeholder="Enter your email" autocomplete="false" />
<input type="password" class="form-control profile_password" data-i18n-key="component.login:passwordPlaceholder" data-i18n-type="attr" data-i18n-attr="placeholder" name="Password" placeholder="Enter your password" autocomplete="false" />
<p class="text-danger login-error hidden" data-i18n-key="component.login:mismatch">The details you entered don’t match our records. Please try again.</p>
<p><button class="btn btn-primary btn-login" type="submit">
  <span class="btn-label" data-i18n-key="component.login:action">Log in</span>
</button></p>

JavaScript

i18next.init({
  lng: 'zh',
  fallbackLng: 'en',
  resources: {
    zh: {
      'component.login': {
        title: '登入',
        instruction: '請填入帳號資料',
        mismatch: '您輸入的資料不符合我們的紀錄。請再嘗試一次。',
        action: '登入',
        loading: '載入中',
        emailPlaceholder: '輸入您的電子郵件',
        passwordPlaceholder: '輸入您的密碼',
        loginError: '登入失敗'
      }
    },
    en: {
      'component.login': {
        title: 'Login',
        instruction: 'Enter your access details below',
        mismatch: 'The details you entered don’t match our records. Please try again.',
        action: 'Login',
        loading: 'Loading...',
        emailPlaceholder: 'Enter your email address',
        passwordPlaceholder: 'Enter your password',
        loginError: 'Login error'
      }
    }
  }
}).then(function() {
  $('[data-i18n-key]').each(function() {
    var $el = $(this);
    var key = $el.data('i18n-key');

    if (!i18next.exists(key)) {
      // i18n key not found
      return;
    }

    switch ($el.data('i18n-type')) {
      case 'attr':
        // Update HTML attribute
        var attr = $el.data('i18n-attr');

        if (!attr) {
          break;
        }

        $el.attr(attr, i18next.t(key));
        break;
      default:
        // Update inner HTML
        $el.html(i18next.t(key));
        break;
    }
  });

  // Fire hook for other features to adjust UI render if necessary
  Fliplet.Hooks.run('i10nComplete');
});


$('.btn-login').on('click', function () {
	alert(_.get(i18next, 't') && i18next.exists('component.login:loginError')
  	? i18next.t('component.login:loginError')
    : 'Login error' );
});