Custom Layouts Plugin

Sorry Angus, but I couldn’t make use of category setting for the left or right sidebars,

When I activate the widgets for categories globally in the admin panel, things are ok. but I don’t want to see some widgets for some categories, and this way I need to remove them using css selectors.

but if I activate sidebar and widgets using category setting , the widgets do not appear in the category.

is it a bug? or am I missing something?

e.g.: you can see an empty box in the picture, this is a widget which is not supposed to be shown in the latest list. an if is used to remove this widget from the latest, while if we could use the category setting we don’t need to use this if.

I ran into a stupid problem:

I used the setting in the category to disable the “Disable discovery list header for selected routes in this category” and "navigation menu " for a category. Now I’m unable to bring them back, since even the admin can’t see the category setting :frowning:

any way to disable these settings only for non-admins?

Ok I’ve removed all the other background colors that could be the culprit here

1 Like

Yes the route filters were not working properly. Working now.

To use a different widget in a category route, make sure you don’t have category selected in the sidebar enabled site settings as this overrides category-specific settings. If you remove this setting, the sidebars and the widgets for each category are controlled by the relevant category specific settings.

2 Likes

Yes, I had this problem once too. I’ve added a backup edit category button that will appear if these conditions are met.

1 Like

Hi Angus,

we’ve had a widget showing the top solutions in the right sidebar together installed with the layouts plugin, here:

It was working fine, until we currently installed nginx outside docker. after that this widget is not being shown in the sidebar anymore!

do you have any clue why that may have happened?

does it have anything to do with https protocol? (our only guess at the moment!)

What errors are you seeing in your console and logs?

no errors in the admin log panel. no errors in browser console either!

Can it be because of the way I used href in my code?
For example I have this code in plugin

contents.push(h("h2.novatitle",[h("a",{attributes:{href:"https://padpors.com/t/نوآوری-جمعی-در-پادپُرس-چه-جوری-کار-میکنه؟/3601#No" ,target: "_blank"}},"راه‌حل‌"),"های نوآوران"]));
           $.ajax({
          url: "https://padpors.com/t/3854.json",
          dataType: 'json',
          async: false,
          success: function(data){
              view2 = data.views;
          }});

Can the nginx block a plugin?
What else can cause this problem?
NOTE: We are using HTTPS
NOTE: widgets are working correctly on local

You have three issues.

One is that the widget file needs to be the same name as the widget itself. I have submitted PRs to your two widget repos to fix this.


The second issue is a CORS issue with some of the assets you’re using. I can’t fix that. You’ll need to update the CORS permissions or change where the assets are hosted.

The third issue is a bug in the developing-solution widget when viewing a discovery category route. I have submitted a PR for a temporary fix for the issue. It won’t make the content you want to appear appear, but it will stop the exception from occurring and the widget containers themselves will appear in discovery category routes.

Generally you need to look more closely at better use of Promises to handle all the ajax requests you’re making. You need to wait until the ajax request resolves before you can use the requested data, i.e. after the request add .then(function(data){}).

Handling ajax requests is a little tricker in a vDom widget, without Ember’s computed properties and observers. In fact there probably shouldn’t be any ajax requests in a vDom widget. Nonetheless, have a look at how I’ve done it in this widget.

5 Likes

Thank you. But I have a problem with promises.

