How can I pull the currently open topic's list of tags?

Dev
1

Hello!

I’m trying to create a theme component that adds a custom button to tagged topics. For example: Topics tagged with event-tag will have a button next to the category named Event which will link to the events page.

I’ve figured out where I would like to add the button (through the plugin-outlet topic-category) through this guide: Beginner's guide to developing Discourse Themes

and I currently have this:

<script type="text/x-handlebars" data-template-name="/connectors/topic-category/foobar2">
    <div style="height: 25px; width: 25px;background: red">
      <a href="<events_URL>" target="_blank">Link</a>
    </div>
  </script>

So my question is, how can I check the topic’s list of tags to see if the above script should add a button or not?

2 Likes
2

Okay, so a bit of progress:

I found that if I use the modifyClass like this:

<script type="text/discourse-plugin" version="0.8">
    api.modifyClass("component:topic-category", {
      didInsertElement: function() {
        this._super();
        console.log("Welcome to the topics page!")
      }
    });
    </script>

I can get to the topic page and get a response saying “welcome”, but I’m still not sure how I can pull the current pages tags to see if I should populate the button or not…

1 Like
3

Ah, I have found the solution.

I kept re-reading this: Beginner's guide to developing Discourse Themes

and found that if I just console.log(this) it was able to spew out all data on the page, including tags. I think I can go from here now by pulling the tag data on the page and checking if it’s in the settings or not. Once I polish this and think it’s ready for the public, I’ll post it on the theme components category. Just thought I’d share my findings in case anyone else is learning how to make theme components!

3 Likes
4

Just for information, the code to get the tag list in this context would be:

<script type="text/discourse-plugin" version="1.4.0">
    api.modifyClass("component:topic-category", {
      pluginId: "returnTags",
      didInsertElement: function() {
        this._super();
        console.log(this.topic.tags)
      }
    });
</script>

Returns:
image

:information_source: (pluginId is required to avoid a warning)

1 Like