Перевод страниц на лету
 

Доброго времени суток форумчане! Пытаюсь сделать автоматический перевод страниц сайта на другие языки. Более подробнее _https://update.lik-astana.kz/ скрипт взял на github - https://github.com/get-web/google-tr...-custom-widget Скрипт установил на сайт но получаю ошибку
Вот часть скрипта где ошибка google-translate.js:43

if (config.langFirstVisit && !$.cookie("googtrans")) {
		/* Если установлен язык перевода для первого посещения и куки не назначены */
		/* If the translation language is installed for the first visit and cookies are not assigned */
		TranslateCookieHandler("/auto/" + config.langFirstVisit);
	}

Понимая что ошибка с куками но самостоятельно решить не получается :help: :help: :help: .

А где определяется и устанавливается config?
В ошибке именно про него написано: config is undefined

Определение config-га в этом файле нет, на гитхабе тоже не описано. В файлах что подтягиваются тоже нет. Вот сам блок с флагами

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

<div class="language">		
<img src="/modules/mod_translate/images/kz.png" alt="kk" data-google-lang="kk" class="language__img" />
<img src="/modules/mod_translate/images/ru.png" alt="ru" data-google-lang="ru" class="language__img" />
<img src="/modules/mod_translate/images/us.png" alt="en" data-google-lang="en" class="language__img" />
</div>

Либо может посоветуете рабочий скрипт перевода, необходимо переводить страницы на лету.

Вы что то сильно переделали, по сравнению с тем, что написано на гитхабе.
Там нет вызова скрипта

<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>

Там этот скрипт вызывается автоматически и только после того, как загрузится DOM.

document.addEventListener("DOMContentLoaded", (event) => {
	/* Подключаем виджет google translate */
	/* Connecting the google translate widget */
	let script = document.createElement("script");
	script.src = `//translate.google.com/translate_a/element.js?cb=TranslateWidgetIsLoaded`;
	document.getElementsByTagName("head")[0].appendChild(script);
});

И он должен вызвать функцию TranslateInit, после того, как загрузится с параметром config.

Да действительно ошибка пропала, спасибо! Но перевод так и не происходит

если подключаю как на гит
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
страница перестает грузится вовсе

попробовал вариант с nativejs - https://github.com/get-web/google-tr...aster/nativejs Просто перезагружает страницу но перевода нет. Подскажите пожалуйста, что не так

У вас большой сайт, где уже подключено 100500 всяких скриптов. И разбираться как они там между собой взаимодействуют никто не будет.
Обычно для чего то нового делается небольшой тестовый пример, буквально одна страничка с текстом и добиваются, что бы она работала (или не работала). Только так можно понять, что и как надо подключать

Может посоветуете что-то что будет работать.
После подключения nativejs появились такие ошибки

Вот я просто тупо взял html файл отсюда
https://github.com/get-web/google-tr...ejs/index.html
js и css файлы
отсюда
https://github.com/get-web/google-tr...e-translate.js
и отсюда
https://github.com/get-web/google-tr...-translate.css
Все собрал, установил на локальный сервер.
Все работает.
Как, что, куда вы подключаете мне неизвестно.

Делаю модуль для joomla, подключаю все как описано на гитхабе.
Модуль прикрепил, если есть joomla можете глянуть

Я не знаком с joomla

Попробовал на другом домене (сайте), все работает _https://studio-it.kz/
Получается проблема непосредственно на данном сайте. Подскажите пожалуйста, как выяснить в чем именно проблема. Скажу честно в JS не селен, совсем не селен. Помогите пожалуйста разобраться

Как я понял проблема вот в этой ошибке

Ресурс с «https://translate-pa.googleapis.com/v1/supportedLanguages?%5Bobject%20Map%20Iterator%5D=%5Bobject%20Map%20Iterator%5D» был заблокирован из-за несоответствия MIME-типа («application/json») (X-Content-Type-Options: nosniff).

Но где подключается этот скрипт я не нашел. Можно ли обойти как то обойти ошибку несоответствия MIME-типа, может как то через .htaccess можно

И этот сайт зачем то использует service worker.
Не должно быть обращения
%5Bobject%20Map%20Iterator%5D=%5Bobject%20Map%20It erator%5D - это полнейшая чушь.
Те сайты, которые работают, делают осмысленное обращение

Вы решили свою проблему?
Сейчас, вроде как, ошибки с конфигом нет, но перевод работает криво - не переключает выбранный язык на другой.
Это связано с тем, что скрипт некорректно обновляет значение кукис, обновляется только одна из трех записей. Можете сами убедиться в этом воспользовавшись консолью.