ajax(`/t/3854.json`).then(function (res) {
              view2 = res.views;
              return ajax(`/t/3766.json`);
            })
            .then(function (res){
                view4 = res.views;
                return ajax(`/t/2568.json`);
            })
            .then(function (res){
                view1 = res.views;
                 contents.push(h("div.solution",[
            h("a.image-sulotion", {attributes: {href: "https://padpors.com/t/%D8%A7%DB%8C%D8%B3%D8%AA%DA%AF%D8%A7%D9%87-%D9%87%D8%A7%DB%8C-%D8%AA%D9%88%D9%84%DB%8C%D8%AF-%D8%A8%DB%8C%D9%88%DA%AF%D8%A7%D8%B2-%D8%A7%D8%B2-%D8%AF%D9%88%D8%B1%D8%B1%DB%8C%D8%B2%D9%87%D8%A7%DB%8C-%D8%BA%D8%B0%D8%A7/2568"}}, h("img", {attributes:{src: "https://padpors.com/uploads/default/original/2X/b/b5242cbc6ca0a76e477a51fc187e47df1b37c85b.jpg"}})),
            h("a.topiclink",{attributes: {href: "https://padpors.com/t/%D8%A7%DB%8C%D8%B3%D8%AA%DA%AF%D8%A7%D9%87-%D9%87%D8%A7%DB%8C-%D8%AA%D9%88%D9%84%DB%8C%D8%AF-%D8%A8%DB%8C%D9%88%DA%AF%D8%A7%D8%B2-%D8%A7%D8%B2-%D8%AF%D9%88%D8%B1%D8%B1%DB%8C%D8%B2%D9%87%D8%A7%DB%8C-%D8%BA%D8%B0%D8%A7/2568"}}, "رآکتور بیوگاز"),
            h("a.novacate", {attributes:{ href: "https://padpors.com/c/nova-foodwaste"}}, "هدر رفت غذا") ,
            h("span", "بازدید:" + view1),
            h("div.level", Discourse.SiteSettings.developing_1)]));

          contents.push(h("div.solution",[
            h("a.image-sulotion", {attributes: {href: "https://padpors.com/t/پیاده-برو،-پاداش-بگیر/3854/16"}}, h("img", {attributes:{src: "https://padpors.com/uploads/default/original/2X/f/ff2f9cb328fc5708c1c2a51b9a3bfce1b6f5765c.jpg"}})),
            h("a.topiclink",{attributes: {href: "https://padpors.com/t/پیاده-برو،-پاداش-بگیر/3854/16"}}, "پیاده برو، پاداش بگیر!"),
            h("a.novacate", {attributes:{ href: "https://padpors.com/c/nova-pollution"}}, "آلودگی هوا") ,
            h("span", "بازدید:" + view2),
            h("div.level", Discourse.SiteSettings.developing_2)]));

          contents.push(h("div.solution",[
            h("a.image-sulotion", {attributes: {href: "https://padpors.com/t/چه-جوری-درختکاری-چریکی-رو-به-نفع-هوای-آلوده-رواج-بدیم؟/3766"}}, h("img", {attributes:{src: "https://padpors.com/uploads/default/original/2X/b/bcde56c436a83f58e6741a792bbc51da33f41673.jpg"}})),
            h("a.topiclink",{attributes: {href: "https://padpors.com/t/چه-جوری-درختکاری-چریکی-رو-به-نفع-هوای-آلوده-رواج-بدیم؟/3766"}}, "درخت کاری چریکی"),
            h("a.novacate", {attributes:{ href: "https://padpors.com/c/nova-pollution"}}, "آلودگی هوا") ,
            h("span", "بازدید:" + view4),
            h("div.level", Discourse.SiteSettings.developing_4)]));

             return h('div.widget-inner', contents);
            });

I have this code but it didn’t render anything in my page.
I also deleted the last main return h('div.widget-inner', contents) but nothing happened. just an empty widget.

You need to understand the concept before you can implement what you’re attempting.

First, try to get a single promise returning a single result from the server. Stick a console.log(res) in the .then(function{}) to see what is being returned.

Once you get that working, then try to display that single piece of data. Have a look at the widget I linked you to to see how to re-render the widget to display the data.

When you have successfully got a single promise to return data and you have displayed that single piece of data in the widget show me your code and we can work with that.

2 Likes

A slight issue regarding the plugin:

using the layouts plugin and without any widgets installed I got the blank page in category+tag page:

https://meta.discourse.org/t/empty-page-when-both-category-and-tag-are-filtered/60585

Sounds like an issue. Will take a look tomorrow.

Give it another try now. The sidebars will show up on all the tags routes now. The settings won’t all work perfectly as the tags routs in Discourse core are different from the other routes. I’ll fix the settings for tags a bit later today.

2 Likes

@angus
Can I add an attribute to my js widget code for using this .
In html we can simply do:

<script>
</script data-cfasync='true'>

but I don’t what should I do here.

I don’t think that is relevant to this plugin. If you’re adding scripts to your page head you should do it via Customize / Themes .

I didn’t mean that.
I want to add an attribute to my whole widget but I don’t know how

Invariably, the answer is to have a look at how other widgets work. For example.

Spend more time learning how widgets work. It’ll make what you’re trying to do a lot easier.

3 Likes

@angus
I have written this widget. This widget will show a list of your bookmarked topics beside you. But I have problem for remove bookmark button. When I press the remove button, It will remove the last Item in my bookmark list.
The problem is logical because when I press the button, the variable data has the value of the last index of the list.
How can I solve this probelm?
How can I set a special variable for each button?