# Login-Popup öffnen oder Ereignis auslösen, wenn die Taste gedrückt wird

**URL:** https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385
**Category:** Development
**Created:** [18. Dezember 2019 um 08:29 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385 "2019-12-18T08:29:50Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Bcat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bcat/32/163148_2.png) [@Bcat](https://meta.discourse.org/u/Bcat)
#### Post date: [18. Dezember 2019 um 08:29 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/1 "2019-12-18T08:29:50Z")

</div>

Es gibt einen einfachen Weg: Der Button hat die Klasse `sign-up-button`

Beim Klicken wird das Registrierungs-Popup geöffnet. Anstatt `a: href ist eine Anmeldung` zu verwenden

* * *

Ich habe `api.decorateWidget('post: after', helper` verwendet

Aber es gibt **NAME:LOCATION** , das einzigartig ist, um einen Code-Schnipsel am Ende des Artikels einzufügen.

Oder den Ort, an dem man NAME: LOCATION findet.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [18. Dezember 2019 um 08:39 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/2 "2019-12-18T08:39:52Z")

</div>

`post:after` sollte funktionieren, wenn Sie neue Elemente am Ende eines Beitrags hinzufügen möchten. Beachten Sie, dass Sie ein Leerzeichen zwischen `post:` und `after` haben.

Ich denke, das hängt mit dem zusammen, was Sie versuchen zu tun.

> [@How to add customer HTML after "post\_1"](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1/123068/2?u=johani):
>
> Posts are [widgets](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347) 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](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6) 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 \<script type="text/discourse-plugin" version="0.8"\> api.decorateWidget("post:after", helper =\> { …

Wenn Sie immer noch Probleme haben, posten Sie bitte den Rest des Codes, den Sie verwenden.

---

<div class="post-metadata">

### Author: ![Bcat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bcat/32/163148_2.png) [@Bcat](https://meta.discourse.org/u/Bcat)
#### Post date: [18. Dezember 2019 um 08:43 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/3 "2019-12-18T08:43:28Z")

</div>

Danke für deine Hilfe (besonders für Neueinsteiger)  
Dies ist der gesamte 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','Willkommen in der Einkaufsbibliothek!'),
                                        helper.h('br'),
                                        helper.h('span.text',
                                            [
                                                helper.h('span','Beginne '),
                                                helper.h('a.text-primary.cursor-pointer.sign-up-button',{ href: '/signup'},
                                                    helper.h('strong','einen TVMS-Account zu registrieren')
                                                ),
                                                helper.h('span',' um noch mehr interessante Beiträge von '),
                                                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','Beitreten')
                                        ),
                                    )

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

```

Ich habe **helper.h(‘a’, { href: ‘/signup’}** verwendet, aber beim Klicken auf den Button wird die Seite neu geladen, anstatt das Registrierungs-Fenster sofort anzuzeigen.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [19. Dezember 2019 um 11:02 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/4 "2019-12-19T11:02:20Z")

</div>

Danke, dass du deinen Code geteilt hast 👍

Wenn du möchtest, dass die Anmelde- bzw. Registrierungs-Modals direkt angezeigt werden, musst du die integrierten Aktionen `showLogin` und `showCreateAccount` verwenden.

Anstatt also folgendes:

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

```

solltest du für das Registrierungs-Modal so etwas verwenden:

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

```

oder für das Anmelde-Modal folgendes:

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

```

Ich möchte noch anmerken, dass ich es für sehr benutzerunfreundlich halte, unter jedem Beitrag für anonyme Nutzer ein Banner mit den Registrierungs-/Anmelde-Buttons einzufügen, und würde davon abraten. Allerdings kenne ich deinen konkreten Anwendungsfall nicht so genau. Hast du schon darüber nachgedacht, das Banner bzw. Bild stattdessen oben auf deiner Website anzuzeigen, anstatt es in jeden einzelnen Beitrag einzufügen?

---

<div class="post-metadata">

### Author: ![Bcat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bcat/32/163148_2.png) [@Bcat](https://meta.discourse.org/u/Bcat)
#### Post date: [19. Dezember 2019 um 14:52 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/5 "2019-12-19T14:52:28Z")

</div>

Vielen Dank, dass du zurückgekommen bist und alle Fragen beantwortet hast 😄

Ich möchte neue Benutzer jetzt verbessern, dafür brauche ich Maßnahmen.  
Derzeit funktioniert es nur auf dem PC.  
Ich durchsuche Artikel über Cookies, um sie ausblenden oder verbergen zu können, wenn Benutzer auf „Ausblenden

---

<div class="post-metadata">

### Author: ![user34](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/user34/32/367504_2.png) [@user34](https://meta.discourse.org/u/user34)
#### Post date: [11. März 2024 um 11:14 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/6 "2024-03-11T11:14:13Z")

</div>

> [@Johani](#):
>
> `showLogin`

wo platziere ich diesen Code in meinem Mint-Theme?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [11. März 2024 um 14:20 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/7 "2024-03-11T14:20:52Z")

</div>

Sie können eine neue Theme-Komponente erstellen und sie an Ihr Theme anhängen.

- Gehen Sie zu Admin → Anpassen

- Klicken Sie auf die Schaltfläche Installieren  

- Hängen Sie es dann an Ihr Theme an und klicken Sie auf die Schaltfläche CSS/HTML bearbeiten  

- Sie fügen Code in den Abschnitt `Kopf` ein:  

Ich hoffe, das hilft. 👍

---

<div class="post-metadata">

### Author: ![user34](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/user34/32/367504_2.png) [@user34](https://meta.discourse.org/u/user34)
#### Post date: [11. März 2024 um 15:52 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/8 "2024-03-11T15:52:55Z")

</div>

in Mint-Theme, wo soll dieser Code platziert werden?

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [11. März 2024 um 16:03 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/9 "2024-03-11T16:03:26Z")

</div>

Haben Sie die Schritte ausprobiert, die @Arkshine bereitgestellt hat?  
Da Sie keine Remote-Themes bearbeiten können, ist es am besten, Ihre eigene Theme-Komponente zu erstellen und diese zum Mint-Theme hinzuzufügen.

---

<div class="post-metadata">

### Author: ![user34](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/user34/32/367504_2.png) [@user34](https://meta.discourse.org/u/user34)
#### Post date: [11. März 2024 um 16:40 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/10 "2024-03-11T16:40:25Z")

</div>

Ich erhalte console.error(“API oder showLogin-Funktion sind nicht verfügbar.”);

---

<div class="post-metadata">

### Author: ![user34](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/user34/32/367504_2.png) [@user34](https://meta.discourse.org/u/user34)
#### Post date: [11. März 2024 um 16:43 UTC](https://meta.discourse.org/t/open-the-login-popup-or-trigger-event-when-button-is-pressed/136385/11 "2024-03-11T16:43:06Z")

</div>

Ich habe die Schritte befolgt, aber als ich die Anmeldeseite erreichte, wurde das Modell nicht automatisch geöffnet.

```plaintext
<script type="text/discourse-plugin" version="0.8.25">
    // Funktion zur Überprüfung, ob die aktuelle Seite die Anmeldeseite ist
    function isLoginPage() {
        return window.location.pathname === "/login";
    }

    // Anmeldeaktion auslösen, wenn die Seite geladen wird
    document.addEventListener("DOMContentLoaded", function() {
        console.log("DOMContentLoaded-Ereignis ausgelöst.");
        
        // Überprüfen, ob die aktuelle Seite die Anmeldeseite ist
        if (isLoginPage()) {
            console.log("Aktuelle Seite ist die Anmeldeseite.");
            
            // Anmeldeaktion auslösen
            if (typeof api !== "undefined" && typeof api.showLogin === "function") {
                console.log("API und showLogin-Funktion sind verfügbar.");
                api.showLogin();
            } else {
                console.error("API oder showLogin-Funktion sind nicht verfügbar.");
            }
        } else {
            console.log("Aktuelle Seite ist nicht die Anmeldeseite.");
        }
        
        // Das Anmelde-Button-Element abrufen
        const loginButton = document.getElementById("loginButton");

        // Ein Klickereignis auf den Anmelde-Button auslösen, um das Anmelde-Modal zu öffnen
        if (loginButton) {
            loginButton.click();
        }
    });
</script>

```

Ich erhalte die Konsolenausgabe: console.error(“API oder showLogin-Funktion sind nicht verfügbar.