Hello !
J’ai un site en localization, et mon client aimerait que le bloc de paiement varie (en design et contenu) d’une locale à l’autre.
Je pensais cacher certaines divs en fonction des locales, est-ce que c’est la bonne approche ?
Mercii
Eh bien oui, je vais avoir des présentations de tarifs très différents (certains pays en “transactions fees only”, d’autres en “100% free”, et du coup on va forcement travailler un design différent. + certaines fonctionnalités ne sont pas accessibles dans tous les pays. Donc usine à gaz quoi...
Quel sont tes langues sur le site et les extensions de langue associé, j'ai la solution 🙂
Pour le moment j’ai :
EN
FR
ES
IT
Dans quelques temps je vais ces pays :
Qatar
Chili
Croatie
Pour moi t’as tout dit dans ta question :
J’ai un site en localization, et mon client aimerait que le bloc de paiement varie (en design et contenu) d’une locale à l’autre.
Tu veux dire passer le bloc en composant et créer des variantes du composant ? (C’est ce que tu m’as montré avec les btn je crois @Théo ROLAND?)
Le code :
<!-- [Localization Display] -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// Détermine la langue actuelle depuis l'URL de manière dynamique
const pathSegments = window.location.pathname.split('/').filter(Boolean);
const currentLang = (pathSegments[0] && /^[a-z]{2}$/i.test(pathSegments[0]))
? pathSegments[0].toLowerCase()
: "en";
// Traitement de l'élément <body>
const bodyElem = document.body;
const bodyDisplay = bodyElem.getAttribute("display");
if (bodyDisplay !== null) {
const [allowedLang, redirectSlug] = bodyDisplay.split(",").map(s => s.trim());
if (allowedLang && allowedLang !== currentLang) {
let target = redirectSlug ? redirectSlug : "/";
if (!target.startsWith("/")) target = "/" + target;
window.location.href = target;
return;
}
}
// Traitement des autres éléments munis de l'attribut "display"
document.querySelectorAll("[display]").forEach(elem => {
if (elem === bodyElem) return;
const attrValue = elem.getAttribute("display");
if (!attrValue || attrValue.trim() === "") return;
const allowedLangs = attrValue.split("-").map(s => s.trim());
if (!allowedLangs.includes(currentLang)) {
elem.remove();
}
});
});
</script>Tu peux le faire nativement désormais
Ou mieux en CSS pour pas avoir à le faire en JS
Exemple :
locale-en="true" sur une section si tu veux l’afficher que sur la partie USlocale-fr="true" sur une section si tu veux l’afficher que sur la partie US[lang="en-US"] [locale-en="true"] {
display: block !important;
}
[lang="en-US"] [locale-en="false"] {
display: none !important;
}
[lang="fr-FR"] [locale-fr="true"] {
display:block !important;
}
[lang="fr-FR"] [locale-fr="false"] {
display:none !important;
}Pourquoi vous n’utilisez pas plutot une approche component avec des variantes / des slots ?
Avec les variantes, les props, les slots, les conditions de visibility, maintenant on peut quand même assez fortement tweaker les contenus d’une langue à l’autre tout en permettant a l’utilisateur final de modifier facilement le contenu.
Moi cette approche de hide/show avec potentiel nettoyage en JS je ne le fais que quand je n’ai pas le choix. (genre tous les trucs pas gérés dans les components : collections par ex)
Les variantes de composants existent avec la localization ? Je suis pas sur (je suis pas sur Webflow là pour checker)