Benachrichtigungs-Badge auch bei eigenem Menüpunkt realisieren

  • App
    WoltLab Suite Core

    Grüße,


    wenn ich im Hauptmenü eine eigene Gruppierung anlegen, wie in dem Fall (Screen), wo dann auch der Blog zu finden ist, ist es möglich das in der Gruppierung (Community) auch ein Badge mit den ungelesenen Einträgen steht? Im besten fall das diese auch zusammengezählt werden, wenn beispielsweise auch etwas neues unter den Rezepten zu finden ist.


    Ist das realisierbar? Gibt es dafür ein Quick&Dirty oder anderweitigen Workaround?


    LG

  • Gibt es keinen Befehl, kann man das irgendwie erweitern?

    Ich würde eine solche Funktion auch gerne in Auftrag geben, welche dies realisiert.

    Mit freundlichen Grüßen

    Sunny Cuewitzki

    • Official Post

    Hallo,


    wir wurden über die Melden-Funktion gebeten das das Thema in den Vorschläge-Bereich zu verschieben. Das habe ich erledigt, möchte aber an dieser Stelle schon anmerken, dass die Zähler von "Kind-Einträgen" generell nicht an die Eltern-Einträge vererbt werden.

  • dass die Zähler von "Kind-Einträgen" generell nicht an die Eltern-Einträge vererbt werden

    Warum denn nicht? Vielleicht mit einer Option (Standard: Aus), dass man die Wahl hat.

    Mit freundlichen Grüßen

    Sunny Cuewitzki

  • Lässt sich das denn hiermit weiter realisieren: https://jsfiddle.net/3jL1evn7/2/ ?

    HTML
    <span class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="(19 neue Einträge)">5</span>
    <span class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="(19 neue Einträge)">5</span>
    <span class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="(19 neue Einträge)">5</span>
    <span class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="(19 neue Einträge)">3</span>
    <br>
    <br>
    Gesamt : <span id='total'></span>

    Ich bin leider kein Entwickler und weiß nicht welche Schritte weiter nötig sind, aber wenn jemand Interesse hat mir das ganze umzusetzen, auch gerne in Form eines Plugins wie

    Das geht, aber nur mittels Plugin, siehe dazu AbstractMenuPageHandler::getOutstandingItemCount().

    Dann bin ich natürlich gerne bereit einen Obolus dafür zu zahlen.


    LG

    Mit freundlichen Grüßen

    Sunny Cuewitzki

  • möchte aber an dieser Stelle schon anmerken, dass die Zähler von "Kind-Einträgen" generell nicht an die Eltern-Einträge vererbt werden.

    Dazu kurz vorab: Es steht außer Frage, dass die Woltlab-Suite im allgemeinen eine gute Software ist. Vieles lässt sich nach Benutzerwünschen anpassen, intrigieren oder erweitern, womit die Woltlab-Suite flexibel ist (wie auch auf der Hauptseite damit geworben wird). Mit dieser Meinung stehe ich garantiert nicht alleine da. Was dem Menü an dieser Stelle nun anbelangt, so lassen sich sicher Menüpunkte nach eigenen Wünschen anordnen und das Menü flexibel per CSS anpassen. Ganz so flexibel ist es dann aber dennoch nicht und da wurde das Menü m.E. mehr vermurkst als alles andere, denn ...

    1. Benutzerfreundlichkeit
      WCS-Betreiber welche u.a. viele Apps installiert haben, kennen das Problem, dass Menüpunkte unter dem userPanel verschwinden. Ich persönlich würde von solchen Abstand nehmen, da ich dies aus Sicht des Besuchers/Gastes nicht sonderlich Benutzerfreundlich empfinde, wenn ich erst durch die Navigationsleiste klicken muss nur um alle Menüpunkte und dessen Notifications (Badges) sehen zu können.
    2. Notifications (Badges)
      Aufgrund das die genannten Kind-Einträge nicht an die Eltern-Einträge vererbt werden, würde damit u.a. dem Besucher unkorrekte Zahlen angezeigt werden. Beispiel:
      ├ Community
      │ ├── Forum [10]
      │ ├── Blog
      │ ├── Galerie [5]
      │ └── Filebase
      Wenn wie in dieser Baumstruktur der Menüpunkt "Community" auf die Foren-Liste verlinkt würde, so würde dieser Menüpunkt auch lediglich nur die neusten Beiträge des Forums anzeigen (hier im Beispiel: 10). Die anderen Sub-Levels hingegen würden somit unbeachtet bleiben und dem Besucher/Gast anstatt 15 eben nur 10 angezeigt werden, mit welchen der Besucher/Gast quasi irritiert oder gar veräppelt würde. Einzige Abhilfe wäre, dass sämtliche Menüpunkte der Apps (Forum, Blog, etc.) nebeneinander angeordnet werden würden - oder - die Menüpunkte in Sublevels anzuordnen (wie im obigen Beispiel) und damit schlicht weg vom Besucher/Gast verlangt werden würde, sich erst durch alle Sublevels zu klicken nur um die wirklichen Zahlen erkennen zu können. Gleichermaßen für welche der beiden Möglichkeiten man sich hier entscheiden würde, wären wir wieder beim Thema Benutzerfreundlichkeit (siehe Punkt 1).

    Alles im allen sollte genau zu dieser Thematik die WCS noch etwas ausgebessert werden. Aber das ist nur meine Meinung zu diesem Thema.


    Gruss,
    Andreas

    _________ Belarusinfo.de _________

    Informationen, Nachrichten und Diskussionsforum zu Belarus (Weißrussland)

  • So, ich habe mir nun ein "Quick & Dirty" gebastelt.


    Genutzt: Integration des [CSS] Erweitertes Menü (Mega Menü)


    Folgendes habe ich umgesetzt:

    Die Menüpunkte um die es geht, brauchen einen Trigger. Ich habe in dem Fall den Trigger FAKE genommen.

    Als Beispiel habe ich die Menüpunkte FAKEForum und FAKEBlog genommen.


    Im template _menu habe ich Zeile 8 mit folgendes ersetzt:

    Smarty
    <span class="boxMenuLinkTitle">{"FAKE"|str_replace:"":$menuItemNode->getTitle()}</span>

    So wird für die Ansicht das FAKE optisch entfernt.


    Zeile 10 habe ich mit folgendem ersetzt:

    Smarty
    {if $menuItemNode->getTitle() === 'Community' || $menuItemNode->getTitle() === 'Service'}
    <span id="total" class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="{lang}wcf.page.menu.outstandingItems{/lang}">{#$menuItemNode->getOutstandingItems()}</span>
    {else}
                            <span class="boxMenuLinkOutstandingItems badge badgeUpdate count_{" "|str_replace:"":$menuItemNode->getTitle()}" aria-label="{lang}wcf.page.menu.outstandingItems{/lang}">{#$menuItemNode->getOutstandingItems()}</span>

    Hier ist wichtig: count_{" "|str_replace:"":$menuItemNode->getTitle()}

    So werden mögliche Leerzeichen aus dem Namen entfernt, aber der Trigger bleibt bestehen.

    Ergebnis: count_FAKEBlog count_FAKEForum
    Zudem wird hier explizit das Menü Community und Service berücksichtigt (Im Anhang zu sehen)


    So kann das Javscript nun explizit auf die Trigger zugreifen:
    Das Script habe ich "vorerst" in das Template pageHeaderMenu geparkt.

    So wird das ganze erfolgreich abgefangen und NUR Menüpunkte mit einem Trigger berücksichtigt: [class*=count_FAKE]


    Vielleicht hat ja jemand Lust das ganze als Inspiration anzusehen und daraus was ordentlichens zu Formen (Plugin?). Es sollte doch möglich sein, dass man das Menü endlich irgendwie etwas flexibler gestalten zu können. Es gibt so tolle Menü-Varianten, welche im Woltlab gar nicht so genutzt werden können.

    LG

  • Ich habe das ganze noch einmal etwas anders gelöst und werde das dazu die Tage einmal anführen, eventuell kann der ein oder andere das ganze gebrauchen. Es verhält sich Mobil als auch auf dem Desktop gleichermaßen, ebenso ist die Verschachtelung irrelevant und Hauptmenü-Punkte müssen nicht zwingend auf eine App verlinkt werden.

    Mit freundlichen Grüßen

    Sunny Cuewitzki

  • Grüße, du bastelst bereits an etwas? Klappt das auch alles mit den Zusammenzählen der Badges etc?

    Mit freundlichen Grüßen

    Sunny Cuewitzki

  • Okay, verstanden. Ich stelle das Quick&Dirty von mir rein, eventuell kann das hilfreich sein.

    Mit freundlichen Grüßen

    Sunny Cuewitzki

  • Grüße,


    ich versuche das mal zusammenzufassen, was ich gemacht habe. Ich bin mir bewusst, dass man das ganze vereinfachen kann, aber mir fehlen dazu die Kenntnisse, aber es ist nutzbar und funktioniert ebenso auch gewünscht. Jedenfalls für meine Zwecke.


    Die Grundvoraussetzung (Für meinen Fall) ist das MegaMenü von Belarus.

    Die Templates Acp > Anpassung > Templates, welche modifiziert werden müssen sind __menu und pageMenuMobile

    Ebenso wird ACP > Kondifuration > Allgemein > Site > Footer-Code verwendet.


    Menü auf dem Desktop


    Öffne __menu

    Suche diesen Abschnitt:

    HTML
                    <a {anchorAttributes url=$menuItemNode->getURL() appendClassname=false} class="boxMenuLink"{if $menuItemNode->isActiveNode()} aria-current="page"{/if}>
                        <span class="boxMenuLinkTitle">{$menuItemNode->getTitle()}</span>
                        {if $menuItemNode->getOutstandingItems() > 0}
                            <span class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="{lang}wcf.page.menu.outstandingItems{/lang}">{#$menuItemNode->getOutstandingItems()}</span>
                        {/if}
                    </a>

    Ersetze diesen mit:

    Manuell (Desktop):

    Suche:

    HTML
                        <span class="boxMenuLinkTitle">{$menuItemNode->getTitle()}</span>

    Ersetze mit:
    Hier wird der Trigger (Dazu kommen wir am Schluss) entfernt, damit der Titel des Menüs nicht mit "FAKE" bestückt wird.

    HTML
                        {* BADGE FULL COUNT *}
                        <span class="boxMenuLinkTitle">{"FAKE"|str_replace:"":$menuItemNode->getTitle()}</span>

    Suche:

    HTML
                        {if $menuItemNode->getOutstandingItems() > 0}
                            <span class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="{lang}wcf.page.menu.outstandingItems{/lang}">{#$menuItemNode->getOutstandingItems()}</span>
                        {/if}

    Ersetze mit:
    Hier müssen (leider) die eigenen Erstellen Menüpunkte (Dazu kommen wir am Schluss) angegeben werden, denn so stellen wir sicher, dass die Badges auch an diesen zusammengezählt werden können, daher wurde das <span> um die ID id="total" erweitert. Sollten keine eigenen erstellten Menüs gefunden werden, greifen wir auf den Standard zurück, wobei diese mit einer weiteren Klasse versehen wurde (im standard unberücksichtigt) count_{" "|str_replace:"":$menuItemNode->getTitle()} die Ausgabe ist am Schluss count_FAKEMenütitel. Hier ist ebenso angemerkt, dass die eigenen Menüpunkte in dieser Fassung keine Leerzeichen enthalten sollten, sonst greift es nicht.

    HTML
                        {if $menuItemNode->getTitle() === 'Community' || $menuItemNode->getTitle() === 'Service'}
                             <span id="total" class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="{lang}wcf.page.menu.outstandingItems{/lang}">{#$menuItemNode->getOutstandingItems()}</span>
                        {else}
                                {if $menuItemNode->getOutstandingItems() > 0}
                                    <span class="boxMenuLinkOutstandingItems badge badgeUpdate count_{" "|str_replace:"":$menuItemNode->getTitle()}" aria-label="{lang}wcf.page.menu.outstandingItems{/lang}">{#$menuItemNode->getOutstandingItems()}</span>
                                {/if}
                        {/if}

    Fertig.


    Menü auf dem Smartphone (Tablet, etc..)

    Öffne: pageMenuMobile

    Suche:

    HTML
                    <a href="{$menuItemNode->getURL()}" class="menuOverlayItemLink{if $__outstandingItems} menuOverlayItemBadge{/if}{if $menuItemNode->isActiveNode()} active{/if}"{if $menuItemNode->isExternalLink() && EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>
                        <span class="menuOverlayItemTitle">{$menuItemNode->getTitle()}</span>
                        {if $__outstandingItems}
                            <span class="badge badgeUpdate">{#$__outstandingItems}</span>
                        {/if}
                    </a>

    Ersetze mit:

    Suche weiter:

    HTML
                                <a href="{$menuItemNode->getURL()}" class="menuOverlayItemLink{if $__outstandingItems} menuOverlayItemBadge{/if}{if $menuItemNode->isActiveNode()} active{/if}"{if $menuItemNode->isExternalLink() && EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>
                                    <span class="menuOverlayItemTitle">{$menuItemNode->getTitle()}</span>
                                                        {if $__outstandingItems}
                                        <span class="badge badgeUpdate">{#$__outstandingItems}</span>
                                                        {/if}
                                </a>

    Ersetze mit:

    Manuell (Smartphone, Tablet, etc..)

    Suche:

    HTML
                    <a href="{$menuItemNode->getURL()}" class="menuOverlayItemLink{if $__outstandingItems} menuOverlayItemBadge{/if}{if $menuItemNode->isActiveNode()} active{/if}"{if $menuItemNode->isExternalLink() && EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>

    Ersetze mit:

    Hier haben wir das {if $__outstandingItems} um || $menuItemNode->getTitle() === 'Community' || $menuItemNode->getTitle() === 'Service' erweitert, dass explizit unsere eigenen angelegten Menüs erkannt werden. Hier ist es dazu nötigt, damit auch für die eigenen Menüs die Klasse menuOverlayItemBadge genutzt wird, also die Badge-Anzeige.

    HTML
                    <a href="{$menuItemNode->getURL()}" class="menuOverlayItemLink{if $__outstandingItems || $menuItemNode->getTitle() === 'Community' || $menuItemNode->getTitle() === 'Service'} menuOverlayItemBadge{/if}{if $menuItemNode->isActiveNode()} active{/if}"{if $menuItemNode->isExternalLink() && EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>

    Suche:

    HTML
                        <span class="menuOverlayItemTitle">{$menuItemNode->getTitle()}</span>

    Ersetze mit:

    Auch hier wird dem Titel der Trigger entfernt, damit dieser nicht angezeigt wird.

    HTML
                        {* BADGE FULL COUNT *}
    
                            <span class="menuOverlayItemTitle">{"FAKE"|str_replace:"":$menuItemNode->getTitle()}</span>

    Suche:

    HTML
                        {if $__outstandingItems}
                            <span class="badge badgeUpdate">{#$__outstandingItems}</span>
                        {/if}

    Ersetze mit:

    Auch hier ist ist die explizite Angabe der eigenen Menüs wichtig, damit das ganze greifen kann. Zudem ist dem <span> auch hier eine ID id="mobiltotal" angehangen worden, damit auch Mobil die Badges zusammengezählt werden. Ebenso brauchen wir die zusätzliche Klasse, welche im Standard unbeachtet bleibt wichtig count_MOBIL{" "|str_replace:"":$menuItemNode->getTitle()}, welches in der Ausgabe zu count_MOBILFAKE wird.

    HTML
                         {if $menuItemNode->getTitle() === 'Community' || $menuItemNode->getTitle() === 'Service'}
                            <span id="mobiltotal" class="badge badgeUpdate">{#$__outstandingItems}</span>
                            {else}
                             {if $menuItemNode->getOutstandingItems() > 0}
                               <span class="badge badgeUpdate count_MOBIL{" "|str_replace:"":$menuItemNode->getTitle()}">{#$__outstandingItems}</span>
                             {/if}
                         {/if}

    Suche ein weiteres mal, ab Zeile 32:

    HTML
                                    <span class="menuOverlayItemTitle">{$menuItemNode->getTitle()}</span>

    Ersetze mit:

    Auch hier wird dem Titel der Trigger FAKE entfernt {"FAKE"|str_replace:"":$menuItemNode->getTitle()}

    HTML
                        {* BADGE FULL COUNT *}
    
                            <span class="menuOverlayItemTitle">{"FAKE"|str_replace:"":$menuItemNode->getTitle()}</span>

    Suche:

    HTML
                                                        {if $__outstandingItems}
                                        <span class="badge badgeUpdate">{#$__outstandingItems}</span>
                                                        {/if}

    Ersetze mit:

    Auch hier wieder, ist es wichtig, dass explizit die eigenen Menünamen angegeben werden {if $menuItemNode->getTitle() === 'Community' || $menuItemNode->getTitle() === 'Service'}. Ebenso wird dem Standardmenü, wie zuvor auch eine weitere Klasse vergeben count_MOBIL{" "|str_replace:"":$menuItemNode->getTitle()} was zu count_MOBILFAKE wird.

    HTML
                         {if $menuItemNode->getTitle() === 'Community' || $menuItemNode->getTitle() === 'Service'}
                            <span id="mobiltotal" class="badge badgeUpdate">{#$__outstandingItems}</span>
                            {else}
                            {if $menuItemNode->getOutstandingItems() > 0}
                            <span class="badge badgeUpdate count_MOBIL{" "|str_replace:"":$menuItemNode->getTitle()}">{#$__outstandingItems}</span>
                            {/if}
    
                        {/if}

    Damit wären die Template-Modifizierungen abgeschlossen. Die ID, welche vergeben wurden sind deshalb wichtig, damit Badges mit einer "0" entfernt werden. Die Verschachtelung des Menüs, scheint bisher egal zu sein, zumindest ist mir nichts weiteres aufgefallen. Ein Beispiel, wie das Menü bei mir aufgebaut ist, ist im Anhang zu finden.


    Der Footer-Code

    Hier sind 3 Javascript-Varianten nötig, wobei ich mir sicher bin, dass man diese als eine Funktion zusammenfassen kann. Wie, keine Ahnung, darum müssen da erfahrene Benutzer dran und dies eventuell umsetzen. Die drei Scripte nacheinander unter ACP > Kondifuration > Allgemein > Site > Footer-Code einfügen und speichern.

    Trigger

    Die Trigger (Auf dem Screenshot im Menü zu sehen) sind wichtig, in dem Fall FAKE, damit die Javascripte explizit auf die Ausgabe der "Badges" zurückgreifen und zusammenzählen. Wer sich an meinem Menü orientiert, wird verstehen wie diese eingesetzt wurden.


    Vielleicht kann der ein oder andere auch was damit anfangen.
    LG

  • Mirco83
    Bei dem genannten MegaMenü handelt es sich auch nur um eine optische Anpassung per CSS, jedoch nicht um Funktionen wie hier gewünscht wurde ;)


    Gruss,
    Andreas

    _________ Belarusinfo.de _________

    Informationen, Nachrichten und Diskussionsforum zu Belarus (Weißrussland)

  • SunnyCue , sorry das ich das alte Thema noch mal ausgrabe, aber ich war auf der Suche nach einer Lösung für genau dieses Problem und dachte ich probier es in der aktuellen WSC Version mal aus. Ich habe vier betroffene Menüpunkte, leider wird mir nur am ersten das Badge angezeigt, dort mit einer Gesamtzahl aller Badges. Also auch den offenen Beiträgen aus Menüpunkt zwei, drei und vier. Die anderen im Template angegebenen Menüpunkte zeigen kein Badge.


    Hast du die Funktion vielleicht auch in der aktuellen Version in Betrieb und musste hier eine Änderung vorgenommen werden? Bzw hast du eine Idee, an was es liegen könnte?

  • Hallo,


    leider gehört dieses Benutzerkonto nicht mehr dem eigentlichen Benutzer und wurde an mich Sunny C. verkauft.

    Leider kann ich Name, Avatar und einige andere Funktionen in diesem Benutzerkonto nicht ändern. Ich habe mehrfach WoltLab darum gebeten hier Abhilfe zu schaffen, aber es wird immer wieder behauptet ich könnte alles, außer den Benutzernamen ändern, was aktuell nicht stimmt.


    Ich kann dir dabei leider nicht helfen und entschuldige diese Verwirrung.

    Mit freundlichen Grüßen

    Sunny Cuewitzki

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!