Open the login popup Or trigger event when button is pressed

Development
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

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.

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

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?

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

where to place this code in my mint theme ?

7

You can create a new Theme component and attach it to your theme.

  • Go to Admin → Customize

  • Click on Install button
    image

  • Then attach it to your theme and click on Edit CSS/HTML button
    image

  • You add code in Head section:
    image

Hope that helps. :+1:

8

in mint theme where to place this code ?

9

Did you try the steps @Arkshine provided?
Since you cannot edit remote themes, it is best to create your own theme component and add that to the mint theme.

10

i m getting console.error(“API or showLogin function are not available.”);

11

i ahve followed the steps but when reached to login page model is not opened automatically

<script type="text/discourse-plugin" version="0.8.25">
    // Function to check if the current page is the login page
    function isLoginPage() {
        return window.location.pathname === "/login";
    }

    // Trigger login action when the page loads
    document.addEventListener("DOMContentLoaded", function() {
        console.log("DOMContentLoaded event fired.");
        
        // Check if the current page is the login page
        if (isLoginPage()) {
            console.log("Current page is the login page.");
            
            // Trigger login action
            if (typeof api !== "undefined" && typeof api.showLogin === "function") {
                console.log("API and showLogin function are available.");
                api.showLogin();
            } else {
                console.error("API or showLogin function are not available.");
            }
        } else {
            console.log("Current page is not the login page.");
        }
        
        // Get the login button element
        const loginButton = document.getElementById("loginButton");

        // Trigger a click event on the login button to open the login modal
        if (loginButton) {
            loginButton.click();
        }
    });
</script>

i m getting console.error(“API or showLogin function are not available.