Campo personalizado antes no tópico

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Campo personalizado antes no tópico

Mensagem por Lobs em 17/02/19, 12:04 am

Detalhes da questão


Endereço do fórum: https://www.forumnsanimes.com
Versão do fórum: ModernBB

Descrição


Olá, pessoal. Tenho um fórum (que inclusive é Premium) e estou com um problema bem chato e que ainda não encontrei uma solução.

Eu estou tentando aperfeiçoar meu sistema de conquistas que fundei há anos atrás (antes chamado de "Badges" e "Medalhas"). A ideia é bem simples: colocar uma div, em cima do post do membro, que mostre as conquistas (representadas por medalhas) que ele conseguiu. Essas conquistas são um campo do perfil do membro.

Eu fiz o seguinte:

1- Coloquei isso no campo do perfil "Conquistas" dos membros:

Código:
[table id="achievements" class="postAch"][tr][td]CONQUISTAS[/td][/tr][/table]

2- Inseri esse javascript nos tópicos:

Código:
$(function(){
          $('#achievements').insertBefore('.postbody');
        });

3- E dei estilo à table achievements com CSS.

O resultado foi esse:

Campo personalizado antes no tópico To4hXSb

Ou seja, eu coloquei uma table no campo de perfil, inseri um script que insere essa table antes do postbody e estilizei essa table com CSS para ficar com a aparência de uma div.

QUAL FOI O PROBLEMA, ENTÃO?

A "CONQUISTAS" mostrado no print não mostra as conquistas de CADA MEMBRO, respectivamente. Ele mostra apenas as conquistas do PRIMEIRO USUÁRIO da página, em TODOS OS CAMPOS DE CONQUISTAS de todos os usuários.

Por exemplo, se eu colocar "CONQUISTA 1", no criador do tópico, e CONQUISTA 2, CONQUISTA 3, e CONQUISTA 4 no segundo, terceiro e quarto membro a postar no tópico, a caixinha (do print) de conquistas de todos eles vai mostrar "CONQUISTA 1", ao invés de mostrar certinho as conquistas particulares de cada usuário. Se for na página 2, por exemplo, as conquistas mostradas em todos os campos serão o do primeiro usuário a postar na página 2.

Como está:

Post 1 - Conquistas do usuário 1
Post 2 - Conquistas do usuário 1
Post 3 - Conquistas do usuário 1
Post 4 - Conquistas do usuário 1

Como deveria estar:

Post 1 - Conquistas do usuário 1
Post 2 - Conquistas do usuário 2
Post 3 - Conquistas do usuário 3
Post 4 - Conquistas do usuário 4


Eu sei que muito provavelmente o problema está no script. Ou no fato de eu não estar usando uma div real e sim uma table simulada. Mas não sei como resolver. Pensei também na criação de uma variável para o campo de perfil "conquistas", mas... simplesmente não tenho habilidade com isso ainda. Preciso bastante da ajuda de vocês. Help me!

@AquilesD. @Fraise @Pedxz @Roger123
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Campo personalizado antes no tópico

Mensagem por Pedxz em 17/02/19, 11:50 am

Olá @Lobs,
Mude o seu código JavaScript, para o seguinte:
Código:
(function ($) {
   'use strict';
 
   $(function () {
      if (!/^\/t(\d+)(p\d+-|-).*$/i.test(location.pathname)) return;
      $('.post').each(function () {
         var $post = $(this);
         var $achievements = $post.find('.postprofile-info > #achievements');
         if (!$achievements.length) return;
         $achievements.insertBefore($post);
      });
   });
})(jQuery);
Relativamente a variável das conquistas, o senhor terá que abrir outro tópico de suporte, visto que só é válida uma questão por tópico!


Cordialmente,
pedxz.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Pedxz Moderadeiro
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3343
Pontos Ativos : 3993

https://power-pixel.net

Atendido / Resolvido Re: Campo personalizado antes no tópico

Mensagem por Lobs em 17/02/19, 08:49 pm

