Replacing MyBB ratings with Semantic UI ratings module.

Omar G.

18 Mar, 2020, 9:10 pm

Tutorial Replacing MyBB ratings with Semantic UI ratings module.

Hi. Below I share the process to replace the core MyBB rating JS for the Semantic UI module. Please check the screenshots to visualize the final result.

The first steps require us to change some templates. These changes are presented below are based on the default MyBB theme.

For this tutorial we're going to use the Semantic UI rating module. Open the headerinclude template and add the following at the end:

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/rating.min.js" integrity="sha256-jprk9qns6QqU1UWGtHMwug9A/ls7tVMV8p2mueJlj74=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/rating.min.css" integrity="sha256-rvfNRXAaYgOVCEbNgSflI9FdWFSre18sLFjJKkiuV6w=" crossorigin="anonymous" />

Open the showthread_ratethread template and replace its entire content with the following:

<div style="margin-top: 6px; padding-right: 10px;" class="float_right">
<div class="ui star rating" data-rating="{$thread['averagerating']}" data-max-rating="5" id="rating_thread_{$thread['tid']}"></div>
<script>
$('#rating_thread_{$thread['tid']}').rating({
initialRating: {$thread['averagerating']},
maxRating: 5,
clearable: false,
interactive: <if (int)$mybb->user['uid'] && (int)$mybb->user['uid'] === (int)$thread['uid'] then>false<else>true</if>,
onRate: function (rating) {
$.ajax(
{
url: '{$mybb->settings['bburl']}/ratethread.php?ajax=1&my_post_key='+my_post_key+'&tid={$thread['tid']}&rating='+rating,
async: true,
method: 'post',
dataType: 'json',
complete: function (request)
{
var json = JSON.parse(request.responseText);
if(json.hasOwnProperty("errors"))
{
$.each(json.errors, function(i, error)
{
$.jGrowl(lang.ratings_update_error + ' ' + error, {theme:'jgrowl_error'});
});
}
else if(json.hasOwnProperty("success"))
{
return true;
}
}
});
return false;
}
});
</script>
</div>

Open the forumdisplay_threadlist_rating template and replace its entire content with the following (we are only removing the core JavaScript:

 <td class="tcat" align="center" width="80">
<span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=rating&amp;order=desc">{$lang->rating}</a> {$orderarrow['rating']}</strong></span>
</td>

Open the forumdisplay_thread_rating template and replace its entire content with the following:

<td align="center" class="{$bgcolor}{$thread_type_class}">
<div class="ui star rating" data-rating="{$thread['averagerating']}" data-max-rating="5" id="rating_thread_{$thread['tid']}"></div>
<script>
$('#rating_thread_{$thread['tid']}').rating({
initialRating: {$thread['averagerating']},
maxRating: 5,
interactive: <if (int)$mybb->user['uid'] && (int)$mybb->user['uid'] === (int)$thread['uid'] then>false<else>true</if>,
onRate: function (rating) {
$.ajax(
{
url: '{$mybb->settings['bburl']}/ratethread.php?ajax=1&my_post_key='+my_post_key+'&tid={$thread['tid']}&rating='+rating,
async: true,
method: 'post',
dataType: 'json',
complete: function (request)
{
var json = JSON.parse(request.responseText);
if(json.hasOwnProperty("errors"))
{
$.each(json.errors, function(i, error)
{
$.jGrowl(lang.ratings_update_error + ' ' + error, {theme:'jgrowl_error'});
});
}
else if(json.hasOwnProperty("success"))
{
return true;
}
}
});
return false;
}
});
</script>
</td>

Finally, import the attached file using the Hooks plugin.

Once all of this is done, users should be able to update their ratings without issues. At the moment it isn't possible for users to remove or delete their rates, but is is possible to do so by adding one extra hook. This is outside the scope of this tutorial but might be added on the future.

It is also possible to use heart ratings instead of start ratings. For this it would be necessary to change ui star rating for ui heart rating in the two occurrences in the steps above.

Other enhancement could be to use star or heart rating on a per forum basis.

Omar G.

Tutorial Replacing MyBB ratings with Semantic UI ratings module.

Need to find something?