Add Like, Reply and Share icons on the Topics listing section

[vijay kumavat]

Hi

How can we add Like, Reply and Share icons on the Topics listing everywhere on the NodeBB

For Ex.

[baris]

You need a plugin to override partials/topics_list.tpl partial and add those buttons in, then add the client side javascript to handle the clicks. For example the reply button would call app.newReply({ tid: topicId }); and you would set topicId to the id of the topic, you can get that from data-tid attribute of the topic element.

For liking you need to do a bit more work, like returning the current like state so you can show if the user has already like the topic.

[vijay kumavat]

Hi @baris

Thank you for your reply.

I have added this in Custom JavaScript Section under appearance -> custom-content for Topic Reply button.

But no luck..

Could you please guide me to setup this.

[baris]

Assuming you add the below markup to topics_list.tpl

<button data-tid="{./tid}" component="topic/list/reply"><i class="fa fa-reply"></i></button>

You can add the below javascript in custom JS to handle the click and open the composer to reply to tid.

$('[component="category"]').on('click', '[component="topic/list/reply"]', function () {
  app.newReply({ tid: $(this).attr('data-tid') });
});

You can do something similar for the other buttons but you need to call the API to vote for the topic and open a share dialog for the share button.

[vijay kumavat]

Hi @baris

I have added this, but getting error.

Uncaught (in promise) TypeError: t.title is undefined

[baris]

I've tested that code in this forum and it works.

Maybe you have other javascript that is causing the error, start the forum in dev mode so javascript isn't minified, then you can take a look at where it is crashing.