service worker отключил, использовал его для запроса на установку ярлыка на смартфонах.

Да я понимаю что обращение неправильное но как исправить эту ошибку не знаю.

Нет, проблема так и осталась

Удалил модули которые висели в консоли с ошибками и язык перестал вообще срабатывать

Пара часов в отладчике и я понял в чем дело.
(но как вам помочь - не знаю)
Есть там один файл
js/mootools-core.js?9957067829b7c9c152dcce3464c5724d
В нем переопределяются некоторые стандартные функции js.
Вероятно это полифилы для браузеров, в которых их не было.
В нем криво переопределен полифил для Array.from.
Он неверно работает для случая

const  m = new Map();
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
const a = Array.from(m);

Вместо массива
[['a',1],['b',2],['c',3]]
Он возвращает массив из одного объекта
[MapIterator]

Не знаю будет ли что то работать без этого файла или нет.

PS И, кстати
https://mootools.net/core/docs/1.6.0...ated-Functions

Это библиотека движка Virtuemart, если выпилить подключение mootools то при обновлениях движка он опять пропишется. Сам файл _update.lik-astana.kz/media/system/js/mootools-core.js при этом не обновляется

Тогда хз, что делать. Один из скриптов google-translate вызывает этот самый Array.from, передавая ему Map как параметр. Ну и в результате получает всякую чушь.
Попробовать взять новую версию и вручную ее запихнуть.

файл mootools-core.js был в одну строку, начал переносить строки и сайт начал автоматически переводить сайт на Казахский. Начали появятся ошибки в консоли. Сейчас перенесу все строки посмотрим что покажет.
Если не поможет то буду пробовать

Да, он минифицированный.
Возможно там остались старые куки. Надо почистить.

Чистил и в браузере и кэш на сайте

