Open the login popup Or trigger event when button is pressed

Dev
1

There is a simple way like: button has class: sign-up-button

When clicked will open the registered Popup. Instead of using a: href is a signup

I used api.decorateWidget ('post: after', helper

But there is NAME:LOCATION is unique to insert a code snippet at the end of the article.

Or place to find the NAME: LOCATION

2 curtidas
2

post:after should work if you want to add new elements to the bottom of a post. Note that you have a space between post: and after.

I think this is related to what you’re trying to do.

If you still have problems, then please post the rest of the code you’re using.

5 curtidas
3

Thanks for your help (especially for newbies)
This is the entire code

<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','Chào mừng đến với Thư Viện Mua Sắm!'),
									helper.h('br'),
									helper.h('span.text',
				         			[
				         				helper.h('span','Bắt đầu '),
										helper.h('a.text-primary.cursor-pointer.sign-up-button',{ href: '/signup'},
											helper.h('strong','đăng ký tài khoản TVMS')
										),
										helper.h('span',' để có được nhiều bài viết thú vị hơn từ '),
										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','Tham Gia')
										),
									)

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

I used helper.h(‘a’, { href: ‘/signup’} But when clicking the button, the page will reload instead of displaying the Registration Frame immediately

1 curtida
4

Thanks for sharing your code :+1:

If you want the login / sign up modals to show up directly, then you need to use the built-in showLogin and showCreateAccont actions.

So instead of this

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

you should use something like this for the signup modal

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

or this if you want the login modal

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

I should also note that I think adding a banner - for anon users - below every post with the signup / login buttons is very user-hostile and I would recommend against doing that. However, I don’t know much about your use-case here. Have you considered adding the banner / image at the top of your site instead of adding it to every post?

4 curtidas
Opening the login form with onclick in a theme component
5

Thank you for coming back and solving all the questions :smile:

I want to improve new users now, so I need action.
Currently only works on PC.
I am browsing through articles about cookies to be able to hide or hide when users click on hide it

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:

2 curtidas
Top contributors sidebar Backgound
How to edit <head>
Beginner's guide to using Discourse Themes
I would like to edit the theme rules
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.

3 curtidas
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.