Been a bit quiet lately, so thought I’d share some new things I’m going to be adding into Sudonix for the v3 release (based on Harmony). As you probably know by now, Sudonix allows you to set the best answer for any questions you ask. I wanted to extend this capability graphically, and came up with these ideas.
First and foremost - say you’re reading a post where someone was able to get the response they needed, and it solved their issue. The next person comes along, and gets the same experience. Wouldn’t it be nice to show your appreciation? Now you can !
Just below the “Accepted Answer” is a newly inserted div which in fact is just a widget, but leverages the power of the NodeBB API to make decisions around which div should be presented.
And then, if you are the original poster, have received responses, but are yet to choose the best answer
And, what if you were the original poster, but had no responses? We’ve got that covered too
The code for all of this is relatively simple - an example is shown below
First things first: This additional code will not work properly if you do not have nodebb-plugin-question-and-answer installed. It relies on various values being exposed which are not there if the plugin is not installed.
The first element of code to be added needs to be in ACP->Custom Content (HTML/JS/CSS)->Custom Javascript
$(window).on('action:ajaxify.end', function (data) {
Then, add the below to ACP->Extend-Widgets->Topic.tpl, and use the HTML Widget (which you’ll need to drag into the place where you want it to appear - the optimum is the Topic Footer.
<head>
<style>
span.topicUsername {
text-transform: capitalize;
}
</style>
</head>
{{{ if isSolved }}}
<divid="resolved">
<divclass="resolved-wrapper">
<h5class="resolved-header">Did this solution help you?</h5>
<divclass="resolved-body">
<divclass="resolved-message">Did you find the suggested solution useful? Why not <ahref="https://www.buymeacoffee.com/phenomlab"target=_blank>buy me a coffee<a />? It's a nice gesture, and there's <ahref="https://sudonix.com/donate">other ways to donate</a> if you wish <spanclass="heart">💗</span></div>
<h5class="unresolved-header">Did you get the answer you needed?</h5>
<divclass="unresolved-body">
<divclass="unresolved-message">Hey <spanclass="topicUsername"><spanclass="username"></span></span>. It looks as though there have been one or more replies to your original post. <br>If a provided answer resolved an issue for you, Could you please take a moment, and select "Mark this post as the correct answer" in the corresponding response? <br><br>By doing this, it means that original posters help the rest of the community find answers to previously asked questions by identifying the correct answer. </div>
<divclass="unreplied-message">Hey <spanclass="topicUsername"><spanclass="username"></span></span>. It looks as though there are no responses yet. Don't panic though, as one will be provided as soon as possible.<br>Please do not "bump" posts. </div>
You’ll notice some interesting features here courtesy of jQuery (and vanilla js where if the page is loaded externally, and jQuery is not loaded, it will fallback to plain, which is this part if (!window.jQuery) )
There’s also a function that will position the newly inserted div into the right place - essentially, this command .insertBefore('[component="topic/quickreply/container"]'); . The purpose of this is to place the div message in where you’d expect to see it - for example, if the post is solved, then it should appear directly underneath the resolution, but if no replies, or if you’re the original poster and you’ve yet to choose an accepted answer, it’ll be at the bottom.
Essentially, we are not only defining a div structure, but using logic to determine placement to ensure it gets the most attention.
Note that I’m using LESS variables here, so you’ll need to define your own colours if you do not use this standard. I also have a Font Awesome 6 Pro license, so you’ll need to replace that as necessary.
This is a very rare case but if the topic is set to solved and there is no answer in it, we get this kind of thing:
We can imagine that this happens when the user himself would have found a solution and that him or another user did not post answers in the topic and that this one is put in solved
@DownPW Ah yes, I can see a case where that would indeed fire, and I’m able to replicate it here
Let me adjust the code and get back to you.
EDIT: Revised widget code here
<head>
<style>
span.topicUsername {
text-transform: capitalize;
}
</style>
</head>
{{{ if isSolved }}}
<divid="resolved">
<divclass="resolved-wrapper">
<h5class="resolved-header">Did this solution help you?</h5>
<divclass="resolved-body">
<divclass="resolved-message">Did you find the suggested solution useful? Why not <ahref="https://www.buymeacoffee.com/phenomlab"target=_blank>buy me a coffee<a />? It's a nice gesture, and there's <ahref="https://sudonix.com/donate">other ways to donate</a> if you wish <spanclass="heart">💗</span></div>
<h5class="unresolved-header">Did you get the answer you needed?</h5>
<divclass="unresolved-body">
<divclass="unresolved-message">Hey <spanclass="topicUsername"><spanclass="username"></span></span>. It looks as though there have been one or more replies to your original post. <br>If a provided answer resolved an issue for you, Could you please take a moment, and select "Mark this post as the correct answer" in the corresponding response? <br><br>By doing this, it means that original posters help the rest of the community find answers to previously asked questions by identifying the correct answer. </div>
<divclass="unreplied-message">Hey <spanclass="topicUsername"><spanclass="username"></span></span>. It looks as though there are no responses yet. Don't panic though, as one will be provided as soon as possible.<br>Please do not "bump" posts. </div>
Just play with CSS for me but it’s a very good job Mark !
I love this functionnality a lot, who play which works together with the nodebb-plugin-question-and-answer plugin
I love this functionnality a lot, who play which works together with the nodebb-plugin-question-and-answer plugin
Great ! It was designed primary to work with nodebb-plugin-question-and-answer and in fact won’t work very well without it, so it’s actually a core dependency.
1- A user who has not created the topic sees the message intended for the initiator of the topic :
Ugh. Sorry. Use this widget code (original post updated)
<head>
<style>
span.topicUsername {
text-transform: capitalize;
}
</style>
</head>
{{{ if isSolved }}}
<divid="resolved">
<divclass="resolved-wrapper">
<h5class="resolved-header">Did this solution help you?</h5>
<divclass="resolved-body">
<divclass="resolved-message">Did you find the suggested solution useful? Why not <ahref="https://www.buymeacoffee.com/phenomlab"target=_blank>buy me a coffee<a />? It's a nice gesture, and there's <ahref="https://sudonix.com/donate">other ways to donate</a> if you wish <spanclass="heart">💗</span></div>
<h5class="unresolved-header">Did you get the answer you needed?</h5>
<divclass="unresolved-body">
<divclass="unresolved-message">Hey <spanclass="topicUsername"><spanclass="username"></span></span>. It looks as though there have been one or more replies to your original post. <br>If a provided answer resolved an issue for you, Could you please take a moment, and select "Mark this post as the correct answer" in the corresponding response? <br><br>By doing this, it means that original posters help the rest of the community find answers to previously asked questions by identifying the correct answer. </div>
<divclass="unreplied-message">Hey <spanclass="topicUsername"><spanclass="username"></span></span>. It looks as though there are no responses yet. Don't panic though, as one will be provided as soon as possible.<br>Please do not "bump" posts. </div>
If the message is only addressed to the initiator of the topic, it’s a bit problematic, isn’t it?
No, not really It’s designed to work this way so that anyone else visiting looking for the same answer and finds it has the opportunity to reward you - it’s why it mentions no names
I am testing this code in version 2.X but it seems it is not working properly
Only the resolution message seems to work in 2.X
Do you think it is possible to adapt it for 2.X ?
Hmm - I never wrote it to be compatible with v2, but I can’t think of any reason as wo why this would not work. Is there somewhere I can see it ?
@DownPW I see why. The code relies on the existence of
[component="topic/quickreply/container"]
However, this by definition means that the below has to be enabled
It will then work
For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component.
The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (ether email, or push notification). You'll also be able to save bookmarks, use reactions, and upvote to show your appreciation to other community members.
A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below