Widget logic

phenomlab

Hi - I'd like to display a message based on specific criteria using the widgets.

For example.

Get the user who created the original post (effectively, asked a question)
Ensure we are in a category where Q&A has been enabled
Compare that to the logged in user - if it's the same, then we trigger the widget message which is effectively asking them to choose a best answer

Any pointers ?

Thanks

<baris>

I think the best way is to create a new widget with all that custom logic. The widgets are given the data that is used to render the page so it is easy to determine if you are in a topic and get the original poster. The logged in user is also passed into so you can compare it. Here is some sample code.

Widget.renderQnAWidget = async function (widget) {
	const tplData = widget.templateData;
	const isQuestion = parseInt(tplData.isQuestion, 10) === 1;
	const isSolved = parseInt(tplData.isSolved, 10) === 1;
	// dont render widget if we are not on a topic or topic is not a question or it is already solved
	if (!tplData.template.topic || !isQuestion || isSolved) {
		return null;
	}
	const originalPoster = parseInt(tplData.uid, 10);
	if (originalPoster === parseInt(widget.uid, 10)) {
		widget.html = 'Please select an answer';
	}
	return null;
};

phenomlab

@baris Thanks. Can you give me an idea of how I can use this - is it just a case of dropping into a new HTML widget using <script> tags ?

<baris>

No, this would have to go into a new or existing plugin. It is essentially a new widget with custom logic that would live on the server side. Like the widgets we have in nodebb-widget-essentials.

phenomlab

@baris Ok, thanks.

phenomlab

@baris Seems I can do most of this in a standard HTML widget - I'm only missing the OP ID and the logged in user ID for analysis in relation to triggering the message or not - an example below

<!-- IF isQuestion -->
<!-- IF !isSolved -->
<div class="bmacmain">
<div class="card"><h5 class="card-header">Did this topic help you?</h5><div class="card-body">
<div class="bmacmessage">Please don't forget to click on "Mark this post as the correct answer" whenever the information provided helps you. Original posters help the community find answers faster by identifying the correct answer. 
</div>
</div>
</div></div>
<br>
<style>
#bmac {
display: none;
}
</style>
<!-- ENDIF !isQuestion -->
<!-- ENDIF !isSolved -->

<baris>

You can try {{{ if (uid === loggedInUser.uid)}}} some text{{{ end }}} as long as your theme is providing the loggedInUser object. Like harmony and persona.

phenomlab

@baris Thanks. This works

<!-- IF isQuestion -->
<!-- IF !isSolved -->
< script > 
{{ if (uid === loggedInUser.uid) }} 
</script> 
<div class = "bmacmain" > 
<div class = "card" > 
<h5 class = "card-header" > Did this topic help you ? < /h5>
<div class="card-body"> 
<div class = "bmacmessage" > Please don 't forget to click on "Mark this post as the correct answer" whenever the information provided helps you. Original posters help the community find answers faster by identifying the correct answer.  < /div> 
</div> 
</div>
</div> 
<br> 
<script> 
{{ end }} 
</script>
<!-- ENDIF !isQuestion -->
<!-- ENDIF !isSolved -->

phenomlab

Hmm - not working entirely - it is triggering no matter who the OP is

<script>
{{{ if (uid === loggedInUser.uid) }}}
</script>
<!-- IF isQuestion -->
<!-- IF !isSolved -->
<div class="bmacmain">
<div class="card"><h5 class="card-header">Did you get the answer you needed?</h5><div class="card-body">
<div class="bmacmessage">Hey <span class="topicUsername" ><span class="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>
</div>
</div></div>
<br>
<!-- ENDIF !isQuestion -->
<!-- ENDIF !isSolved -->
<script>
{{{ end }}}
</script>

Still lookin at this, but any thoughts ?

<baris>

You don't have to put that in <script> tags. It is valid benchpress so you can use something like this.

{{{ if (uid == loggedInUser.uid) }}}
{{{ if isQuestion }}}
{{{ if !isSolved }}}
<div class="bmacmain">
<div class="card"><h5 class="card-header">Did you get the answer you needed?</h5><div class="card-body">
<div class="bmacmessage">Hey <span class="topicUsername" ><span class="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>
</div>
</div></div>
<br>
{{{ end }}}
{{{ end }}}
{{{ end }}}

phenomlab

@baris of course. Forgot. Let me try that

Edit - works perfectly. Thanks

PitaJ

I would recommend combining those ifs:

{{{ if (((uid == loggedInUser.uid) && isQuestion) && !isSolved) }}}

phenomlab

@PitaJ yes, that would be more efficient I expect. Thanks