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

Development

AI-generated summary

duranmla is seeking help to attach a custom component created using select-kit within a widget that only has an HTML template. The component is a dropdown select box, and they want to render it inside a specific div in their widget template. They’ve provided code snippets for both their widget and dropdown select box components, and are also interested in learning how to loop through the site’s categories, but consider this a secondary request.

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
Render a component within a Widget. (Using select-kit components within plugin code)