Ouvrir la fenêtre contextuelle de connexion ou déclencher un événement lors de l'appui sur le bouton

Il existe une méthode simple : le bouton possède la classe sign-up-button

Au clic, il ouvre la fenêtre modale d’inscription. Au lieu d’utiliser a: href est un formulaire d'inscription


J’ai utilisé api.decorateWidget('post:after', helper

Mais il y a NOM:EMPLACEMENT qui est unique pour insérer un extrait de code à la fin de l’article.

Ou bien l’endroit où trouver le NOM:EMPLACEMENT

post:after devrait fonctionner si vous souhaitez ajouter de nouveaux éléments en bas d’un message. Notez qu’il y a un espace entre post: et after.

Je pense que cela est lié à ce que vous essayez de faire.

Si vous rencontrez toujours des problèmes, veuillez publier le reste du code que vous utilisez.

Merci pour votre aide (surtout pour les débutants)
Voici tout le 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','Bienvenue sur la Bibliothèque d'Achats !'),
                                helper.h('br'),
                                helper.h('span.text',
                                [
                                    helper.h('span','Commencez par '),
                                    helper.h('a.text-primary.cursor-pointer.sign-up-button',{ href: '/signup'},
                                        helper.h('strong','créer un compte TVMS')
                                    ),
                                    helper.h('span',' pour accéder à davantage d'articles intéressants de la part 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','Rejoindre')
                                    ),
                                )

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

J’ai utilisé helper.h(‘a’, { href: ‘/signup’} mais lorsque je clique sur le bouton, la page se recharge au lieu d’afficher immédiatement le cadre d’inscription.

Merci d’avoir partagé votre code :+1:

Si vous souhaitez que les modales de connexion / inscription s’affichent directement, vous devez utiliser les actions intégrées showLogin et showCreateAccount.

Au lieu de ceci

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

vous devriez utiliser quelque chose comme ceci pour la modale d’inscription

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

ou ceci si vous souhaitez la modale de connexion

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

Je dois également noter que je pense qu’ajouter une bannière - pour les utilisateurs anonymes - sous chaque publication avec les boutons d’inscription / connexion est très peu convivial et je vous déconseille de le faire. Cependant, je ne connais pas grand-chose à votre cas d’usage ici. Avez-vous envisagé d’ajouter la bannière / l’image en haut de votre site plutôt que de l’ajouter à chaque publication ?

Merci d’être revenu et d’avoir résolu toutes les questions :smile:

Je souhaite désormais améliorer l’expérience des nouveaux utilisateurs, j’ai donc besoin d’actions.
Pour l’instant, cela ne fonctionne que sur PC.
Je consulte des articles sur les cookies afin de pouvoir les masquer ou les faire disparaître lorsque les utilisateurs cliquent sur « Masquer ».

où placer ce code dans mon thème mint ?

Vous pouvez créer un nouveau composant Thème et le joindre à votre thème.

J’espère que cela vous aidera. :+1:

Dans le thème mint, où dois-je placer ce code ?

Avez-vous essayé les étapes fournies par @Arkshine ?
Comme vous ne pouvez pas modifier les thèmes distants, il est préférable de créer votre propre composant de thème et de l’ajouter au thème mint.

je reçois console.error(“API ou la fonction showLogin ne sont pas disponibles.”);

J’ai suivi les étapes, mais lorsque j’arrive à la page de connexion, la fenêtre modale ne s’ouvre pas automatiquement.

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

J’obtiens la console.error("API or showLogin function are not available.