Open the login popup Or trigger event when button is pressed

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 Likes

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 Likes

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 Like

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 Likes

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