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 ?

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

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

Moin March 11, 2024, 4:03pm 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.

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