Abrir el popup de inicio de sesión o activar evento al presionar el botón

Hay una forma sencilla, como: el botón tiene la clase: sign-up-button

Al hacer clic, se abrirá el Popup de registro. En lugar de usar a: href es un registro


Usé api.decorateWidget ('post: after', helper

Pero hay NOMBRE:UBICACIÓN que es único para insertar un fragmento de código al final del artículo.

O el lugar para encontrar el NOMBRE:UBICACIÓN

post:after debería funcionar si deseas agregar nuevos elementos al final de una publicación. Ten en cuenta que tienes un espacio entre post: y after.

Creo que esto está relacionado con lo que estás intentando hacer.

Si aún tienes problemas, publica el resto del código que estás utilizando.

Gracias por tu ayuda (especialmente para los principiantes)
Este es todo el código

<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','¡Bienvenido a la Biblioteca de Compras!'),
									helper.h('br'),
									helper.h('span.text',
				         			[
				         				helper.h('span','Comienza '),
										helper.h('a.text-primary.cursor-pointer.sign-up-button',{ href: '/signup'},
											helper.h('strong','registrando una cuenta en TVMS')
										),
										helper.h('span',' para obtener más publicaciones interesantes de '),
										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','Unirse')
										),
									)

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

Usé helper.h(‘a’, { href: ‘/signup’} pero al hacer clic en el botón, la página se recarga en lugar de mostrar el Marco de Registro inmediatamente

¡Gracias por compartir tu código :+1:!

Si quieres que los modales de inicio de sesión o registro aparezcan directamente, entonces debes usar las acciones integradas showLogin y showCreateAccount.

Así que, en lugar de esto:

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

deberías usar algo así para el modal de registro:

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

o esto si quieres el modal de inicio de sesión:

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

También debo mencionar que creo que añadir un banner para usuarios anónimos debajo de cada publicación con los botones de registro/inicio de sesión es muy poco amigable para el usuario, y te recomendaría no hacerlo. Sin embargo, no conozco mucho sobre tu caso de uso aquí. ¿Has considerado añadir el banner o la imagen en la parte superior de tu sitio en lugar de añadirlo a cada publicación?

¡Gracias por volver y resolver todas las preguntas! :smile:

Quiero mejorar la experiencia para los nuevos usuarios ahora mismo, así que necesito acción.
Actualmente solo funciona en PC.
Estoy revisando artículos sobre cookies para poder ocultarlas o mostrarlas cuando los usuarios hagan clic en “ocultar”.

¿dónde coloco este código en mi tema mint?

Puedes crear un nuevo componente de Tema y adjuntarlo a tu tema.

Espero que eso ayude. :+1:

En el tema mint, ¿dónde coloco este código?

¿Probaste los pasos que proporcionó @Arkshine?
Dado que no puedes editar temas remotos, lo mejor es crear tu propio componente temático y añadirlo al tema mint.

i m getting console.error(“La API o la función showLogin no están disponibles.”);

Seguí los pasos pero al llegar a la página de inicio de sesión, el modelo no se abre automáticamente.

<script type="text/discourse-plugin" version="0.8.25">
    // Función para comprobar si la página actual es la página de inicio de sesión
    function isLoginPage() {
        return window.location.pathname === "/login";
    }

    // Activar la acción de inicio de sesión cuando la página se carga
    document.addEventListener("DOMContentLoaded", function() {
        console.log("Evento DOMContentLoaded disparado.");
        
        // Comprobar si la página actual es la página de inicio de sesión
        if (isLoginPage()) {
            console.log("La página actual es la página de inicio de sesión.");
            
            // Activar la acción de inicio de sesión
            if (typeof api !== "undefined" && typeof api.showLogin === "function") {
                console.log("La API y la función showLogin están disponibles.");
                api.showLogin();
            } else {
                console.error("La API o la función showLogin no están disponibles.");
            }
        } else {
            console.log("La página actual no es la página de inicio de sesión.");
        }
        
        // Obtener el elemento del botón de inicio de sesión
        const loginButton = document.getElementById("loginButton");

        // Activar un evento de clic en el botón de inicio de sesión para abrir el modal de inicio de sesión
        if (loginButton) {
            loginButton.click();
        }
    });
</script>

Estoy recibiendo console.error(“La API o la función showLogin no están disponibles.