Apri il popup di accesso o attiva l'evento quando viene premuto il pulsante

Sviluppatore
1

C’è un modo semplice, ad esempio: il pulsante ha la classe sign-up-button

Quando viene cliccato, aprirà il popup di registrazione. Invece di usare a: href è un signup

Ho usato api.decorateWidget('post: after', helper

Ma c’è NOME:POSIZIONE che è unico per inserire uno snippet di codice alla fine dell’articolo.

Oppure un luogo per trovare il NOME:POSIZIONE

2

post:after dovrebbe funzionare se vuoi aggiungere nuovi elementi alla fine di un post. Nota che c’è uno spazio tra post: e after.

Penso che questo sia correlato a ciò che stai cercando di fare.

Se hai ancora problemi, pubblica il resto del codice che stai utilizzando.

3

Grazie per il tuo aiuto (specialmente per i principianti)
Questo è l’intero codice

<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','Benvenuti alla Biblioteca degli Acquisti!'),
								helper.h('br'),
								helper.h('span.text',
			         			[
			         				helper.h('span','Inizia '),
									helper.h('a.text-primary.cursor-pointer.sign-up-button',{ href: '/signup'},
										helper.h('strong','registrando un account TVMS')
									),
									helper.h('span',' per ottenere articoli più interessanti da '),
									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','Iscriviti')
									),
								)

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

Ho usato helper.h(‘a’, { href: ‘/signup’} ma quando clicco sul pulsante, la pagina si ricarica invece di visualizzare immediatamente il modulo di registrazione

4

Grazie per aver condiviso il tuo codice :+1:

Se vuoi che i modali di accesso/registrazione vengano visualizzati direttamente, devi utilizzare le azioni integrate showLogin e showCreateAccount.

Quindi, invece di questo

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

dovresti usare qualcosa del genere per il modale di registrazione

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

o questo se desideri il modale di accesso

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

Vorrei anche notare che, a mio avviso, aggiungere un banner - per gli utenti anonimi - sotto ogni post con i pulsanti di registrazione/accesso è molto ostile all’utente e sconsiglio di farlo. Tuttavia, non conosco molto il tuo caso d’uso specifico. Hai considerato di aggiungere il banner/l’immagine nella parte superiore del tuo sito invece di inserirlo in ogni post?

5

Grazie per essere tornato e aver risolto tutte le domande :smile:

Ora voglio migliorare l’esperienza per i nuovi utenti, quindi ho bisogno di un’azione.
Attualmente funziona solo su PC.
Sto consultando articoli sui cookie per poter nascondere il banner o farlo scomparire quando gli utenti cliccano su “nascondi”.

6

dove inserisco questo codice nel mio tema mint?

7

Puoi creare un nuovo componente Tema e allegarlo al tuo tema.

Spero che questo aiuti. :+1:

8

nel tema mint dove va inserito questo codice?

9

Hai provato i passaggi forniti da @Arkshine?
Dato che non puoi modificare temi remoti, è meglio creare il tuo componente tema e aggiungerlo al tema mint.

10

Sto ricevendo console.error(“La funzione API o showLogin non è disponibile.”);

11

Ho seguito i passaggi ma quando ho raggiunto la pagina di accesso, il modello non si è aperto automaticamente

<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>

sto ricevendo console.error("API or showLogin function are not available.