Traduire Prestashop grâce à JavaScript, une technique bien utile (ép. 110)

Certainement que vous aussi vous avez des textes sur votre boutique Prestashop que vous désirez modifier… sauf que vous n’arrivez pas à les modifier « HARG ! »… Avec ma technique c’est de l’histoire ancienne.

La gestion des textes et des traductions devrait être simple

Prenons par exemple un titre de fiche produit ou une description, c’est très facile d’aller dans le back-office de Prestashop et de modifier ces informations en quelques clics on a accès à l’information et c’est fait.

Par contre, quand on veut traduire des éléments de l’interface ou des contenus plus spécifiques… il faut trouver le texte de traduction à changer. Le système de traductions de Prestashop ne propose pas toujours le terme dont on a besoin et ça commence déjà la frustration.

Faut être Indiana Jone pour trouver l’emplacement du texte

Voilà ce que me disent assez régulièrement des clients… « Bonjour je veux changer ce texte, je le trouve où ? »… Et vous savez quoi… même moi je ne peux pas leur répondre, parce que le système de traduction est trop décentralisé.

Du coup je dois leur demander à quel emplacement se trouve le texte à modifier, pour ensuite que je fasse une déduction si c’est une traduction du thème, d’un module (et encore savoir lequel)… et enfin espérer que la traduction se trouve disponible via le back-office (parce que ce n’est pas toujours le cas).

Dans un monde idéal, j’aimerais simplement en back-office un 1 seul champ de recherche où je cherche le terme que je veux traduire. Voir même un fichier CSV avec 2 colonnes la clé et la traduction… c’est super simple mais ça marche très bien (oui j’idéalise toujours forcément).

Un autre cas encore plus problématique

Un client m’a demandé de faire une modification de traduction dans Prestashop à un endroit stratégique et j’avoue que j’étais bien embêté… Il voulait par exemple que je change le terme « Mot de passe » en « Créer votre mot de passe ».

Le problème ici en l’occurrence, c’est que si je change ce terme en back-office de Prestashop cela va le changer partout. Bien sûr j’aurais voulu ajuster manuellement dans le template Prestashop la zone spécifiée, sauf que cela était relié au générateur de formulaires.

Du coup je me suis dit, il faut que j’override / surcharge cette partie du comportement pour que je puisse gérer cette traduction séparément sans modifier le coeur… Quand j’ai commencé à le faire, je me suis dit « Germain »… Tu es en train de sortir un Bulldozer pour changer un terme… cela n’a pas de sens.

La méthode que je propose en full « Javascript »

A ce moment là je me suis dit… franchement c’est quand même fou que je doive faire quelque chose d’aussi complexe juste pour remplacer un terme affiché à l’écran… et là j’avoue que ça m’a fait un gros « TILT » dans ma tête.

C’est pour ça que Javascript est un outil juste formidable, il permet d’intervenir sur les éléments de la page une fois qu’ils sont chargés. Du coup j’ai testé la méthode « replace » de Javascript et hop… fini les soucis le texte est remplacé à la volée.

Comme les navigateurs sont rapides, vous pourrez constater que vous n’allez même pas voir le switch de remplacement du texte… Vos visiteurs n’auront pas le temps de voir cet ajustement automatique qui prend seulement quelques millisecondes.

Oula, mais c’est mauvais pour mon référencement ça !

Sur le principe appliquer cette méthode n’est pas bon pour votre SEO, car le code source envoyé à Google c’est le texte original (sans sa traduction à la volée).

Mais il faut replacer les choses dans leurs contextes, vous n’allez pas avec cette méthode traduire des blocs complets de contenu, mais plutôt certains termes… titres de blocs, des emplacements pas faciles d’accès.

Imaginez ! Même si vous utilisez cette méthode sur 1% des termes de votre boutique Prestahop, pensez-vous que c’est cela qui va changer quelque chose à votre référencement ? Clairement non, parce que les traductions d’interfaces ne font pas votre visibilité.

Bien sûr comme je l’ai déjà montré sur un précédent billet, si vous pouvez utiliser la traduction Prestashop classique pour le faire c’est toujours mieux… mais ce n’est pas toujours possible.

Pour ce tutoriel Prestashop vous avez à disposition :

• 1 x custom.js (pour gérer les traductions à la volée)

Télécharger

Résumé de la vidéo : Des traductions Prestashop qui marchent à 100%

• On commence par naviguer sur la boutique Prestashop.
• Ensuite, on aimerait pouvoir ajuster le texte du bouton de la page de login… et on veut pouvoir le faire uniquement à cet emplacement.
• Pour cela on ajoute des règles dans le fichier « custom.js » et je vous montre comment modifier une zone de la page spécifique en utilisant les éléments via l’ID.
• Cela fonctionne aussi pour le multilingue, quelle bonne nouvelle !
• La méthode est universelle et peut fonctionner aussi sur Prestashop 1.6