Mostra HTML personalizzato nell'intestazione a un membro di un gruppo specifico

Sviluppatore
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 Mi Piace
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 Mi Piace
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 Mi Piace
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 Mi Piace
5

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

1 Mi Piace
7

Ciao,

Stavo cercando qualcosa di simile, ma escludendo alcuni gruppi, quindi ho provato con ChatGPT e la risposta è stata:

Per creare un tema HTML in Discourse che attivi uno script escludendo gruppi specifici, dovrai utilizzare le opzioni di personalizzazione del tema di Discourse insieme a JavaScript per gestire le esclusioni di gruppo. Discourse fornisce api.getCurrentUser() per recuperare i dettagli dell’utente, inclusi i suoi gruppi, che possono essere utili per attivare condizionalmente il tuo script.

Ecco un esempio di come potresti implementarlo nella sezione </head> del tuo tema o componente:

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Recupera i dettagli dell'utente corrente
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // Elenco dei nomi dei gruppi che si desidera escludere dall'esecuzione dello script
            const excludedGroups = ['group1', 'group2'];

            // Ottieni i gruppi dell'utente
            const userGroups = currentUser.groups.map(group => group.name);

            // Verifica se l'utente appartiene a un gruppo escluso
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // La tua logica di script personalizzata qui
                console.log('Script eseguito per questo utente.');
                // Esempio: attiva qualsiasi logica personalizzata per gli utenti non esclusi
                // customScriptFunction();
            } else {
                console.log('L\'utente appartiene a un gruppo escluso, script non eseguito.');
            }
        }
    });
</script>

Spiegazione:

  1. api.onPageChange(): Esegue lo script ogni volta che la pagina cambia.
  2. api.getCurrentUser(): Recupera i dettagli dell’utente attualmente connesso.
  3. excludedGroups: Elenca i gruppi che si desidera escludere.
  4. userGroups.includes(group): Verifica se l’utente appartiene a un gruppo escluso.
  5. Esecuzione condizionale dello script: Lo script verrà eseguito solo se l’utente non fa parte di alcun gruppo escluso.

Puoi sostituire customScriptFunction(); con qualsiasi script di cui hai bisogno. Fammi sapere se hai bisogno di ulteriori aggiustamenti!

Cioè, la mia mente è completamente sconvolta da questo :exploding_head:. Non l’ho ancora provato, ma il codice di ChatGPT è corretto?