How can I display widgets in other templates too?

dogs

Hey!

How can I add other templates to the widgets?

Bildschirmfoto 2021-03-11 um 17.50.14.png

I'm talking about the dropdown which says

- global
- group/details.tpl

So that I can show "New Groups" at /recent or "Suggested Topics" at topic/ or "Popular Tags" on /category.

General: How can I display widgets in other templates too?

Thank you in advance!

PitaJ

Widget areas are defined by whatever theme you're using. So you'll want to open an issue on the theme's respective GitHub page.

dogs

@pitaj I use an almost bare fork from persona. I want to adjust it over time.

There are just a few templates I edited. So I can't open an issue on myself.

Would be nice if you could give some tips to me

PitaJ

@dogs here's a commit that includes an addition of a widget area. https://github.com/NodeBB/nodebb-theme-persona/commit/ad5c1e640ed31cb82d6be9a0b37309c4f18183fc

dogs

@pitaj Seems that every should work fine ... should but it doesn't. I don't know if it's a bug or if I am stupid. Would be awesome if you could take a look.

theme.js is defined in plugin.json. Also the hooks are defined.

"main": "./lib/theme.js",
"hooks": [
    {
        "hook": "filter:widgets.getAreas",
        "method": "defineWidgetAreas"
    },
    {
        "hook": "filter:middleware.renderHeader",
        "method": "filterMiddlewareRenderHeader"
    }
]

in theme.js I have the method defineWidgetAreas.

Theme.defineWidgetAreas = function(areas, callback) {
    areas = areas.concat([{
            'name': 'MOTD',
            'template': 'home.tpl',
            'location': 'motd'
        },
        {
            'name': 'Homepage Footer',
            'template': 'home.tpl',
            'location': 'footer'
        },
        {
            'name': 'Category Sidebar',
            'template': 'category.tpl',
            'location': 'sidebar'
        },
        {
            'name': 'Category Header',
            'template': 'category.tpl',
            'location': 'header'
        },
        {
            'name': 'Topic Footer',
            'template': 'topic.tpl',
            'location': 'footer'
        }
    ]);

    callback(null, areas);
};

If ^ this is right. It should work or should't?

My other method is working too:

// To make thumbnail available to the header
Theme.filterMiddlewareRenderHeader = async function(hookData) {
    if (hookData.templateValues.template.name === 'topic') {
        hookData.templateValues.thumb = hookData.data.thumb;
    }
    return hookData;
};

But still the same result as in main post here.

I also noticed, that I can't enable quickreply for my theme even though it should be inherited from persona? Or am I wrong?

You do not need to redefine all templates for your theme. If the template file does not exist in your current theme, NodeBB will inherit templates from the baseTheme that you have defined in your theme.json (or if undefined, it will inherit from nodebb-theme-persona’s templates).

CC: docs.nodebb.org/development/themes/

Additional Info:
I use npm link for my plugins.

PitaJ

@dogs that should allow you to see the widget areas in the ACP, but you need to add the widget areas to the templates as well for the widgets to actually display.

Did you do a rebuild and restart?

dogs

@pitaj

but you need to add the widget areas to the templates as well for the widgets to actually display

shouldn't this be done by theme-persona? I think...

However ... the widgets are showing if i activate them :), but I can't select the defined areas in ACP.

Theme.defineWidgetAreas = function(areas, callback) {
        areas = areas.concat([{
                'name': 'MOTD',
                'template': 'home.tpl',
                'location': 'motd'
            },
            {
                'name': 'Homepage Footer',
                'template': 'home.tpl',
                'location': 'footer'
            },
            {
                'name': 'Category Sidebar',
                'template': 'category.tpl',
                'location': 'sidebar'
            },
            {
                'name': 'Category Header',
                'template': 'category.tpl',
                'location': 'header'
            },
            {
                'name': 'Topic Footer',
                'template': 'topic.tpl',
                'location': 'footer'
            }
        ]);

I have just these two:

- global
- group/details.tpl

... which are not even defined.

Did you do a rebuild and restart?

Yes I did rebuild and restart. Several times.

Note: The selection of the defined widgets locations in theme.js was never there, I just wanted to tackle the problem now.

PitaJ

@dogs

shouldn't this be done by theme-persona

You have a fork of persona do you not? You want to add more widget areas? If you want those new widget areas to show up on the page, you have to modify the templates.

If you want them added to the main persona theme, then open an issue on it's GitHub page.

the widgets are showing if i activate them :), but I can't select the defined areas in ACP

What? How can you activate them if you can't select them in the ACP?

Try adding a console.log inside the function to check if it's actually running.

dogs

@pitaj

You have a fork of persona do you not?

Yes I have.

You want to add more widget areas? If you want those new widget areas to show up on the page, you have to modify the templates.

No. I just want to change the available location of the widget from which I can choose from.

What? How can you activate them if you can't select them in the ACP?

I can active them, but not on my expected template.

Widget Areas

Theme.defineWidgetAreas = function(areas, callback) {
        areas = areas.concat([{
                'name': 'MOTD',
                'template': 'home.tpl',
                'location': 'motd'
            },
            {
                'name': 'Homepage Footer',
                'template': 'home.tpl',
                'location': 'footer'
            },
            {
                'name': 'Category Sidebar',
                'template': 'category.tpl',
                'location': 'sidebar'
            },
            {
                'name': 'Category Header',
                'template': 'category.tpl',
                'location': 'header'
            },
            {
                'name': 'Topic Footer',
                'template': 'topic.tpl',
                'location': 'footer'
            }
        ]);

Expected

Bildschirmfoto 2021-03-11 um 21.46.52.png

Or anything like that. So that I can put suggested topics just inside of topics for example.

What I have

Bildschirmfoto 2021-03-11 um 21.47.05.png

Did I get something wrong?

Greetings and thank you for your time

PitaJ

No. I just want to change the available location of the widget from which I can choose from.

Yes you do, because that's what a widget area is!

If you want to display widgets in a template, that template must have widget area code in it, and that widget area must be defined in the list as you're attempting to do.

I can active them, but not on my expected template.

Yes because the widget areas you want are not there.

Your code looks right to me. I'm not sure why it isn't working. Please try adding a console.log inside the function to check if it's actually running when you visit the widgets admin page (as I suggested before).

Keng Her

@dogs
Not sure if this is still relevant to you, but I followed your code and was getting the same results. The code wasn't firing despite having a console log in the theme.js file.

Then I decided to click on the 'Clone widgets from...' and selected 'Categories'. After that all of the .tpl names showed up in the drop down. After that any changes to the theme.js file are firing as should.

Make sure you build and restart. I am using the included GRUNT to make development faster. Cheers!