@Pedxz escreveu:Olá @Lobs,
Mude o seu código JavaScript, para o seguinte:
Código:
(function ($) {
 'use strict';
 
 $(function () {
 if (!/^\/t(\d+)(p\d+-|-).*$/i.test(location.pathname)) return;
 $('.post').each(function () {
 var $post = $(this);
 var $achievements = $post.find('.postprofile-info > #achievements');
 if (!$achievements.length) return;
 $achievements.insertBefore($post);
 });
 });
})(jQuery);
Relativamente a variável das conquistas, o senhor terá que abrir outro tópico de suporte, visto que só é válida uma questão por tópico!


Cordialmente,
pedxz.

Cara, muito bom! Tu é demais!

Mas surgiu um novo problema. A caixa mandou o espaço para antes do .post, ao invés de ficar no lugar original, que era antes do postbody. Olha como ficou e compare com o print que eu postei na mensagem inicial do tópico:

https://imgur.com/a/8QVhQeH
https://www.forumnsanimes.com/t80560-teoria-a-verdadeira-habilidade-de-barba-negra#1436688
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Campo personalizado antes no tópico

Mensagem por Lobs em 18/02/19, 02:58 pm

up up up up up /\
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Campo personalizado antes no tópico

Mensagem por Key of Destiny em 18/02/19, 08:03 pm

Boa tarde,

É sempre bom ver um fã do meu trabalho. Gostou tanto das novas funcionalidades do meu fórum que resolveu se inspirar. Aliás, você tem meu contato. Se queria aprender a fazer, era só me mandar mensagem. Acho que vai precisar, porque creio que o próximo passo da sua inspiração seja o perfil. Feliz

O jeito mais fácil de fazer isso não é inserindo html via javascript, mas sim aproveitando os templates pra inserir uma marcação e usá-la como referência para o javascript. Por isso, sugiro que crie um div qualquer em cima do post no template viewtopic_body.

Código:
<div class="conquistas"></div>

Em seguida, procure esta variável {postrow.displayed.profile_field.CONTENT} e substitua-a por este conteúdo.

Código:
<span class="fieldContent">{postrow.displayed.profile_field.CONTENT}</span>

Por fim, crie um novo javascript com este conteúdo e investimento nos tópicos:

Código:
$(function () {
   $('.post').each(function () {
       var $this = $(this),
             conq = $this.find('.postprofile-info .label:contains("Conquistas")').next('.fieldContent').html();
  
            $this.find('.conquistas').html(conq);
   });
 });

A variável conq busca a informação do campo específico que você deseja. Apenas precisa ter certeza do nome do campo de perfil ser: "Conquistas".

De nada. Feliz
Key of Destiny

Key of Destiny
Nível 10

Masculino
Inscrito dia : 15/12/2015
Mensagens : 255
Pontos Ativos : 417

Atendido / Resolvido Re: Campo personalizado antes no tópico

Mensagem por Lobs em 18/02/19, 10:46 pm

@Key of Destiny escreveu:Boa tarde,

É sempre bom ver um fã do meu trabalho. Gostou tanto das novas funcionalidades do meu fórum que resolveu se inspirar. Aliás, você tem meu contato. Se queria aprender a fazer, era só me mandar mensagem. Acho que vai precisar, porque creio que o próximo passo da sua inspiração seja o perfil. Feliz

O jeito mais fácil de fazer isso não é inserindo html via javascript, mas sim aproveitando os templates pra inserir uma marcação e usá-la como referência para o javascript. Por isso, sugiro que crie um div qualquer em cima do post no template viewtopic_body.

Código:
<div class="conquistas"></div>

Em seguida, procure esta variável {postrow.displayed.profile_field.CONTENT} e substitua-a por este conteúdo.

Código:
<span class="fieldContent">{postrow.displayed.profile_field.CONTENT}</span>

Por fim, crie um novo javascript com este conteúdo e investimento nos tópicos:

