Contenido

Añade funcionalidades a tus comentarios con jQuery (responder)

1 dic

+ 21

Con el rediseño de aNieto2k se implementaron una serie de funcionalidades para hacer más fácil la vida al usuario y así mejorar la experiencia del usuario dentro de la página. Una de estas mejoras es el “Responder” de los comentario. Un sistema basado en Javascript que permite responder a comentarios directamente desde el propio comentario.

comment-replu-with-jquery

Como podemos ver, se basa en un botón (con una flecha circular) que al accionar nos muestra un <textarea /> y un <button /> para enviar el texto al formulario de envio de situado más abajo. Este sistema, personalmente me es muy práctico para contestar a muchos usuarios a la vez y para poder ver el comentario de otro usuario y así comentar por partes sin perder el hilo.

Montémoslo

Para explicaro como montarlo, he decidio usar como base Kubrick que como todos sabemos es el theme por defecto de WordPress. Es un theme ideal para explicar todas estas cosas, después, dependiendo del theme que estés usando habrá que hacer varios cambios a la estructura JS, pero eso ya es otro tema :D

Requisitos?

He usado jQuery, por lo rápido que es desarrollar con él. Si alguien lo porta a otros frameworks que me pegue un toque.

  1. WordPress 2.6
  2. Theme Kubrick
  3. jQuery

¿Javascript?

Para evitar tener que tocar la estructura de nuestro theme y como esta funcionalidad va a necesitar mucho javascript para funcionar he pensado en montarlo todo usando javascript para así, los usuarios que no lo tengan habilitado no verán un enlace sin funcionalidad. Otra alternativa sería usar <noscript /> para mostrar el <textarea /> pero sería más laborioso y al final se consigue lo mismo.

El código

Os pongo el código necesario para conseguir esta funcionalidad sobre el Theme Kubrick.

$(document).ready(function(){
  // Recorremos los comentarios del listado <ol />
  $("ol.commentlist li").each(function(x, el){

	// Cogemos el ID del comentario
    var ID = $(el).attr("id");

	// Cogemos el nombre del autor del comentario
    var author = $(el).find("cite a").text();

	// Añadimos el enlace en la parte inferior del comentario.
    $(el).append('<a class="a-responder" href="#' + ID + '">Responder a ' + author + '</a>');

	// Le añadimos funcionalidad
    $(el).find(".a-responder").bind("click", function(){

		// Guardamos el elemento
        var link = $(this);

		// Añadimos el <textarea /> y el <button />
        $(link).after('<div class="div-responder"><textarea class="txtarea-responder"></textarea><button class="btn-responder">Insertar</button></div>');

		// Le añadimos funcionalidad al <button />
        $(el).find(".btn-responder").bind("click", function(){

			// Guardamos el texto anterior
            var oldText = $("textarea#comment").val() + "\n";

			// Preparamos el nuevo texto.
            var newText = '\n<a rel="reply-comment" href="#comment-'+ ID +'">' + author +"</a>: "+ $(this).prev().val();

			// Añadimos el nuevo texto
            $("textarea#comment").val(oldText + newText);

			// Eliminamos el <textarea /> y el <button />
            $(this).parent().remove();

			// Mostramos el enlace
            $(link).show();
        });

		// Ocultamos el enlace
        $(link).hide();

		// Paramos la ejecución del enlace
        return false;
    });
  });
});

Explicación

Como podemos ver, son muy pocas líneas y tienen una funcionalidad muy potente en sus tripas. Vamos a intentar destripar el código para explicar lo que nos ofrece cada línea.

// Recorremos los comentarios del listado <ol />
$("ol.commentlist li").each(function(x, el){

Primero hemos de recoger los comentario de la página, Kubrick para ello usa una estructura <ol /> para listar los comentarios así que mediante el uso de each() los iteramos aplicando a cada uno de ellos las siguiente líneas de código.

// Cogemos el ID del comentario
var ID = $(el).attr("id");

// Cogemos el nombre del autor del comentario
var author = $(el).find("cite a").text();

Al iterar un listado de elementos, jQuery nos permite interactuarlos como si estuvieramos en un elemento concreto cada vez. En este caso, recogemos el ID del comentario para almacenarlo y usarlo más adelante, al igual que nombre del autor que en este theme está bajo una etiqueta <cite />.

// Añadimos el enlace en la parte inferior del comentario.
$(el).append('<a class="a-responder" href="#' + ID + '">Responder a ' + author + '</a>');

Una vez guardados estos datos básicos podemos montar el enlace que desencadenará el proceso que nos muestre el <textarea />. Para ello usaremos append(), que nos permite introducir un HTML al final del elemento, en este caso $(el), que representa al item actual dentro de each().

kubrick-reply-system-close

// Le añadimos funcionalidad
$(el).find(".a-responder").bind("click", function(){

Una vez creado el enlace, debemos darle un funciondad, para ello, buscaremos el elemento <a class="a-responder" /> dentro del comentario actual y despues controlaremos el evento “click” del mismo.

// Añadimos el <textarea /> y el <button />
$(link).after('<div class="div-responder"><textarea class="txtarea-responder"></textarea><button class="btn-responder">Insertar</button></div>');

// Le añadimos funcionalidad al <button />
$(el).find(".btn-responder").bind("click", function(){

La funcionalidad de este botón es la de mostrar el <textarea /> y el <button /> además de añadirle la funcionalidad necesaria al <button /> para añadir el texto al formulario de envio de comentarios. Para ello volvemos a buscar el botón dentro del elemento actual y controlamos la funcionalidad del evento “click” del mismo.

// Le añadimos funcionalidad al <button />
$(el).find(".btn-responder").bind("click", function(){
	// Guardamos el texto anterior
        var oldText = $("textarea#comment").val() + "\n";
	// Preparamos el nuevo texto.
        var newText = '\n<a rel="reply-comment" href="#comment-'+ ID +'">' + author +"</a>: "+ $(this).prev().val();
	// Añadimos el nuevo texto
        $("textarea#comment").val(oldText + newText);
	// Eliminamos el <textarea /> y el <button />
        $(this).parent().remove();
	// Mostramos el enlace
       $(link).show();
});

El <button /> únicamente ha de copiar el contenido del <textarea /> al formulario de envio añadiendo el enlace necesario para poder seguir el comentario una vez posteado. Para ello guardaremos, inicialmente, el contenido del <textarea /> del formulario de envio y le añadiremos el nuevo texto. Una vez hecho esto, podemos elimiar el <textarea /> y el <button /> ya que no lo volveremos a usar, pero por si queremos añadir nuevos comentarios volveremos a mostrar el enlace que desencadena todo lo anterior.

kubrick-reply-system-open

¿Y como lo adapto a mi theme?

Esta es la tarea más laboriosa ya que cada theme es un mundo y está pensando y desarrollado de una forma diferente. He intentado dejar el código lo más claro posible para que la adaptación sea más sencilla. Realmente, requiere únicamente conocer dos elementos fundamentales de la estructura del theme para que funcione perfectamente.

  1. El sistema en que muestra los comentarios, mediante <ul />, <ol />, <div />,…. y encontrar el patrón que se aplica a cada comentario.
  2. El lugar en el que se encuentra el nombre del usuario que ha comentado, aunque es Opcional ya que podemos usar el ID del comentario para enlazar el próximo comentario.

Ver código

Puedes echarle un vistazo al código directamente aqui.
¿Que te animas a montarlo en tu blog? Cuentanos tu experiencia.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.