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
headerincludetemplate 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_ratethreadtemplate 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_ratingtemplate 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}&sortby=rating&order=desc">{$lang->rating}</a> {$orderarrow['rating']}</strong></span> </td>
- Open the
forumdisplay_thread_ratingtemplate 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.
This post was last modified: 7 Apr, 2020, 9:52 am by Omar G..