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

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. [image] How to add customer HTML after "post_1" Support Posts are widgets which means what you’re trying to do will involve a bit more work that just adding html. Discourse themes have the ability to decorate widgets so you can leverage on that. Decorating a widget is explained in the link above so let’s focus on what you’re trying to do - add markup after the first post in every topic. Start by adding the markup to all posts. So something like this api.decorateWidget("post:after", helper => { … If you still have problems, then please post the rest of the code you’re using.

Thanks for your help (especially for newbies) This is the entire code 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') ), ) ), ] ), ] ) ] ); }); } I used helper.h(‘a’, { href: ‘/signup’} But when clicking the button, the page will reload instead of displaying the Registration Frame immediately

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?

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

[image] Joe: showLogin where to place this code in my mint theme ?

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:

in mint theme where to place this code ?

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.

i ahve followed the steps but when reached to login page model is not opened automatically // 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(); } }); i m getting console.error(“API or showLogin function are not available.

Open the login popup Or trigger event when button is pressed

Development

user34 (Saad Yusuf) March 11, 2024, 4:40pm 10

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

Topic		Replies	Views
Opening the login form with onclick in a theme component Development plugin-api	3	940	August 23, 2023
Add Login / Signup Buttons to custom HTML Product Support	0	1360	July 28, 2020
How do I create a new Sign Up / Login Button? Product Support	2	989	March 30, 2022
Is there any way to listen User login event using Theme component Development	15	2164	December 30, 2020
How can i add image in login and register box Product Support	5	311	December 24, 2024

Open the login popup Or trigger event when button is pressed

Related topics