Abrir o popup de login ou acionar evento ao pressionar o botão

Dev
1

Existe uma maneira simples, como: o botão tem a classe sign-up-button

Ao ser clicado, abrirá o Popup de registro. Em vez de usar a: href é um cadastro

Usei api.decorateWidget ('post: after', helper

Mas há NOME:LOCALIZAÇÃO que é único para inserir um trecho de código no final do artigo.

Ou o local para encontrar o NOME:LOCALIZAÇÃO

2

post:after deve funcionar se você quiser adicionar novos elementos ao final de uma postagem. Observe que há um espaço entre post: e after.

Acho que isso está relacionado ao que você está tentando fazer.

Se ainda tiver problemas, por favor, poste o restante do código que você está usando.

3

Obrigado pela sua ajuda (especialmente para iniciantes)
Este é todo o código

<script type="text/discourse-plugin" version="0.8.25">
    const user = api.getCurrentUser();
    if (!user) {
    api.decorateWidget('post:after', helper => {
	let h = helper.h, attrs = helper.attrs;
	// console.log(attrs);
	return helper.h('div.fixed-bottom-bar.d-none.d-lg-block',
		[
		    helper.h('div.wrapper',
		        [
		        	helper.h('div.logo',
			        	helper.h('img', {
		                    src: 'https://thuvienmuasam.com/uploads/default/original/1X/776142524c0d5c0430a603fde63a8bad2f77b267.svg',
		                    alt: 'ThuVienMuaSam'
		                })
		        	),
		            helper.h('div.content.d-flex.justify-content-between.ml-1',
		            	[

			        		helper.h('div.float-left',
			         		[
			        			helper.h('span.title','Bem-vindo à Biblioteca de Compras!'),
								helper.h('br'),
								helper.h('span.text',
			         			[
			         				helper.h('span','Comece '),
									helper.h('a.text-primary.cursor-pointer.sign-up-button',{ href: '/signup'},
										helper.h('strong','criando uma conta na TVMS')
									),
									helper.h('span',' para acessar mais posts interessantes de '),
									helper.h('a',{ href: '/u/'+helper.attrs.username },
										helper.h('strong',""+helper.attrs.username),
									),
								])
							]),
							helper.h('div.float-right.d-flex.align-items-center',
								helper.h('button.btn-primary.btn',{type:'button'},
									helper.h('a', { href: '/signup'},
										helper.h('span.d-button-label','Participar')
									),
								)

							),
						]
			        ),
		        ]
		    )
		]
	);
    });
}
</script>

Eu usei helper.h(‘a’, { href: ‘/signup’} Mas ao clicar no botão, a página recarrega em vez de exibir o Formulário de Registro imediatamente

4

Obrigado por compartilhar seu código :+1:

Se você deseja que os modais de login / cadastro apareçam diretamente, você precisa usar as ações integradas showLogin e showCreateAccount.

Então, em vez disso

helper.h(
  "button.btn-primary.btn",
  { type: "button" },
  helper.h(
    "a",
    { href: "/signup" },
    helper.h("span.d-button-label", "Participe")
  )
)

você deve usar algo assim para o modal de cadastro

helper.attach("button", {
  label: "sign_up",
  className: "btn-primary btn-small sign-up-button",
  action: "showCreateAccount"
})

ou assim, se quiser o modal de login

helper.attach("button", {
  label: "log_in",
  className: "btn-primary btn-small login-button",
  action: "showLogin",
  icon: "user"
})

Também devo observar que acho que adicionar um banner — para usuários anônimos — abaixo de cada post com os botões de cadastro / login é muito hostil ao usuário e recomendo evitar fazer isso. No entanto, não sei muito sobre o seu caso de uso aqui. Você considerou adicionar o banner / imagem no topo do seu site em vez de adicioná-lo a cada post?

5

Obrigado por voltar e resolver todas as perguntas :smile:

Quero melhorar a experiência dos novos usuários agora, então preciso de ação.
Atualmente, funciona apenas no PC.
Estou navegando por artigos sobre cookies para poder ocultar ou mostrar quando os usuários clicarem em ocultar.

6

onde devo colocar este código no meu tema mint?

7

Você pode criar um novo componente de Tema e anexá-lo ao seu tema.

Espero que ajude. :+1:

8

No tema mint, onde devo colocar este código?

9

Você tentou os passos que @Arkshine forneceu?
Como você não pode editar temas remotos, é melhor criar seu próprio componente de tema e adicioná-lo ao tema mint.

10

console.error(“A API ou a função showLogin não estão disponíveis.”);

11

Segui os passos, mas quando cheguei à página de login, o modelo não abriu automaticamente.

<script type="text/discourse-plugin" version="0.8.25">
    // Função para verificar se a página atual é a página de login
    function isLoginPage() {
        return window.location.pathname === "/login";
    }

    // Dispara a ação de login quando a página carrega
    document.addEventListener("DOMContentLoaded", function() {
        console.log("Evento DOMContentLoaded disparado.");
        
        // Verifica se a página atual é a página de login
        if (isLoginPage()) {
            console.log("A página atual é a página de login.");
            
            // Dispara a ação de login
            if (typeof api !== "undefined" && typeof api.showLogin === "function") {
                console.log("API e função showLogin estão disponíveis.");
                api.showLogin();
            } else {
                console.error("API ou função showLogin não estão disponíveis.");
            }
        } else {
            console.log("A página atual não é a página de login.");
        }
        
        // Obtém o elemento do botão de login
        const loginButton = document.getElementById("loginButton");

        // Dispara um evento de clique no botão de login para abrir o modal de login
        if (loginButton) {
            loginButton.click();
        }
    });
</script>

Estou recebendo console.error(“API ou função showLogin não estão disponíveis.