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.

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

   <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" />
   
   
   
2. Abrir el template `showthread_ratethread` y reemplazar por el siguiente código:
   
   Code:

   <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>
   
   
   
3. Abrir el template `forumdisplay_threadlist_rating` y reemplazar por el siguiente código (aqui solo eliminamos el JavaScript de MyBB):
   
   Code:

   <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>
   
   
   
4. Abrir el template `forumdisplay_thread_rating` y reemplazar por el siguiente código:
   
   Code:

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

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

<!-- reservado -->

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

29 Feb, 2020, 9:44 pm Omar G. wrote:
<!-- reservado -->

Existe alguna posibilidad de re-acomodar las imagenes del tutorial, puesto que no se ven bien.. ni nada.. solo para ver como queda?
El tuto es sencillo, pero me gustaría ver con las imagenes a ver como queda, para ponerlo en practica.

Hola disculpa ya fueron corregidas las imagenes.

Saludos!

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