11527 sujets

JavaScript, DOM et API Web HTML5

Language-switcher

salut,

ayant résolu mon problème de theme-switcher grâce à https://forum.alsacreations.com/topic-5-90990-1-Resolu-Theme-switcher.html#p580934, j'ai voulu voir pour adapter ça à mon language-switcher et bien sûr étant nul en javascript ça n'a pas fonctionné, je me permet donc je vous solliciter de nouveau.

mon idée étant :
- https://fr.toto.fr devienne https://en.toto.fr quand je clique sur le bouton english ou encore https://fr.toto.fr/tutoriels.php devienne https://en.toto.fr/tutoriels.php et bien sûr que le choix de la langue soit stocké dans un cookie et réutilisé.

en me basant sur le lien fournit dans mon post de problème de thème j'ai donc fait ceci, le header :
<html lang="fr" data-selected-lang="fr" data-selected-theme="dark">

le menu :
<div aria-label="Changer de langue" class="dropdown-toggle fa-solid fa-language fa-lg fa-fw language-switcher">
    <button-group class="dropdown-menu dropdown-menu-end rollDown">
        <button aria-label="Français" aria-pressed="true" data-lang="fr"><span class="fi fi-fr flag-icon"></span>Français</button>
        <button aria-label="English" aria-pressed="false" data-lang="en"><span class="fi fi-gb flag-icon"></span>English</button>
    </button-group>
</div>

le footer :
<script defer src="../static/js/language-switcher.min.js" type="text/javascript"></script>

dans le js :
const pressedButtonSelector = '[data-lang][aria-pressed="true"]';
const defaultLanguage = 'fr';

const applyLanguage = (language) => {
    const buttons = document.querySelectorAll('.language-switcher button');
    buttons.forEach(button => {
        const lang = button.getAttribute('data-lang');
        if (lang === language) {
            button.setAttribute('aria-pressed', 'true');
        } else {
            button.setAttribute('aria-pressed', 'false');
        }
    });
};

const handleLanguageSelection = (event) => {
    const target = event.target;
    const isPressed = target.getAttribute('aria-pressed');
    const language = target.getAttribute('data-lang');

    if (isPressed !== "true") {
        const currentUrl = window.location.href;
        const newUrl = currentUrl.replace(/\/\/(fr|en)\./, "//" + language + ".");
        window.location.href = newUrl;

        applyLanguage(language);

        localStorage.setItem('selected-language', language);
    }
};

const setInitialLanguage = () => {
    const savedLanguage = localStorage.getItem('selected-language');
    if (savedLanguage && savedLanguage !== defaultLanguage) {
        applyLanguage(savedLanguage);
    }
};

setInitialLanguage();

const langSwitcher = document.querySelector('.language-switcher');
const buttons = langSwitcher.querySelectorAll('button');

buttons.forEach((button) => {
    button.addEventListener('click', handleLanguageSelection);
});

étant une bille en js, j'ai demandé à chatgpt voir s'il ne pouvait pas m'aider à trouver le problème mais sans succès.

petite précision importante :
actuellement je construit ma nouvelle version de site sur https://test.toto.fr, la version française est sur https://test.toto.fr/fr et la version anglaise sur https://test.toto.fr/en.
alors certes si le bouton fonctionnait ça devrait m'emmener sur https://en.toto.fr sauf que comme les sous-domaines https://fr.toto.fr et https://en.toto.fr n'existent pas encore et que mon site est configuré pour renvoyer toute page inexistante vers la page d'accueil je devrais au moins arriver sur https://toto.fr (qui elle existe) or je n'ai actuellement aucune redirection.
Salut,

Hum perso non je dirais que tu n'es pas du tout sur la bonne voie Smiley sweatdrop si c'est des URL différentes, je ne comprends pas pourquoi tu as besoin de faire du javascript...

Pour moi c'est directement au moment où tu crée ta page (coté serveur) que tu vas mettre le lien vers la même page dans l'autre langue.
A priori tu fais du php, tu auras besoin de la variable $_server : https://www.php.net/manual/fr/reserved.variables.server.php

Tu parse la variable, si tu la personne a demandé une page en 'en' alors tu mettra un lien vers une page 'fr' et vice versa pour 'fr' -> 'en'.
salut bon finalement je me suis séparé de mon script de changement de langues qui en faites fonctionnait mais j'avais malencontreusement mis le script juste avant </body> au lieu de le mettre dans le <head>. car je dois bien avoué que comme ce n'est pas un site pro j'ai je dois bien l'avouer la flegme de traduire chaque page manuellement et encore plus pour les ajouts futur donc je me suis tourné vers https://gtranslate.io en mode gratuit que j'ai pu customiser via css pour l'intégrer dans mon menu comme je voulais.

alors certes la traduction surtout en mode gratuit ne sera pas tip top et je l'aurait pas les url qui vont bien mais ça va simplifier grandement la suite.

@2lwess voilà la nouvelle version en construction https://test.breat.fr pour remplacer à terme https://breat.fr
il n'y a aucun framework (bootstrap etc) si ce n'est font awesome et gtranslate.

@Mathieuu autant html et css je me dépatouille, autant php à par les include que j'utilise beaucoup je ne connait pas ou si peu Smiley smile
par exemple pour la page d'accueil j'ai :
index.php avec en include :
- abp.php (détecteur d'antipub pour afficher une info)
- footer.php
- header.php (avec toutes les meta, link, etc sauf title et description qui sont par page)
- menu.php
- sidebar.php

tout ça pour simplifier la gestion du bazar
Prévenir un modérateur
Répondre au sujet
Aller à