Ratings utilizando Semantic UI

Omar G. 29 Feb, 2020, 9:42 pm

Hola. A continuación les comparto como utilizar el framework de Semantic UI para utilizar ratings que se pueden cambiar. Por favor de revisar las capturas para apreciar el resultado final.

Primero cambiaremos algunos templates. Los cambios abajo son utilizando el tema predeterminado y ajustes pueden ser necesarios dependiendo de sus estilos.

Para este tutorial solo usaremos el modulo de ratings de Semantic UI. Abrir el template headerinclude y agregar al final:

<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" />

Abrir el template showthread_ratethread y reemplazar por el siguiente código:

<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>

Abrir el template forumdisplay_threadlist_rating y reemplazar por el siguiente código (aqui solo eliminamos el JavaScript de MyBB):

 <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>

Abrir el template forumdisplay_thread_rating y reemplazar por el siguiente código:

<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>

Finalmente, importan el documento adjunto utilizando el plugin Hooks.

Al finalizar estas modificaciones sus usuarios deberían poder cambiar sus rating sin problemas. Por ele momento no es posible remover el rating pero es posible hacerlo con otra hook, en un futuro puede que actualice este tutorial con dicha modificación.

También se puede utilizar la opción de corazones en lugar de estrellas. Para eso es necesario cambiar ui star rating por ui heart rating en las dos ocasiones en que aparece en el código de arriba.

Otra idea posible es el poder utilizar las dos versiones (corazones o estrellas) dependiendo del foro o incluso dependiendo del tema. Pero eso sera para otro dia.

Última modificación: 7 Apr, 2020, 1:19 pm por Omar G..

Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;

Omar G. 29 Feb, 2020, 9:44 pm

Última modificación: 29 Feb, 2020, 9:59 pm por Omar G..

Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;

1.8 Ratings utilizando Semantic UI

Omar G. 29 Feb, 2020, 9:42 pm

Omar G. 29 Feb, 2020, 9:44 pm