How to override a template.hbs from a plugin

Development

AI-generated summary

Overriding a template.hbs from a plugin

oca wants to override a hbs template from the Events plugin and is unsure how to access it. They’ve tried referencing the template by its full path, but it doesn’t seem to be working.

tshenry provides guidance on how to override templates in the theme guide, suggesting that the template name should be referenced relative to the javascripts directory.

However, oca points out that this approach doesn’t work for templates located in plugins, as they are not subfolders of the main javascripts directory. They ask if there’s a way to modify these templates without forking the plugin.

tshenry clarifies that the correct approach is to simply use the template name relative to the javascripts directory, without including the full path. This should allow the template to be overridden correctly.

oca confirms that this approach works for them. Additionally, merefield provides a link to a related topic on deprecated ways of overriding Discourse templates.

1

Dear all,

Let’s say I’d like to override a hbs template from a plugin, like the amazing Events plugin.
I’ve tried the following scripts:

<script type="text/x-handlebars" data-template-name="components/events-calendar-day">
   ***some stuff so category icon could be displayed instead of circle***
</script>

<script type="text/x-handlebars" data-template-name="/plugins/discourse-events/assets/javascripts/discourse/templates/components/events-calendar-day">
   ***some stuff so category icon could be displayed instead of circle***
</script>

but they are not executed. I guess the template is not found at that location, so how can I access it ? Are plugins templates in their own directory ? If so, where ? This is not explained in the theme guide.

Thanks in advance !

2

I will make sure to add instructions on this to the main guide, but for now, take a look at my response:

3

Thanks a lot but that does not answer my usecase:

As far as I understand, the «root» folder is (discourse/app/assets/javascripts/discourse/app/templates/) so I can access a component in a subfolder from this path.

But the template I want to access is in:
discourse/plugins/discourse-events/assets/javascripts/discourse/templates/components/
which is not a subfolder of the first one. Is there a way to modify those without forking the plugin ?

Or do you mean I should use
/javascripts/discourse/templates/components/template-name ?
(I’ve tried and it does not seems to work but I may have done some other mistake.)

Or have I misunderstood something ?

Thanks in advance !

4

Maybe there’s some confusion surrounding terminology here. In any case, just use:

<script type="text/x-handlebars" data-template-name="javascripts/components/template-name">
  
</script>

You don’t need to include anything else in the data-template-name. It will get mapped correctly.

5

Thanks a lot !
That’s exactly what I needed. :slight_smile:

7