Custom admin/user icons in header

Product Support

AI-generated summary

The discussion revolves around adding custom admin/user icons in the header of a Discourse forum. WorldIsMine initially shared a script that stopped working after updating to version 2.2.

pmusaraj provided a solution by updating the script to version 0.8 and adding the “shopping-cart” icon to the site setting “SVG sprite subset”. However, this caused other icons to vanish, and admins couldn’t see their button.

pmusaraj suggested merging the two scripts together and using a single icon reference. However, WorldIsMine encountered small problems with this code and was informed that it would be impossible to achieve with version 2.2 due to the absence of an admin class.

Ultimately, shaundefense provided a working solution using two separate scripts, one for admins and one for non-admins, allowing for different links and icons to be displayed based on user type.

1

I’ve used a script created by one of the team members here that placed an extra icon in the header. Depending on user type, it showed a different icon.

However, since 2.2, this no longer works.

<script type="text/discourse-plugin" version="0.8.23">
let currentUser = api.getCurrentUser();
if (currentUser && currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#tickets-button', {
        href:'https://Example.com',
        title: 'Button 1',
        text: ''
    }, helper.h('')),
]);
});
}
</script>
<script type="text/discourse-plugin" version="0.4">
let currentUser = api.getCurrentUser();
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, helper.h('i.fa.fa-shopping-cart.home-button-icon')),
]);
});
}
</script>

Would appreciate any help.

2

You need to update the second script:

<script type="text/discourse-plugin" version="0.8">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, iconNode('shopping-cart')),
]);
});
}
</script>

You will also need to add “shopping-cart” to the site setting called “SVG sprite subset” so that the SVG for that icon can be included in your site.

3

Your script worked @pmusaraj, but it made the other icons vanish:

image
image858×420 14.1 KB

Also, admins still can’t see the button from the first script. I’ve been told by staff here that until 2.3 that won’t be possible :confused: (no staff class or something like that in 2.2)

4

That looks like a CSS issue. Easier to debug when looking at the site in a browser with the inspector open.

I didn’t look at the first script at all earlier, because I didn’t see an icon reference, but, in fact, you should merge the two scripts together to something like this:

<script type="text/discourse-plugin" version="0.8">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'admin-icon';
if (currentUser && !currentUser.admin) {
  icon = 'shopping-cart';
}
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, iconNode(icon)),
]);
});
}
</script>

This will use admin-icon for admins and shopping-cart for non-admins. (Use an icon of your choice instead of the admin-icon placeholder I put in the code above.)

5

Had small problems with that code @pmusaraj, also another dev team told me that this would be impossible to do with 2.2 as admin class isn’t used in 2.2? Not sure what that means. Anyway, our UI guy was able to do it (@shaundefense) via this code:

<script type="text/discourse-plugin" version="0.8.23">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'shopping-cart';
if (currentUser && !currentUser.admin) {
  icon = 'shopping-cart';
}
if (currentUser && currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#tickets-button', {
            href:'https://LinkOne.com',
            title: 'Link One',
            text: ''
        }, iconNode(icon)),
    ]);
});
}
</script>
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'shopping-cart';
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#tickets-button', {
            href:'https://LinkTwo.com',
            title: 'Link Two'
        }, iconNode(icon)),
    ]);
});
}
</script>

Now the button shows up, and it’s two function (for admin it’s different and for users, it displays another link). Thanks everyone for help.