How to attach a component to a widget with just markup?

dev
1

Hi all, I am new in Discourse development, but I am on a project to create few plugins (for specific proposes.)

I’m making a plugin to display a stripe of categories on the site and it has some other nifty effects, to summarize I just need to render a custom component created using select-kit within a widget that has just an html template.

My component:

createWidget('category-bar', {
  tagName: 'div.category-bar-container',
  template: hbs`
  <ul id="header-tags" class="category-bar">
    <li class="category-bar-item">
      <a class="category-bar-link" href="/c/sexuality">
        {{i18n "ahwaa_categories.sexuality"}}
      </a>
    </li>
    ....
  </ul>
  HERE I WANT TO RENDER LIKE:
  <div class="category-bar-link dropdown-structure">
    {{categories-bar-dropdown}} <--- this won't work and neither {{attach widget=categories-bar-dropdown}}
  </div>
  `,
});

My component of dropdown looks like:

export default DropdownSelectBoxComponent.extend({
  pluginApiIdentifiers: ["categories-bar-dropdown"],
  classNames: "categories-bar-dropdown",
  title: I18n.t("ahwaa_categories.more"),
  showFullTitle: true,
  allowInitialValueMutation: false,
  headerIcon: ["caret-down"],

  autoHighlight() {},

  computeContent() {
    const items = [
      { id: "id", name: I18n.t("plugin.locale.key") },
      ...
    ];

    return items;
  },

  mutateValue(id) {
    // use the id from the computeContent items to do an action
  }
});

PD: if you have also the code to loop between the categories of the site will be great (but I haven’t google it yet so we can skip that)

1 Like