Common pitfalls and challenges with the translation plugin Weglot on the way to more traffic and visitors

Photo by Nareeta Martin on Unsplash

This text, however, will focus specifically on the technical challenges we have had to overcome with Weglot over the past two years.

Auto-switcher and caching

The problem

The Weglot option Auto switch is incompatible with nginx fastcgi cache.

Our solution

(function() {  if (!document.querySelectorAll) {
return;
}
var nullStorage = {};
nullStorage.getItem = function (name) {return null};
nullStorage.setItem = function (name, value) {};
var localStorage = window.localStorage || nullStorage;
var sessionStorage = window.sessionStorage || nullStorage;
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('.country-selector li a').forEach(function(a) {
a.addEventListener("click", function (event) {
localStorage.setItem('langSelect', a.parentElement.dataset.codeLanguage);
});
})
});
/* break if the url is not the main page or an url parameters exist */
if (window.location.pathname !== "/" || window.location.pathname.indexOf('?') !== -1) {
return;
}
var userLang = navigator.language || navigator.userLanguage;
var browserLang = userLang.split('-')[0].toLowerCase();
if (!browserLang || browserLang === "de") {
return;
}
var langSelect = localStorage.getItem('langSelect');
var langRedirect = sessionStorage.getItem('langRedirect');
if (langRedirect && !langSelect) {
return;
}
sessionStorage.setItem('langRedirect', browserLang); var urlLang;
switch (browserLang) {
case 'en':
case 'fr':
case 'ru':
case 'es':
urlLang = browserLang;
break;
default:
urlLang = 'en';
break;
}
if (langSelect) {
urlLang = langSelect;
}
if (urlLang === 'de') {
return;
}
window.location.replace('https://seatable.io/' + urlLang + '/');})();

Link boxes ignore the current language selection

The problem

