AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -47%
Xiaomi Mi 11 Lite 5G noir (via ODR de 50€ et ...
Voir le deal
168 €

    Ajouter les points des membres dans la barre latérale de navigation

    Little Wildling
    Little Wildling
    FémininAge : 34Messages : 6

    Dim 11 Juil 2021 - 22:07

    Bonjour/Bonsoir

    Depuis peu, je me suis mise à la création d'un design pour un projet de forum. En suivant les instructions de taktiik ainsi que les explications de Nihil Scar Winspeare, j'ai pu ajouter et modifier une barre de navigation latérale.

    Voulant que celle-ci montre des informations importantes aux joueurs, j'ai pu rajouter le nombre de messages postés par le membre, mais aussi, le nombre de points de réputation.

    C'est là que commence mon problème. J'aimerais ajouter aussi les points gagnés en postant. Hors, après avoir passé pas mal de temps sur Never Utopia et a chercher le code dans les templates profil, je n'arrive pas à trouver. Je ne sais pas si c'est faisable, alors je me permet de demander de l'aide. Razz

    Donc la question: Est-il possible d'ajouter un code/une variable qui donnerait aux membres le nombres de points qu'ils ont gagné en postant dans le forum?

    Pour que vous puissiez mieux situé, voici un screenshot de la barre:
    Spoiler:
    Ajouter les points des membres dans la barre latérale de navigation Sans-titre

    Un grand merci d'avance à celles et ceux qui pouront m'éclairer sur ce sujet. :coeur:


    Dernière édition par Little Wildling le Mar 7 Sep 2021 - 19:19, édité 1 fois
    Little Wildling
    Little Wildling
    FémininAge : 34Messages : 6

    Sam 7 Aoû 2021 - 12:45

    Un p'tit up plein d'espoir :titanic:
    Little Wildling
    Little Wildling
    FémininAge : 34Messages : 6

    Mer 1 Sep 2021 - 15:56

    Un autre up plein d'espoir!
    Awful
    Awful
    MasculinAge : 103Messages : 198

    Ven 3 Sep 2021 - 11:06

    Hello
    Malheureusement la donnée n'a pas l'air accessible depuis l'objet _userdata. La solution qui me vient en tête ce serait un petit code JS pour la récupérer depuis le profil. Est-ce que tu as activé le profil avancé ? Si non, est-ce que tu as modifié ton template d'affichage du profil ?
    Little Wildling
    Little Wildling
    FémininAge : 34Messages : 6

    Sam 4 Sep 2021 - 16:43

    Hi!
    Merci de bien vouloir m'aider. :)
    Alors, le profil avancé, n'est pas activé et je n'ai pas touché au template. J'avais recherché dedans pour trouver le code pour les points, mais je n'avais rien trouvé. Mon niveau de codage est pas pas hyper avancé donc, je modifie seulement ce que je connais. x)
    Awful
    Awful
    MasculinAge : 103Messages : 198

    Sam 4 Sep 2021 - 19:05

    Okay, top. Bon, le désavantage c'est qu'il va y avoir un petit temps de latence pour que le nombre de points s'affiche parce qu'on est obligés de faire une requête. C'est pas spécialement dérangeant mais je ne vois pas d'autres façons de faire, donc si quelqu'un a une autre solution, qu'il n'hésite pas !

    Donc tout d'abord, on veut faire cette requête simplement si l'utilisateur est connecté, donc il faut le vérifier et on mettra notre code dans une condition :
    Code:
    const userLogged = _userdata.session_logged_in;
    if (userLogged) {
    // Notre code va dedans
    }

    Ensuite :
    - On fait une requête pour récupérer la page du profil (où est affiché le nb de points)
    - On transforme le résultat de cette requête en HTML pour pouvoir retrouver l'élément qui nous intéresse (le champ "points")
    - On peut récupérer la valeur de ce champ et on en fait ce qu'on veut
    Code:

    fetch(`/u${_userdata.user_id}`)
        .then(res => {
            return res.text();
        })
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, "text/html");
            const points = parseInt(Array.from(doc.querySelectorAll('span'))
      .find(el => el.textContent === 'Points').parentNode.parentNode.nextSibling.querySelector(".field_uneditable").innerText);
            document.querySelectorAll(".js-points").forEach(e => e.innerHTML = points);
     });

    Vu comme ça, c'est un peu indigeste donc je vais décomposer :
    Code:
    fetch(`/u${_userdata.user_id}`)
    Donc l'URL de la page du profil c'est "/u" + l'ID de l'user, qu'on récupère via l'objet _userdata

    Code:
        .then(res => {
            return res.text();
        })
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, "text/html");
    On fait la requête vers la page du profil et on en récupère le contenu qu'on parse

    Code:
    const points = parseInt(Array.from(doc.querySelectorAll('span'))
      .find(el => el.textContent === 'Points').parentNode.parentNode.nextSibling.querySelector(".field_uneditable").innerText)
    C'est là que ça devient important. Moi j'ai mis ça mais ce code ne va pas nécessairement fonctionner sur ton forum. Y'a 10 000 façons de faire mais j'avais envie de rendre ça le plus simple possible si jamais je voulais le rendre disponible pour des gens qui ne savent pas se servir de l'inspecteur de code. Donc au lieu de me servir de l'ID du champ, je me sers de son nom. Comme tu n'as pas modifié ton template, ça peut fonctionner. En gros je cherche l'élément qui contient le mot "Points" (le nom de mon champ, qu'on retrouve dans le PA > Modules > Points et réputation > Système de point et le champ "Nom du champ 'points'") et je retrouve sa valeur. Si tu as changé le nom de ton champ, il faudra remplacer "Points" par le nom de ton champ.

    Code:
    document.querySelectorAll(".js-points").forEach(e => e.innerHTML = points);
    Là je reprends le code de Nihil pour que tu puisses afficher le nombre de points d'un utilisateur où tu le souhaites.

    Si tu veux afficher les points, du coup, tu auras juste à insérer ce bout de code :
    Code:
    <span class="js-points"></span>

    Et si je résume le tout :
    Code:

    document.addEventListener("DOMContentLoaded", function() {
       const userLogged = _userdata.session_logged_in;
       if (userLogged) {
          fetch(`/u${_userdata.user_id}`)
             .then(res => {
                return res.text();
             })
             .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, "text/html");
                const points = parseInt(Array.from(doc.querySelectorAll('span'))
                   .find(el => el.textContent === 'Points').parentNode.parentNode.nextSibling.querySelector(".field_uneditable").innerText);
                document.querySelectorAll(".js-points").forEach(e => e.innerHTML = points);

             });
       }

    });


    Bien entendu, je pense que cette proposition de solution est largement améliorable, mais j'avoue ne pas avoir vraiment cherché plus loin. J'ai testé et ça fonctionne pour moi, alors...
    tongue

    Je te laisse tester cette solution et me dire si ça fonctionne chez toi :3
    Little Wildling
    Little Wildling
    FémininAge : 34Messages : 6

    Mer 8 Sep 2021 - 18:34

    Pourrais-tu me donner le nom exact du template? Dans général ou dans profil carrément? En tout cas, j'ai hâte de tester ça! :omg:
    Awful
    Awful
    MasculinAge : 103Messages : 198

    Mer 8 Sep 2021 - 20:14

    Il n'y a pas de template à modifier ! Le code JS est à insérer dans ton panneau d'administration > Modules > HTML & Javascript > Gestion des codes javascript. Tu crées un nouveau script et tu coches "sur toutes les pages" ^w^
    Contenu sponsorisé


      La date/heure actuelle est Lun 18 Oct 2021 - 10:38