Modifica il tema del centro assistenza per nascondere il codice HTML agli utenti in base al ruolo e al gruppo. Se le informazioni che vuoi nascondere sono sensibili, questa potrebbe non essere una soluzione praticabile poiché un utente può visualizzare il codice completo con la funzione Visualizza origine pagina nel proprio browser web.
Questo workflow contiene le sezioni seguenti:
- Opzione 1: Nascondi o mostra il codice HTML in base al ruolo dell'utente
- Opzione 2: Nascondi o mostra il codice HTML in base al gruppo dell'utente
Opzione 1: Nascondi o mostra il codice HTML in base al ruolo dell'utente
Copia il frammento di codice qui sotto e incollalo direttamente sotto il primo elemento
nel file home_page.hbs.
<div class="anonymous">
<h1>Welcome Anonymous User!</h1>
</div>
<div class="end_user">
<h1>Welcome End-User!</h1>
</div>
<div class="agent">
<h1>Welcome Agent!</h1>
</div>
<div class="manager">
<h1>Welcome Manager!</h1>
</div>
Inserisci il codice seguente sotto il modello CSS.
div.anonymous, div.end_user, div.agent, div.manager {
width: 100%;
text-align: center;
display: none;
}
Inserisci il codice seguente sotto il modello JS.
const anonymous = document.querySelector(".anonymous")
const end_user = document.querySelector(".end_user")
const agent = document.querySelector(".agent")
const manager = document.querySelector(".manager")
// Show div html based on role
if (HelpCenter.user.role=="anonymous"){
anonymous.style.display = "block";
}
if (HelpCenter.user.role=="end_user"){
end_user.style.display = "block";
}
if (HelpCenter.user.role=="agent"){
agent.style.display = "block";
}
if (HelpCenter.user.role=="manager"){
manager.style.display = "block";
}
Opzione 2: Nascondi o mostra il codice HTML in base al gruppo dell'utente
Copia il frammento di codice qui sotto e incollalo direttamente sotto il primo elemento
nel file home_page.hbs.
const user_group = document.querySelector(".user_group")
<div class="user_group">
<h1>Welcome to L2 Support!</h1>
</div>
Inserisci il codice seguente sotto il modello CSS.
div.user_group {
width: 100%;
text-align: center;
display: none;
}
Inserisci il codice seguente sotto il modello JS. In questo esempio, sostituisci 'L2 Support'
con il tuo gruppo di utenti.
const groups = HelpCenter.user.groups;
for (let i = 0; i < groups.length; i++) {
if (groups[i].name == 'L2 Support' && groups[i].isActive == true) {
user_group.style.display = "block";
}
}
Nota: jQuery non è fornito per impostazione predefinita. Assicurati di importare una libreria jQuery se vuoi usare istruzioni jQuery in un tema al posto di JavaScript standard. Per ulteriori informazioni, leggi l’articolo: Importazione o aggiornamento di jQuery
Per ulteriori informazioni, leggi l’articolo: Personalizzazione del tema del centro assistenza.
0 commenti