Тут вот на что я обратил внимание. Если посмотреть на сайт, который работает (_https://studio-it.kz/), то там устанавливается два кука

googtrans /ru/kk для studio-it.kz
googtrans /ru/kk для .studio-it.kz

А для _https://update.lik-astana.kz/ три

googtrans /ru/kk для .update.lik-astana.kz
googtrans /ru/en для update.lik-astana.kz
googtrans /ru/en для .lik-astana.kz

Причем с разными значениями
Тут уже надо разбираться и экспериментировать.

Файл google-translate.js
строки 23-25

/* Если скрипт не работает или работает неправильно, раскомментируйте и укажите основной домен в свойстве domain */
	/* If the script does not work or does not work correctly, uncomment and specify the main domain in the domain property */
	// domain: "Get-Web.Site"

Я, честно говоря, не очень понимаю, что там должно стоять.
Можно попробовать раскомментировать и поставить туда
domain: "lik-astana.kz"

Еще в этом файле меня очень смущает строка 103

if (domain == "undefined") return;

Я не могу ее объяснить.
Либо попробовать ее исправить на

if (typeof domain == "undefined") return;

(при этом закомментировать строку 25)

Или попытаться в строку 25 написать
domain: "undefined"

Может можно как-то после отработки скрипта чистить куки googtrans

Можно, конечно.
В файле google-translate.js строки 15-17, раскомментариваем и ставим какое-нибудь слово, например

/* Если хотите подписаться на событие "FinishTranslate" (Момент когда скрипт закончил перевод), расскоментируйте и добавьте любое проверочное слово на оригинальном языке */
	/* If you want to subscribe to the "FinishTranslate" event (The moment when the script finished translating), uncomment and add any test word in the original language */
	 testWord: "Кошка",

Затем ставим обработчик события "FinishTranslate"

<script>
document.addEventListener("FinishTranslate", () => {
   // Тут удаляем куки
	Cookies.remove("googtrans");
})
</script>

Только наверно надо удалять все куки с путями, как их устанавливали в google-translate.js (строки 94-114).
Пробовать надо. Я мог попробовать только на простейшем примере.

так не срабатывает

Что именно не срабатывает?

document.addEventListener("FinishTranslate", () => {
   // Тут удаляем куки
    Cookies.remove("googtrans");
})

Это срабатывает?

Слово в
testWord: "Кошка",
лучше ставить русское, что бы она его переводила. Хотя событие вроде и так посылает. Правда где оно у вас ловится, я не нашел.

Вот так не срабатывает

const googleTranslateConfig = {
	/* Original language */
	lang: "ru",

	/* Если хотите подписаться на событие "FinishTranslate" (Момент когда скрипт закончил перевод), расскоментируйте и добавьте любое проверочное слово на оригинальном языке */
	 testWord: "куки",

	/* Язык, на который переводим при первом посещении */
	// langFirstVisit: 'en',

	/* Если скрипт не работает или работает неправильно, раскомментируйте и укажите основной домен в свойстве domain */
   // domain: "lik-astana.kz"
	domain: "undefined"

};

document.addEventListener("DOMContentLoaded", (event) => {
	
	/* Подключаем виджет google translate */
	let script = document.createElement("script");
	script.src = `//translate.google.com/translate_a/element.js?cb=TranslateWidgetIsLoaded`;
	document.getElementsByTagName("head")[0].appendChild(script);
});


function TranslateWidgetIsLoaded() {
	TranslateInit(googleTranslateConfig);
}

function TranslateInit(config) {
	if (config.langFirstVisit && !Cookies.get("googtrans")) {
		/* Если установлен язык перевода для первого посещения и куки не назначены */
		TranslateCookieHandler("/auto/" + config.langFirstVisit);
	}

	let code = TranslateGetCode(config);

	TranslateHtmlHandler(code);

	if (code == config.lang) {
		/* Если язык по умолчанию, совпадает с языком на который переводим, то очищаем куки */
		TranslateCookieHandler(null, config.domain);
	}

	if (config.testWord) TranslateMutationObserver(config.testWord, code == config.lang);


	/* Инициализируем виджет с языком по умолчанию */
	new google.translate.TranslateElement({
		pageLanguage: config.lang,
		multilanguagePage: true, // Your page contains content in more than one languages
	});

	/* Вешаем событие  клик на флаги */
	TranslateEventHandler("click", "[data-google-lang]", function (e) {
		TranslateCookieHandler(
			"/" + config.lang + "/" + e.getAttribute("data-google-lang"),
			config.domain
		);
		/* Перезагружаем страницу */
		window.location.reload();
	});
}

function TranslateGetCode(config) {
	/* Если куки нет, то передаем дефолтный язык */
	let lang =
		Cookies.get("googtrans") != undefined && Cookies.get("googtrans") != "null"
			? Cookies.get("googtrans")
			: config.lang;
	return lang.match(/(?!^\/)[^\/]*$/gm)[0];
}

function TranslateCookieHandler(val, domain) {
	/* Записываем куки /язык_который_переводим/язык_на_который_переводим */
	Cookies.set("googtrans", val, {
		domain: document.domain,
		path: '/'
	});
	Cookies.set("googtrans", val, {
		domain: "." + document.domain,
		path: '/'
	});

	if (domain == "undefined") return;
	/* записываем куки для домена, если он назначен в конфиге */
	Cookies.set("googtrans", val, {
		domain: domain,
		path: '/'
	});

	Cookies.set("googtrans", val, {
		domain: "." + domain,
		path: '/'
	});
}

function TranslateEventHandler(event, selector, handler) {
	document.addEventListener(event, function (e) {
		let el = e.target.closest(selector);
		if (el) handler(el);
	});
}

function TranslateHtmlHandler(code) {
	/* Получаем язык на который переводим и производим необходимые манипуляции с DOM */
	if (document.querySelector('[data-google-lang="' + code + '"]') !== null) {
		document
			.querySelector('[data-google-lang="' + code + '"]')
			.classList.add("language__img_active");
	}
}

function TranslateMutationObserver(word, isOrigin) {

	if (isOrigin) {
		document.dispatchEvent(new CustomEvent("FinishTranslate"));
	} else {

		/* Создаем скрытый блок в который добавляем тестовое слово на оригинальном языке. Это позволит нам отследить момент когда сайт будет переведен и вызвать событие "FinishTranslate"  */

		let div = document.createElement('div');
		div.id = 'googleTranslateTestWord';
		div.innerHTML = word;
		div.style.display = 'none';
		document.body.prepend(div);

		let observer = new MutationObserver(() => {
			document.dispatchEvent(new CustomEvent("FinishTranslate"));
			observer.disconnect();
		});

		observer.observe(div, {
			childList: false,
			subtree: true,
			characterDataOldValue: true
		});
	}
}

	document.addEventListener("FinishTranslate", () => {
	   // Тут удаляем куки
	    Cookies.remove("googtrans");
	})

Может-ли скрипт не срабатывать на поддомене? Пробую разные варианты сброса куков но нечего не срабатывает

Просмотрел кучу статей, примеров скриптов. Решение своей задачи так и не нашел. Если обращаться к обучалком то там вообще нет информации в данном направлении. Уважаемые форумчане, помогите пожалуйста разобраться с куками в данном скрипте

Очень мало идей.
К тому же нет возможности самому, какую то идею опробовать.