Como adicionar um botão personalizado no cartão do perfil do usuário?

Dev
1

Como posso adicionar um botão personalizado no resumo do perfil do usuário e na visualização de cartão?
Queríamos adicionar uma CTA que fizesse algo (por exemplo, redirecionar), mas sem salvar dados…

image
image1812×800 88.3 KB

e também no cartão do perfil:

image
image946×252 49.6 KB

Meu código inicial abaixo consegue quase tudo, mas está na seção do cabeçalho e não consegui encontrar uma maneira de fazer isso no resumo do perfil do usuário e no cartão:

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // faça algo aqui...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
1 curtida
2

Olá, seja bem-vindo aqui :wave:

Você precisaria usar plugin outlets neste local, especificamente user-profile-controls.

Você pode ver um exemplo aqui:

3 curtidas
3

Obrigado @Arkshine e eu sou realmente novo nesses plugins, então pensei que teria sido algo feito de forma semelhante com botões de cabeçalho.

Em qualquer caso, o user-profile-controls é um plugin? Você pode me guiar sobre como conseguir?

4

Encorajo você a ler Using Plugin Outlet Connectors from a Theme or Plugin; isso responderá à sua pergunta!

Essencialmente, um plugin outlet é uma forma de injetar código em um local específico.

Seria recomendável criar um componente de tema usando a CLI de temas e usar arquivos separados como fiz no meu componente de tema aqui (não hesite em clonar meu repositório para que você possa testá-lo/modificá-lo):

No entanto, você ainda pode testá-lo a partir da sua tag <script>:

No seu caso, você escreveria:

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Conteúdo do template aqui
</script>

Note a primeira linha. Usamos user-profile-controls como o nome do conector, e my_connector_name pode ser o que você quiser.

4 curtidas
5

Incrível! Agora estou entendendo e, como pode ser testado na tag de script, podemos pelo menos testar antes de criar o componente. Obrigado novamente :beers:

3 curtidas
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.