Without tweaking: the link boxes always link to the original language — in this case, German. :-(
<div class="flex_column ..." data-link-column-url="https://seatable.io/en/docs/">
<a href="https://seatable.io/docs/">...</a>
</div>

Our solution

/**
* data-link-column-url ignoriert weglot
*
* https://developers.weglot.com/wordpress/use-cases/linkedin-share-post-translate-oembed-wp-url
*/
function seatable_weglot_localise_data_link_url($html)
{
$url = get_site_url();
$search = "data-link-column-url=\"$url/";
$current_language = weglot_get_current_language();
$default_language = weglot_get_original_language();
if ($current_language !== $default_language) {
$html = str_replace($search, "data-link-column-url=\"$url/$current_language/", $html);
}
return $html;
}
add_filter('weglot_html_treat_page', 'seatable_weglot_localise_data_link_url');

Anchor texts jump to the wrong place

The problem

Our solution

Hide language switcher on scroll down

The problem

The language switcher covers the footer

Our solution

// in functions.php: hide weglot dropdown on scrolldown
function hide_weglot()
{
wp_enqueue_script('customjs', '/wp-content/themes/enfold-child/hideWeglotDropdown.js', array('jquery'), 2, true);
}
add_action('wp_enqueue_scripts', 'hide_weglot', 100);
jQuery(window).scroll(function(){
var weglotdropdown = jQuery(".weglot-dropdown");
scroll = jQuery(window).scrollTop();
if (scroll >= 1000) weglotdropdown.fadeOut();
else weglotdropdown.fadeIn();
});

The original language cannot be the fallback language

The problem

The hreflang-tags tell Google everything: which languages are offered and which is the fallback language

Our solution

Crawler to prevent Weglot API errors

The problem

<!--Weglot error API : "Exception too many calls"-->

Our solution

<?php
error_reporting(E_ALL | E_STRICT);
ini_set('display_errors', 'On');
$sitemaps = [
'https://seatable.io/sitemap_index.xml',
];
$crawler = new BJ_Crawler($sitemaps);
$crawler->run();

class BJ_Crawler
{
protected $_sitemaps = null;
protected $_urls = null;
public function __construct($sitemaps = null)
{
$this->_sitemaps = [];
$this->_urls = [];
if (! is_null($sitemaps)) {
if (! is_array($sitemaps)) {
$sitemaps = [ $sitemaps ];
}
foreach ($sitemaps as $sitemap) {
$this->add_sitemap($sitemap);
}
}
}
public function add_sitemap($sitemapurl)
{
if (in_array($sitemapurl, $this->_sitemaps)) {
return;
}
$this->_sitemaps[] = $sitemapurl; $ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $sitemapurl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$content = curl_exec($ch);
$http_return_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
if ('200' != $http_return_code) {
return false;
}
$xml = new SimpleXMLElement($content, LIBXML_NOBLANKS); if (! $xml) {
return false;
}
switch ($xml->getName()) {
case 'sitemapindex':
foreach ($xml->sitemap as $sitemap) {
$this->add_sitemap(reset($sitemap->loc));
}
break;
case 'urlset':
foreach ($xml->url as $url) {
$this->add_url(reset($url->loc));
}
break;
default:
break;
}
}
public function add_url($url)
{
if (! in_array($url, $this->_urls)) {
$this->_urls[] = $url;
$url_parse = parse_url($url);
$this->_urls[] = $url_parse['scheme'] ."://". $url_parse['host'] ."/en". $url_parse['path'];
$this->_urls[] = $url_parse['scheme'] ."://". $url_parse['host'] ."/fr". $url_parse['path'];
$this->_urls[] = $url_parse['scheme'] ."://". $url_parse['host'] ."/es". $url_parse['path'];
$this->_urls[] = $url_parse['scheme'] ."://". $url_parse['host'] ."/ru". $url_parse['path'];
}
}
public function run()
{
$i = 0;
require_once 'vendor/autoload.php';
$httpClient = new \GuzzleHttp\Client();
$purged_urls = [];
foreach ($this->_urls as $url) {
$response = $httpClient->get($url);
$htmlString = (string) $response->getBody();
$cacheStatus = $response->getHeaderLine('X-FastCGI-Cache');
if ($cacheStatus === "HIT" and strpos($htmlString, 'Weglot error API') !== false) { // <!--Weglot error API : "Exception too many calls"--> was found.
echo " - PURGE!";
$purged_urls[] = $url;
$url_parse = parse_url($url);
$purge_url = $url_parse['scheme'] ."://". $url_parse['host'] ."/purge". $url_parse['path'];
$response = $httpClient->get($purge_url);
usleep(500000); // 0.5 sec.
$response = $httpClient->get($url);
} elseif ($cacheStatus === "HIT") {
usleep(1000);
} elseif ($cacheStatus === "MISS" or $cacheStatus === "EXPIRED") {
// usleep(1*1000000); // 1 sec.
}
echo "\n";
}
}
}
Photo by Souvik Banerjee on Unsplash

With Weglot, multilingual websites are a breeze.

Try out Weglot. You will be amazed.

--

--

--

Managing director of SeaTable GmbH. Writing about automation, IT and things he tries again. Lives in Mainz, Germany.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Digital Twin Technology — Use Cases, Solutions, and Examples

Covering up the Skipped Beat in FCM Conceptualization: Distinction between Notification Messages…

Play Framework HTTPS Hello World with Docker

PyBay Reinvented…and how to get your ticket at no cost

The Story of a Family Man in a Fast-paced Engineering Team

Development excellence @DFDS

Best Practices for Bash Scripts

Let’s Build A SaaS Application From Scratch Part 2 — Initial Project Setup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christoph Dyllick-Brenzinger

Christoph Dyllick-Brenzinger

Managing director of SeaTable GmbH. Writing about automation, IT and things he tries again. Lives in Mainz, Germany.

More from Medium

Want to create an app? Don’t make my mistakes

Journey to “portfolio version 3

Why Is Responsive Web Design Important?

The Journey to Juno College