« Les clients du monde entier apprécient de consulter le contenu dans leur langue maternelle. Traduire le contenu de votre boutique peut générer davantage de ventes, car vos clients internationaux peuvent mieux comprendre votre marketing, les détails des produits, ainsi que les politiques d'expédition et de retour.
Vous pouvez activer plusieurs langues depuis votre interface d'administration Shopify afin de créer des URL distinctes pour votre contenu traduit. Lorsqu'un client accède à une URL traduite, votre boutique affiche automatiquement la version traduite si des traductions sont disponibles.
Lorsque les traductions n'existent pas, votre boutique affiche le contenu dans sa langue principale. Vous pouvez traduire le contenu de votre boutique en ligne en utilisant une application tierce compatible. Une fois la boutique traduite, les clients peuvent naviguer, passer commande et recevoir des notifications dans leur langue locale. »
(Source : https://help.shopify.com/en/manual/cross-border/multilingual-online-store)
Que faire si vous avez essayé toutes les solutions proposées et que certains contenus ne se traduisent toujours pas ? Par exemple, certaines applications ne prennent pas en charge la vente en plusieurs langues. Cela peut évidemment devenir problématique, car cela peut créer une incohérence dans votre boutique et même affecter votre score SEO.
Voici une solution qui vous permet de traduire ce contenu de manière plus complexe.
Avertissement : Je vous recommande vivement d'essayer toutes les solutions proposées par Shopify avant de tenter cette approche. Il s'agit davantage d'une solution de contournement que d'une véritable solution.
Il est important de mentionner que, par cette méthode, vous ne pourrez traduire que le contenu statique. Cela signifie que les produits affichés pour cette recommandation ne pourront pas être traduits, car leur sélection n'est pas constante.
Prenons l'exemple de l'application « fréquemment achetés ensemble ». Celle-ci ne prend pas en charge plusieurs langues ; ainsi, si vous disposez d'un site web en anglais et en français, la version française afficherait toujours le texte en anglais.
Dans cet exemple, nous allons traduire en français le titre (« Fréquemment achetés ensemble »), le libellé du prix (« Prix total : ») et le texte du bouton d'ajout au panier (« Ajouter les articles sélectionnés au panier »).
1. Identifiez vos sélecteurs pour le contenu que vous souhaitez traduire.
Ici, nous avons sélectionné la balise `div` englobante générée par l'application tierce. Il est crucial de choisir un élément qui est effectivement généré par cette application pour assurer le bon fonctionnement de notre code. Si l'élément existe déjà avant le chargement du contenu par l'application tierce, une erreur s'affichera dans votre console et le contenu ne sera pas traduit.
Ouvrez votre inspecteur (F12) ou effectuez un clic droit et sélectionnez "Inspecter". Ensuite, à l'aide du sélecteur de curseur (CTRL + SHIFT + C), sélectionnez un élément généré par l'application tierce. Dans cet exemple, notre sélecteur est “#ProductSection-product-template> div.cbb-frequently-bought-container.cbb-desktop-view”. Notez la classe “.cbb-desktop-view” qui semble indiquer une modification de la classe sur les appareils mobiles. Étant donné que nous voulons que le contenu soit traduit sur tous les appareils, nous allons pour l'instant retirer cette classe du sélecteur et nous fier à la première classe “cbb-frequently-bought-container” pour identifier correctement la div contenant le contenu à traduire.
Ainsi, notre sélecteur se présentera comme suit :
document.querySelector("#ProductSection-product-template> div.cbb-frequently-bought-container");
Ceci constituera notre variable “canvas” dans le code ci-dessous. Identifiez les sélecteurs de vos chaînes non traduites en suivant la même méthode que celle décrite au point 1.
Voici pour le titre : document.querySelector("#ProductSection-product-template> div.cbb-frequently-bought-container > h2");
Ce sélecteur est, si vous l'examinez attentivement, identique à votre div englobante, mais il cible désormais l'élément H2 qui représente le titre.
Prix total : document.querySelector("#ProductSection-product-template> div.cbb-frequently-bought-container >div.cbb-frequently-bought-recommendations-container > div >div.cbb-frequently-bought-total-price-box >span.cbb-frequently-bought-total-price-text");
AJOUTER LA SÉLECTION AU PANIER : document.querySelector("#ProductSection-product-template> div.cbb-frequently-bought-container >div.cbb-frequently-bought-recommendations-container > div > button >span");
2. Modifier le code
Modifiez le code ci-dessous en y intégrant les sélecteurs correspondant au contenu que vous souhaitez traduire, puis collez-le à la fin de votre fichier Liquid pertinent. Par exemple, si le contenu à traduire se situe dans le pied de page, vous devrez insérer ce code dans le fichier footer.liquid. Si vous hésitez sur l'emplacement ou s'il s'agit d'une traduction requise sur l'ensemble de votre site web, vous pouvez le coller à la fin de votre fichier theme.js.
Une fois votre code modifié ajouté à la fin du fichier .liquid approprié dans Shopify, votre contenu devrait désormais être correctement traduit lorsque les visiteurs consulteront la version française de votre site web.
Contenu traduit de l'application 'Produits fréquemment achetés ensemble' après exécution du code.
Comment cela fonctionne-t-il et pourquoi utiliser des observateurs ?
Shopify fonctionne différemment des autres plateformes de commerce électronique comme WordPress. Sous WordPress, les plugins (applications) sont directement intégrés au code source de votre site web. Ce n'est pas le cas pour Shopify, qui opère dans un environnement plus fermé. Les applications Shopify ne sont pas codées directement dans la plateforme ; elles injectent du contenu dans votre site web via un fichier JavaScript attaché. Cela signifie que le contenu de Shopify se charge en premier, suivi des fichiers JavaScript. L'observateur surveille votre page et attend que le contenu spécifié soit actif. Une fois que l'observateur a détecté le contenu désiré (après son chargement), nous déconnectons l'observateur et exécutons le code. En somme, il continue de rechercher ce que vous lui indiquez jusqu'à ce qu'il le trouve. Une fois trouvé, il vous en informe et se met en veille. Ce comportement est particulièrement utile avec Shopify, car la plateforme repose fortement sur les scripts. Sans observateur, le code s'exécuterait avant le chargement du contenu externe, ne trouverait pas ce que vous cherchez, générerait des erreurs et s'arrêterait sans avoir réussi à traduire le contenu souhaité. Cette approche fonctionnera pour tout contenu que vous souhaitez traduire, même s'il ne provient pas d'une application tierce. Néanmoins, je vous recommande fortement de rechercher une solution plus fiable s'il ne s'agit pas d'une application tierce, car il est probable que vous puissiez la traduire via des solutions officielles.
Vous hésitez encore sur la marche à suivre ou sur la pertinence de cette solution pour vos besoins ? Contactez-nous, nous serons ravis de vous assister !
