Afficher du HTML personnalisé dans l'en-tête pour un membre d'un groupe spécifique

Dev
1

Hello Discourse Fam! I’m hoping that there’s an easy solution for this! I feel like the answer is that I need to use some Javascript.

We have 4 buttons in the “after header” section of our admin CSS/HTML settings.

image
image1189×397 98 KB

We would like to have some buttons only visible to members of specific groups, with the rest of the buttons visible to all users.

e.g. Let’s say we want those main 4 buttons for everyone, but we want another button to only be visible to the members of a particular GROUP.

I don’t know JS so if it’s really simple and someone could help provide a snippet or something, that would be so helpful :pray:

4 « J'aime »
2

I found this article which seems very similar, for the Zendesk platform, but I think that’s the type of functionality we’re looking for!

1 « J'aime »
3 
<div id="after-header">Stuff</div>

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        const isInGroup1 = groups.some(g => g.name === 'group1');
        const isInGroup2 = groups.some(g => g.name === 'group2');
        const isInGroup3 = groups.some(g => g.name === 'group3');
        if (isInGroup1) { 
            $("#after-header").addClass("group1");
         }
        if (isInGroup2) { 
            $("#after-header").addClass("group2");
         }
        if (isInGroup3) { 
            $("#after-header").addClass("group3");
         }         
    });
</script>

.button-a,
.button-b {
    display: none;
}
#after-header.group1 .button-a {
    display: block
}
#after-header.group2 .button-b {
    display: block
}

It also seems to work if you replace
api.onPageChange(() => {
with
$( document ).ready(function() {
and then the script won’t load on every page, but I never know for sure where I need api.onPageChange(() => { .

5 « J'aime »
4

If you install this component, all groups of the current user will be added as classes in the page body, making it easy for CSS only further changes.

https://github.com/discourse/discourse-groups-css-classes-in-body

7 « J'aime »
5

haha, that was going to be the next thing I tried to figure out

1 « J'aime »
7

Salut,

Je cherchais quelque chose de similaire, mais en excluant certains groupes, alors j’ai essayé avec ChatGPT, et la réponse était :

Pour créer un thème HTML dans Discourse qui déclenche un script excluant des groupes spécifiques, vous devrez utiliser les options de personnalisation de thème de Discourse ainsi que JavaScript pour gérer les exclusions de groupe. Discourse fournit api.getCurrentUser() pour récupérer les détails de l’utilisateur, y compris ses groupes, ce qui peut être utile pour déclencher conditionnellement votre script.

Voici un exemple de la façon dont vous pourriez implémenter cela dans la section </head> de votre thème ou composant :

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Récupérer les détails de l'utilisateur actuel
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // Liste des noms de groupes que vous souhaitez exclure de l'exécution du script
            const excludedGroups = ['group1', 'group2'];

            // Obtenir les groupes de l'utilisateur
            const userGroups = currentUser.groups.map(group => group.name);

            // Vérifier si l'utilisateur appartient à un groupe exclu
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // Votre logique de script personnalisée ici
                console.log('Le script est exécuté pour cet utilisateur.');
                // Exemple : déclencher toute logique personnalisée pour les utilisateurs non exclus
                // customScriptFunction();
            } else {
                console.log('L\'utilisateur fait partie d\'un groupe exclu, le script ne sera pas exécuté.');
            }
        }
    });
</script>

Explication :

  1. api.onPageChange() : Exécute le script chaque fois que la page change.
  2. api.getCurrentUser() : Récupère les détails de l’utilisateur actuellement connecté.
  3. excludedGroups : Liste les groupes que vous souhaitez exclure.
  4. userGroups.includes(group) : Vérifie si l’utilisateur appartient à un groupe exclu.
  5. Exécution conditionnelle du script : Le script ne s’exécutera que si l’utilisateur ne fait pas partie d’un groupe exclu.

Vous pouvez remplacer customScriptFunction(); par le script que vous souhaitez exécuter. Faites-moi savoir si vous avez besoin d’ajustements supplémentaires !

Je veux dire, mon esprit est complètement époustouflé par ça :exploding_head:. Je ne l’ai pas encore essayé, mais le code ChatGPT est-il correct ?