Comment Faire des Traductions selon la Langue du Navigateur sur Shopify

Nous allons voir dans ce tutoriel très rapide comment traduire des mots ou des phrases sur Shopify ! Le système va se baser sur la langue du navigateur du client afin de détecter la langue utilisée.

Attention: cette pratique ne remplace pas un système de traduction mais peut être utile pour traduire des termes que les applications tel que Weeglot ou Langify n’arrivent pas à traduire.

Comment l’installer et l’utiliser ?

Ca va aller très vite ! rendez-vous dans boutique en ligne – actions – modifier le code et trouvez votre dossier Ressources (Assets) – A ce stade il vous faut trouver votre fichier .css… généralement theme.js, base.js, app.js ou global.js. Une fois le fichier trouvé mettez-vous tout en bas du fichier et copiez/collez le code suivant:

function dgTranslator(language, text, newText) {  
  const userLang = navigator.language || navigator.userLanguage;   
  if(userLang.includes(language)) {
  document.body.innerHTML = document.body.innerHTML.replace(text, newText);
    }
}


dgTranslator('fr',`Hello`, `Bonjour`);
dgTranslator('es',`Hello`, `Hola`);

Le code se compose d’une function permettant de traduire une occurence.

Vous avez 2 exemples pour le français et l’espagnol !

• 1er argument : la langue du client (son navigateur)
• 2ème argument : le terme à remplacer
• 3ème argument : le nouveau terme traduit

Amusez-vous à dupliquer chaque ligne d’appel de la fonction pour chaque mot ou portion de phrase à traduire exemple à dupliquer ci-dessous:

Si c’est pas assez clair, je vous invite à regarder la vidéo  😉