Código:
$(function () {
   $('.post').each(function () {
       var $this = $(this),
             conq = $this.find('.postprofile-info .label:contains("Conquistas")').next('.fieldContent').html();
  
            $this.find('.conquistas').html(conq);
   });
 });

A variável conq busca a informação do campo específico que você deseja. Apenas precisa ter certeza do nome do campo de perfil ser: "Conquistas".

De nada. Feliz

Olha só! Uma maneira bem mais simples de fazer isso do que aquela engenhosidade toda usando as tabelas. Pensei em usar os templates também, mas nunca me interessei por jQuery e não tenho tido tanto tempo para aprender.

Não conheço muito do seu trabalho, mas achei legal a solução que encontrou para esse problema. Sorrir

Se você for quem estou pensando, não tenho qualquer intenção de me "inspirar" no perfil, me "inspirar" nas coisas do seu fórum, como se eu estivesse te copiando. Bobagem pura insinuar isso.

Eu fundei as ''badges'' (versão anterior das conquistas) desde 2015/16 e usar ela em um lugar mais conveniente sempre foi algo que eu tive em mente. E isso não somente o seu, mas outros dois fóruns também fazem (embora não sejam em português). Nós até falamos sobre certos fóruns estrangeiros um dia, não foi? Claro que você lembra.. (;

De qualquer forma, te agradeço. Foi legal da sua parte, apesar de ter sido espinhoso. Não tenho falado com você por motivos que você já deve imaginar. Se quiser mudar isso, sabe onde o fazer.

E tem um problema:

As informações mostram na div, mas mostram também nas informações do usuário, ao lado esquerdo do post. Creio que não tenha sido intencional, mas o código que você postou trouxe esse contratempo.
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Campo personalizado antes no tópico

Mensagem por Key of Destiny em 18/02/19, 11:21 pm

Boa noite,

O que você precisa para solucionar o problema é somente trocar o javascript por este.

Código:

$(function () {
  $('.post').each(function () {
      var $this = $(this),
            conq = $this.find('.postprofile-info .label:contains("Conquistas")').next('.fieldContent').html();
 
            $this.find('.conquistas').html(conq);
            $this.find('.postprofile-info .label:contains("Conquistas")').hide();
            $this.find('.postprofile-info .label:contains("Conquistas")').next('.fieldContent').hide();
  });
 });

Não estou insinuando nada, até porque acho essa situação bem engraçada. Só quis ressaltar o teor cômico, dada a atipicidade e a justificativa que eu já esperava.

Espero que consiga resolver o problema dessa vez.
Key of Destiny

Key of Destiny
Nível 10

Masculino
Inscrito dia : 15/12/2015
Mensagens : 255
Pontos Ativos : 417

Atendido / Resolvido Re: Campo personalizado antes no tópico

Mensagem por Lobs em 19/02/19, 12:11 am

@Key of Destiny escreveu:Boa noite,

O que você precisa para solucionar o problema é somente trocar o javascript por este.

Código:

$(function () {
   $('.post').each(function () {
       var $this = $(this),
             conq = $this.find('.postprofile-info .label:contains("Conquistas")').next('.fieldContent').html();
  
            $this.find('.conquistas').html(conq);
            $this.find('.postprofile-info .label:contains("Conquistas")').hide();
            $this.find('.postprofile-info .label:contains("Conquistas")').next('.fieldContent').hide();
   });
 });

Não estou insinuando nada, até porque acho essa situação bem engraçada. Só quis ressaltar o teor cômico, dada a atipicidade e a justificativa que eu já esperava.

Espero que consiga resolver o problema dessa vez.

Que bom que você já esperava. Sinal que passou pela sua cabeça. xD

Obrigado, reputei sua solução. Podem fechar o tópico.

Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Campo personalizado antes no tópico

Mensagem por AquilesD. em 19/02/19, 12:38 am

Tópico resolvido


Movido para "Questões resolvidas".


Campo personalizado antes no tópico WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 6054
Pontos Ativos : 7782

https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum