• Как лучше реализовать смену языка на сайте?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Вот пример кода

    Кусок разметки
    <nav class="site-nav">
    	<ul id="navigation">
    		<li data-menuanchor="about-us">
    			<a href="#about-us" data-lang="about_academy">Про академию</a>
    		</li>
    		<li data-menuanchor="what-we-offer">
    			<a href="#what-we-offer" data-lang="proposal">Что мы предлагаем</a>
    		</li>
    		<li data-menuanchor="your-benefits">
    			<a href="#your-benefits" data-lang="your_result">Что ты получишь</a>
    		</li>
    		<li data-menuanchor="our-blog">
    			<a href="#our-blog" data-lang="blog">Блог</a>
    		</li>
    		<li data-menuanchor="testimonials">
    			<a href="#testimonials" data-lang="feedback">Отзывы</a>
    		</li>
    		<li data-menuanchor="contacts">
    			<a href="#contacts" data-lang="contacts">Контакты</a>
    		</li>
    		<li class="language-switcher-wrapper">
    			<button class="language-switcher ua">UA</button>
    		</li>
    	</ul>
    </nav>

    data-lang - это то что нужно переводить
    Сами данные лежат в двух файлах в папке translations
    ru.json
    {
      "about_academy": "Про Академию",
      "proposal": "Что мы предлагаем",
      "your_result": "Что ты получишь",
      "feedback": "Что говорят выпускники",
      "blog": "Блог",
      "contacts": "Контакты",
      "our_mission_main": "Наша миссия"
    }

    ua.json
    {
      "about_academy": "Про Академію",
      "proposal": "Що ми пропонуємо",
      "your_result": "Що ти отримаєш",
      "feedback": "Що кажуть випускники",
      "blog": "Блог",
      "contacts": "Контакти",
      "our_mission_main": "Наша місія"
    }

    JS
    (function($) {
    
    function Translate() { 
    	//initialization
    	this.init =  function(attribute, lng) {
    		this.attribute = attribute;
    		this.lng = lng;
    	};
    	//translate 
    	this.process = function() {
    		var _self = this;
    		var xrhFile = new XMLHttpRequest();
    		//load content data 
    		xrhFile.open("GET", "./translations/"+this.lng+".json", false);
    		xrhFile.onreadystatechange = function () {
    			if(xrhFile.readyState === 4) {
    				if(xrhFile.status === 200 || xrhFile.status == 0) {
    					var LngObject = JSON.parse(xrhFile.responseText);
    					console.log(LngObject["name1"]);
    					var allDom = document.getElementsByTagName("*");
    					for(var i =0; i < allDom.length; i++){
    						var elem = allDom[i];
    						var key = elem.getAttribute(_self.attribute);
    						if(key != null) {
    							console.log(key);
    							elem.innerHTML = LngObject[key];
    						}
    					}
    				}
    			}
    		};
    		xrhFile.send();
    	};
    }
    
    // Change language
    function loadNewLang(new_lang) {
    	var translate = new Translate();
    	var currentLng = new_lang;
    	var attributeName = 'data-lang';
    	translate.init(attributeName, currentLng);
    	translate.process();
    }
    
    loadNewLang('ua');
    
    $('.language-switcher').on('click', function(e) {
    	e.preventDefault();
    	$('.preloader').removeAttr('style');
    	if($(this).hasClass('ru')) {
    		$(this).toggleClass('ru ua').text('UA');
    		loadNewLang('ua');
    		ln_preloader();
    	} else if ($(this).hasClass('ua')) {
    		$(this).toggleClass('ua ru').text('RU');
    		loadNewLang('ru');
    		ln_preloader();
    	}
    });
    
    })(jQuery);

    работает это все из под сервера
    Ответ написан
    5 комментариев