Notification Badges in eigenen Menü einbinden

Belarus · May 6th 2020

Hallo,

wie schon bereits im Forum "Kunden helfen Kunden" im Thema "MegaMenu" angesprochen, möchte ich ein gleiches für die Woltlab Suite verwirklichen. Da dieses jedoch im alten Beitrag mehr und mehr vom eigentlichen Thema zur Designerstellung abweicht, erstelle ich hiermit an dieser Stelle ein neues Thema.

Zur Verwendung eines MegaMenüs griff ich auf das RubyMegaMenu (Siehe Quellcode bei Codepen.io) zurück, welches bisher auch in das Woltlab eigene Menü mit intrigiert werden konnte.


Mega-Menü - Screenshot #1	Mega-Menü - Screenshot #2

Wie auf dem Screenshot #1 zu erkennen ist, würde ich nun gerne die Funktion der Notification Badges bei neuen Einträgen hinter der Überschriften einfügen. Der auf dem ersten Screenshot hinter Forum zu sehende Badge ist lediglich manuell per CSS eingefügt worden um dieses hier zu demonstrieren, was gemeint ist (sprich: Ohne Funktion!). Das eine solche Umsetzung möglich ist, stet außer Frage, denn dazu hatte LRDE bereits erfolgreich experimentiert. Dieses habe ich Versuchsweise ins MegaMenu Template mit aufgenommen, welches nun so aussieht:

Smarty

{hascontent}
  {content}
          
  <li class="active-menu-item">
    <div class="grid grid-lined">
      <div class="row">
        <div class="col-3">
          <h3 class="list-heading"></h3>
          <ul>
            <li><img src="https://cdn.pixabay.com/photo/2014/07/08/10/47/team-386673__340.jpg" style="width: 160px; height: 160px;"></li>
          </ul>
        </div>

        {foreach
          from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
          item=menuItemNode}
          {if $menuItemNode->getOutstandingItems() > 0}
          {if $menuItemNode->identifier === 'com.woltlab.wbb.BoardList'}
        <div class="col-3">
          <h3 class="list-heading">
            <i class="fa fa-comments" aria-hidden="true"></i> 
            <a href="{link controller='UnreadThreadList' application='wbb'}{/link}">Forum</a> 
            <a href="{link controller='UnreadThreadList' application='wbb'}{/link}">
              <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                {#$menuItemNode->getOutstandingItems()}
              </span>
            </a>
          </h3>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Ungelesene Beiträge</a></li>
            <li><a href="#">Unenerledigte Themen</a></li>
            <li><a href="#">Abbonierte Foren</a></li>
            <li><a href="#">Abbonierte Themen</a></li>
            <li><a href="#">Meine Themen</a></li>
          </ul>
        </div>
        {elseif $menuItemNode->identifier === 'com.woltlab.blog.BlogList'}
        <div class="col-3">
          <h3 class="list-heading">
            <i class="fa fa-pencil" aria-hidden="true"></i> 
            <a href="{link controller='UnreadEntryList' application='blog'}{/link}">Blog</a> 
            <a href="{link controller='UnreadEntryList' application='blog'}{/link}">
              <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                {#$menuItemNode->getOutstandingItems()}
              </span>
            </a>
          </h3>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Ungelesene Artikel</a></li>
            <li><a href="#">Abonnierte Artikel</a></li>
            <li><a href="#">Mein Blog</a></li>
            <li><a href="#">Meine Artikel</a></li>
          </ul>
        </div>
        {elseif $menuItemNode->identifier === 'com.woltlab.gallery.Gallery'}
        <div class="col-3">
          <h3 class="list-heading">
            <i class="fa fa-picture-o" aria-hidden="true"></i>
            <a href="{link controller='UnreadImageList' application='gallery'}{/link}">Galerie</a> 
            <a href="{link controller='UnreadImageList' application='gallery'}{/link}">
              <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                {#$menuItemNode->getOutstandingItems()}
              </span>
            </a>
          </h3>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Neue Bilder</a></li>
            <li><a href="#">Meine Alben</a></li>
            <li><a href="#">Meine Bilder</a></li>
            <li><a href="#">Meine Videos</a></li>
          </ul>
        </div>
        {elseif $menuItemNode->identifier === 'com.woltlab.filebase.FileList'}
        <div class="col-3">
          <h3 class="list-heading">
            <i class="fa fa-download" aria-hidden="true"></i>
            <a href="{link controller='UnreadFileList' application='filebase'}{/link}">Downloads</a> 
            <a href="{link controller='UnreadFileList' application='filebase'}{/link}">
              <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                {#$menuItemNode->getOutstandingItems()}
              </span>
            </a>
          </h3>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Neue Downloads</a></li>
            <li><a href="#">Abonnierte Dateien</a></li>
            <li><a href="#">Meine Dateien</a></li>
          </ul>
        </div>
        <div class="col-3">
          <h3 class="list-heading">
            <i class="fa fa-shopping-bag" aria-hidden="true"></i> Marktplatz
          </h3>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Neusten Einträge</a></li>
            <li><a href="#">Abonnierte Einträge</a></li>
            <li><a href="#">Meine Einträge</a></li>
            <li><a href="#">Neuer Eintrag</a></li>
          </ul>
        </div>
        {elseif $menuItemNode->identifier === 'com.woltlab.calendar.Calendar'}
        <div class="col-3">
          <h3 class="list-heading">
            <i class="fa fa-calendar" aria-hidden="true"></i>
            <a href="{link controller='UnreadEventList' application='calendar'}{/link}">Kalender</a> 
            <a href="{link controller='UnreadEventList' application='calendar'}{/link}">
              <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                {#$menuItemNode->getOutstandingItems()}
              </span>
            </a>
          </h3>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Neue Termine</a></li>
            <li><a href="#">Teilnahmen</a></li>
          </ul>
        </div>
        <div class="col-3">
          <h3 class="list-heading">
            <i class="fa fa-users" aria-hidden="true"></i> Mitglieder
          </h3>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Neusten Mitglieder</a></li>
            <li><a href="#">Aktivsten Mitglieder</a></li>
            <li><a href="#">Mitgliedersuche</a></li>
          </ul>
        </div>
      </div>
      {/if}
      {/if}
      {/foreach}
      {/content}
      {/hascontent}
      <span class="dropdown-toggle"></span></li>
    </ul>     
  </div>

  </div>
  <span class="dropdown-toggle"></span>
</li>

Display More

Jedoch bringt mir dieses nicht den gewünschten Erfolg, sondern zeigt schlicht weg rein gar nichts mehr innerhalb des aufklappenden MegaMenüs an. Somit die Frage woran das liegt und wie diesen Abhilfe geschaffen werden kann. Ich würde mich über jegliche Hilfe freuen - Danke dafür vorab!

Gruss,
Andreas

LRDE · May 6th 2020

Der Code von mir ist noch immer aktiv als meine Willkommensbox. Er wird allerdings nur ausgegeben wenn wirklich etwas da ist. Ansonsten wird es ausgeblendet. Und nur die Begrüßung bzw die Statistik bleibt stehen.

Belarus · May 6th 2020

Quote from LRDE

Er wird allerdings nur ausgegeben wenn wirklich etwas da ist. Ansonsten wird es ausgeblendet.

Das ist schon klar und diesbzgl. wurden auch Testbeiträge verfasst um dieses zu überprüfen

Quote from LRDE

Und nur die Begrüßung bzw die Statistik bleibt stehen.

Diese sind in meinen Code nicht übernommen worden, sondern lediglich der andere Part mit den Badges selbst.

Seltsam ist nur, dass je nach dem an welcher Stelle ich mit foreach beginne, entweder rein gar nichts im DropDown (ul des MegaMenüs) angezeigt wird, oder nur die H2-Überschrift mit Badge, nur letzteres ohne Funktion (nicht verlinkt). Und noch seltsamer ist, dass alle weiteren eingefügten Links (hardcoded), sowie alle anderen Parts wie Blog, Downloads, etc. (siehe Screenshots) schlicht weg verschluckt werden und nicht mehr angezeigt werden. So macht es mir den Anschein, dass durch die Abfrage from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu') auch Klassen übergeben werden, welches mein erstelltes Layout verhunsen.

Das eigentliche Woltlab-DropDown-Menü mit Forum, Blog, Filebase, etc., welches zuvor als Menüpunkt "Community" aufgenommen wurde und auf .box [data-identifier="com.woltlab.wcf.generic66"] reagiert, habe ich per CSS mit display: none; ausgeblendet. Dies sollte jedoch meines Erachtens kein Problem darstellen, da es lediglich per CSS ausgeblendet aber nicht deaktiviert wurde, so dass es prinzipiell dennoch vorhanden ist und somit auch die gewünschten Abfragen ausgelesen werden können. Asche auf mein Haupt, wenn dem nicht so ist

Was ich mir jedoch vorstellen könnte, dass es schlicht an den [data-identifier="com.woltlab.wcf.###"] liegt, da die Abfrage zwar darin stattfindet, jedoch aber der per CSS ausgeblendete Menüpunkt in welchen sich die Punkte Forum, Blog, etc. befinden (und damit auch die Badges) auf .box [data-identifier="com.woltlab.wcf.generic66"] reagiert. Ersetze ich dieses aber bekomme ich einen FatalError, welches auch anzunehmen war. Die Angelegenheit wird von mal zu mal interessanter und das besonders weil es Testweise mit Deinen Code in einer Box funktioniert und somit interessant woran es liegt und noch mehr, wie es zu bewerkstelligen ist, dass dies auch in diesem MegaMenü funktionieren wird.

Gruss,
Andreas

LRDE · May 6th 2020

So weit bin ich in der Materie nicht drinnen, es wurde mir damals nur gesagt, dass die Daten aus dem Hauptmenü abgefragt werden....

Belarus · May 6th 2020

Quote from LRDE

So weit bin ich in der Materie nicht drinnen

Glaubst Du ich bin das?
Ich kenne mich in so weit mit den Abfragen des Woltlab eigenen Menüs genau so wenig aus, aber wenn man auf etwas fixiert ist, wie ich auf so einen MegaMenu, dann lässt mir das einfach keine Ruhe.

Gruss,
Andreas

TitusKirch · May 6th 2020

Sowas ist definitiv möglich, nutze es selbst für meinen Blog, aber es ist mit einem hohen Aufwand verbunden (jdf. wie ich es gelöst habe). Allerdings habe ich schon ein Konzept für eine Megamenü-Erweiterung, die sich komplett über das ACP steuern lässt (sprich das man kein Template-Code bearbeiten muss). Wann ich diese jedoch umsetze, kann ich nicht sagen, da (wg. dem nicht so großen Interesse) derzeit andere neue Erweiterungen bei mir Vorrang haben.

Belarus · May 6th 2020

Hallo Titus,
wir hatten ja schon das Vergnügen miteinander zu sprechen und werde, wie bereits mitgeteilt, auf Deine Lösung zurück kommen. Was jedoch meinen Projekt anbelangt (zumindest in diesen Teil davon), würde ich jedoch ein solches, wie von mir dargestellten MegaMenu, verwenden wollen (siehe Screenshots). Natürlich wird eine Umsetzung eines solchen MegaMenüs immer Vor- und Nachteile mit sich bringen und das gleichermaßen für welche Art und Weise der Umsetzung man sich letztlich entscheidet. Mir persönlich würde die bisherige Umsetzung jedoch reichen, da:

Alle Links ohnehin nicht verändert werden müssten und somit statisch ausreichend wären.
Das MegaMenu stets erweitert werden könnte
(z.B. mit Tabs, Grids, Kontaktform, ...)
Dies ohne großen Aufwand umsetzbar wäre
(Template anlegen, editieren, includieren, fertig!)
Und insofern das letzte Problemchen gelöst ist, dies hier auch anderen frei zur Verfügung stehen würde.
(Dies wäre zwar dann kein Hochgekröntes MegaMenu als Plugin mit allen Komfort, aber eine schnelle Abhilfe)

Zum eigentlichen Thema

Entsprechend dem o.g. Wunsch bei dem bisherigen MegaMenu zu bleiben, werde ich weiter mein Glück versuchen die Badges hinter den genannten H2-Überschriften zu bekommen, denn das wäre letztlich auch das einzige was noch fehlt und zu ergänzen ist. Bisher gibt es jedoch einen kleinen Hoffnungsschimmer, denn so wie LRDE schon schrieb, erfolgt die Ausgabe nur dann, wenn auch wirklich Beiträge existieren. Das war auch bereits zuvor Verständlich, jedoch wurde dies durch ein kleinen Flüchtigkeitsfehler meinerseits nicht ausgegeben. Der Übeltäter ist hier das {if}, welches letztlich besagt, dass wenn etwas besteht, dass dieses dann ausgegeben wird. Problem dabei ist, dass in dieser if-Schleife auch die statischen Links liegen, welche umgangen werden müssten. Ein umgehen mit {foreach} ... an jener Stelle wie z.B. Forum, Blog, etc. führt jedoch zu einen FatalError, so dass mir dieses an dieser Stelle noch ein wenig Kopfschmerzen bereitet. Aber aufgeben werde ich dennoch nicht

Gruss,
Andreas

Belarus · May 7th 2020

Wo ein Wille ist, da ist auch ein geschehen! E voilà ...

Wie zu erkennen funktioniert nun das einbinden der Notification-Badges bei neuen Beiträgen/Einträgen und das, ohne wie zuvor genannt wurde, dass weitere Links unterhalb der H2-Überschrift verschluckt werden. Was jetzt noch fehlt ist die Gesamtzahl im eigentlichen Hauptmenü und dann wäre das Thema beendet und damit auch das Thema zum MegaMenü

Damit sich andere aber auch ein Bild davon machen können, hier der Quellcode dazu:

Smarty

          <li class="active-menu-item">
            <div class="grid grid-lined">
              <div class="row">
                <!-- Infobild links oben -->
                <div class="col-3">
                  <h3 class="list-heading"></h3>
                  <ul>
                    <li><img src="https://cdn.pixabay.com/photo/2014/07/08/10/47/team-386673__340.jpg" style="width: 160px; height: 160px;"></li>
                  </ul>
                </div>
                <!-- Block: Forum -->
                <div class="col-3">
                  <h3 class="list-heading">
                    <i class="fa fa-comments" aria-hidden="true"></i>
                    Forum 
                    {foreach
                      from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
                      item=menuItemNode}
                      {if $menuItemNode->getOutstandingItems() > 0}
                        {if $menuItemNode->identifier === 'com.woltlab.wbb.BoardList'}
                        <a href="{link controller='UnreadThreadList' application='wbb'}{/link}">
                          <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                            {#$menuItemNode->getOutstandingItems()}
                          </span>
                        </a>
                        {/if}
                      {/if}
                    {/foreach}
                  </h3>
                  <ul>
                    <li><a href="#">Übersicht</a></li>
                    <li><a href="#">Ungelesene Beiträge</a></li>
                    <li><a href="#">Unenerledigte Themen</a></li>
                    <li><a href="#">Abbonierte Foren</a></li>
                    <li><a href="#">Abbonierte Themen</a></li>
                    <li><a href="#">Meine Themen</a></li>
                  </ul>
                </div>
                <!-- Block: Blog -->
                <div class="col-3">
                  <h3 class="list-heading">
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                    Blog
                    {foreach
                      from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
                      item=menuItemNode}
                      {if $menuItemNode->getOutstandingItems() > 0}
                        {if $menuItemNode->identifier === 'com.woltlab.blog.BlogList'}
                        <a href="{link controller='UnreadEntryList' application='blog'}{/link}">
                          <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                            {#$menuItemNode->getOutstandingItems()}
                          </span>
                        </a>
                        {/if}
                      {/if}
                    {/foreach}
                  </h3>
                  <ul>
                    <li><a href="#">Übersicht</a></li>
                    <li><a href="#">Ungelesene Artikel</a></li>
                    <li><a href="#">Abonnierte Artikel</a></li>
                    <li><a href="#">Mein Blog</a></li>
                    <li><a href="#">Meine Artikel</a></li>
                  </ul>
                </div>
                <!-- Block: Gallery -->
                <div class="col-3">
                  <h3 class="list-heading">
                    <i class="fa fa-picture-o" aria-hidden="true"></i>
                    Galerie
                    {foreach
                      from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
                      item=menuItemNode}
                      {if $menuItemNode->getOutstandingItems() > 0}
                        {if $menuItemNode->identifier === 'com.woltlab.gallery.Gallery'}
                        <a href="{link controller='UnreadImageList' application='gallery'}{/link}">
                          <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                            {#$menuItemNode->getOutstandingItems()}
                          </span>
                        </a>
                        {/if}
                      {/if}
                    {/foreach}
                  </h3>
                  <ul>
                    <li><a href="#">Übersicht</a></li>
                    <li><a href="#">Neue Bilder</a></li>
                    <li><a href="#">Meine Alben</a></li>
                    <li><a href="#">Meine Bilder</a></li>
                    <li><a href="#">Meine Videos</a></li>
                  </ul>
                </div>
                <!-- Block: Filebase / Downloads -->
                <div class="col-3">
                  <h3 class="list-heading">
                    <i class="fa fa-download" aria-hidden="true"></i>
                    Downloads
                    {foreach
                      from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
                      item=menuItemNode}
                      {if $menuItemNode->getOutstandingItems() > 0}
                        {if $menuItemNode->identifier === 'com.woltlab.filebase.FileList'}
                        <a href="{link controller='UnreadFileList' application='filebase'}{/link}">
                          <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                            {#$menuItemNode->getOutstandingItems()}
                          </span>
                        </a>
                        {/if}
                      {/if}
                    {/foreach}
                  </h3>
                  <ul>
                    <li><a href="#">Übersicht</a></li>
                    <li><a href="#">Neue Downloads</a></li>
                    <li><a href="#">Abonnierte Dateien</a></li>
                    <li><a href="#">Meine Dateien</a></li>
                  </ul>
                </div>
                <!-- Block: Markplatz -->
                <div class="col-3">
                  <h3 class="list-heading">
                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                    Marktplatz
                    {foreach
                      from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
                      item=menuItemNode}
                      {if $menuItemNode->getOutstandingItems() > 0}
                        {if $menuItemNode->identifier === 'com.viecode.marketplace.Marketplace'}
                        <a href="{link controller='EntryList' application='marketplace'}{/link}">
                          <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                            {#$menuItemNode->getOutstandingItems()}
                          </span>
                        </a>
                        {/if}
                      {/if}
                    {/foreach}
                  </h3>
                  <ul>
                    <li><a href="#">Übersicht</a></li>
                    <li><a href="#">Neusten Einträge</a></li>
                    <li><a href="#">Abonnierte Einträge</a></li>
                    <li><a href="#">Meine Einträge</a></li>
                    <li><a href="#">Neuer Eintrag</a></li>
                  </ul>
                </div>
                <!-- Block: Kalender -->
                <div class="col-3">
                  <h3 class="list-heading">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                    Kalender
                    {foreach
                      from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
                      item=menuItemNode}
                      {if $menuItemNode->getOutstandingItems() > 0}
                        {if $menuItemNode->identifier === 'com.woltlab.calendar.Calendar'}
                        <a href="{link controller='UnreadEventList' application='calendar'}{/link}">
                          <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
                            {#$menuItemNode->getOutstandingItems()}
                          </span>
                        </a>
                        {/if}
                      {/if}
                    {/foreach}
                  </h3>
                  <ul>
                    <li><a href="#">Übersicht</a></li>
                    <li><a href="#">Neue Termine</a></li>
                    <li><a href="#">Teilnahmen</a></li>
                  </ul>
                </div>
                <!-- Block: Mitglieder -->
                <div class="col-3">
                  <h3 class="list-heading">
                    <i class="fa fa-users" aria-hidden="true"></i>
                    Mitglieder
                  </h3>
                  <ul>
                    <li><a href="#">Übersicht</a></li>
                    <li><a href="#">Neusten Mitglieder</a></li>
                    <li><a href="#">Aktivsten Mitglieder</a></li>
                    <li><a href="#">Mitgliedersuche</a></li>
                  </ul>
                </div>
              </div>
              <span class="dropdown-toggle"></span></li>
            </ul>     
          </div>
        </div>
      <span class="dropdown-toggle"></span>
    </li>

Display More

Hinweis: Da es sich wie bereits im ersten Beitrag genannt um das RubyMegaMenü handelt welches einer Non-Free-Lizenz unterliegt, kann/werde ich hier keinen vollständigen Code veröffentlichen. Jedoch kann das RubyMegaMenü bei Codecanyon erworben oder bei Codepen.io eingesehen werden.

LRDE
Wie ich in einen anderen Beitrag von Dir lesen konnte, warst Du auf der Suche nach der Möglichkeit auch den Markplatz mit in Deinen Menü unterzubringen. Diesbezgl. wäre dieses mit folgenden möglich ...

Smarty

{foreach
  from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()
  item=menuItemNode}
  {if $menuItemNode->getOutstandingItems() > 0}
    {if $menuItemNode->identifier === 'com.viecode.marketplace.Marketplace'}
      <a href="{link controller='EntryList' application='marketplace'}{/link}">
        <span class="boxMenuLinkOutstandingItems badge badgeUpdate">
          {#$menuItemNode->getOutstandingItems()}
        </span>
      </a>
    {/if}
  {/if}
{/foreach}

Display More

Dazu müsstest Du nur den Link-Part entsprechend Deinen anpassen, welches aber nicht das Problem sein dürfte

Im ist im übrigen auch mit folgenden Code und dem Lexikon möglich ...

Smarty

{foreach  
  from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()  
  item=menuItemNode}  
  {if $menuItemNode->getOutstandingItems() > 0}    
    {if $menuItemNode->identifier === 'com.viecode.lexicon.Lexicon'}      
      <a href="{link controller='EntryList' application='lexicon'}{/link}">        
        <span class="boxMenuLinkOutstandingItems badge badgeUpdate">          
          {#$menuItemNode->getOutstandingItems()}        
        </span>      
      </a>    
    {/if}  
  {/if}
{/foreach}

Display More

Gruss,
Andreas

LRDE · May 7th 2020

Wie sieht das Ganze am Handy aus?

Belarus · May 7th 2020

Quote from LRDE

Wie sieht das Ganze am Handy aus?

Dazu kurz vorab ein paar Worte um Missverständnisse zu vermeiden. Ein solches MegaMenü, wie u.a. das von mir eingesetzte RubyMegaMenü, macht natürlich nur in der Desktop-Ansicht wirklichen Sinn. Diesbezgl. wird das MegaMenü auch nur in der Desktop-Ansicht angezeigt. Im mobilen Modus wird dann das herkömmliche Woltlab-Menü angezeigt. Um jedoch die Notificationen (Badges) auch ins MegaMenü zu übernehmen, ist es notwendig die entsprechenden Menüpunkte (z.B. zum Forum, Blog, etc.) auch im ACP anzulegen. Diese dürfen dabei nicht deaktiviert werden, da andernfalls die Notifications zu z.B. neuen Beiträgen/Einträgen auch nicht ausgelesen werden können. Da genau diese Menüeinträge (z.B. Forum, Blog, etc.) jedoch im MegaMenü unterkommen sollten, würden diese dann letztlich zwei mal in der Navigation bestehen. Um dieses zu umgehen wurden die originalen Menüeinträge, welche im ACP festgelegt wurden, in der Desktop-Ansicht per CSS ausgeblendet und das MegaMenü eingeblendet. In der mobilen Ansicht dann genau anders herum, so dass dann das MegaMenü ausgeblendet und der Menüpunkt des Standard-Menüs eingeblendet wurde. Um das ganze mal Bildlich darzustellen, im nachfolgenden ein paar Screenshots dazu ...

Dieses hier gezeigte Hauptmenü ist das gleiche wie in einer jenen Woltlab Suite. Mit nur einen Unterschied, dass hier zwei Menüpunkte ("Sehenswürdigkeiten" und "Community"), welches das MegaMenü darstellen, an dem eigentlichen Woltlab-Menü angehangen wurden. Dadurch, dass die Notificationen (Badges) im MegaMenü realisiert werden sollten, gibt es wie zu erkennen zwei Einträge Namens: "Community". Der erstere ausgeklappte dabei ist der Standardgemäße Menüpunkt, welcher über das ACP erstellt wurde und der letztere der des MegaMenüs. Da aus dem ersten jedoch die Notificationen (Badges) ausgelesen werden sollen, darf dieser nicht im ACP deaktiviert werden, sondern sollte per CSS einfach ausgeblendet werden. Dies geschieht mit folgenden Code:

Code

@media screen and (min-width: 1025px) {
.box [data-identifier="com.woltlab.wcf.genericXXX"] {
  display: none;
  }
}*/

Das XXX ist mit der jeweiligen eigenen Nummer zu ersetzen und würde den, wie bei meinen Beispiel, den ersten aufgeklappten Menüpunkt "Community" schlicht weg im Desktop-Modus ausblenden, welches dann so aussehen würde:

Mit den Template-Codes aus meinem vorherigen Beitrag, wurden dann die Notificationen (Badges) im MegaMenü übernommen und können so auch ausgelesen werden. Dies, da das eigentliche Menü per CSS zwar ausgeblendet wurde, aber zu guter letzt dennoch aktiv ist (nicht deaktiviert wurde) und somit sich auch die Notifications (Badges) entsprechend auslesen lassen. Siehe wie folgt:

Verkleinere ich nun das Fenster oder schalte im Browser auf die mobile Ansicht um, sieht das ganze nun so aus:

Wie zu erkennen wird in der mobilen Ansicht alles wie in der Standard-Suite Navigation angezeigt. Der einzige Unterschied ist, dass (wie o.g.) der Menüpunkt "Community" letztlich nur zwischen den Ansichten getauscht wird. Sprich in der Desktop-Ansicht das MegaMenü und das Standard ausgeblendet und in der mobilen Ansicht, das Standard eingeblendet und das MegaMenü ausgeblendet wird. Somit letztlich nur eine Sache von CSS

Das einzige was ich bisher noch vergessen habe ist, dass ich noch ein Menüpunkt "Sehenswürdigkeiten" im ACP anlegen und im Desktop-Modus ausblenden müsste, so dass auch dieser im mobilen Modus erreichbar sein wird.

Was noch fehlt ist jetzt die Gesamtanzahl der Notificationen innerhalb des MegaMenüs in der Hauptnavigation oben, so dass wenn es z.B. 2 Foreneinträge und ein Marktplatz-Eintrag gibt, dass oben in der Navigation eben auch eine [3] neben dem Menüeintrag erscheint. Wenn auch dies erledigt ist, dann ist das Thema MegaMenü für mich erledigt und kann dieses somit dann auch von der Dev-Suite in das eigentliche Projekt übernehmen

Gruss,
Andreas

Belarus · May 7th 2020

Kleiner Nachtrag ...

Der in meinen vorherigen Beitrag erwähnte Code zum abrufen der Notificationen (Badges) zu neuen Lexikon-Einträge würde geprüft und funktioniert genauso wie auch alle anderen zuvor. Entsprechend dessen wurde auch der vorherige Beitrag von mir editiert. Hier noch einmal der Code um die Notificationen aus dem Lexikon abzurufen.

Smarty

{foreach  
  from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.MainMenu')->getMenu()->getMenuItemNodeList()  
  item=menuItemNode}  
  {if $menuItemNode->getOutstandingItems() > 0}    
    {if $menuItemNode->identifier === 'com.viecode.lexicon.Lexicon'}      
      <a href="{link controller='EntryList' application='lexicon'}{/link}">        
        <span class="boxMenuLinkOutstandingItems badge badgeUpdate">          
          {#$menuItemNode->getOutstandingItems()}        
        </span>      
      </a>    
    {/if}  
  {/if}
{/foreach}

Display More

Um solche Daten abzufragen, benötigt es den Identifier und die Link Application, welches wie im obigen Beispiel zum Lexikon wäre:

$menuItemNode->identifier === 'com.viecode.lexicon.Lexicon, sowie {link controller='EntryList' application='lexicon'}{/link}

Solche Informationen lassen sich natürlich auch für alle anderen Endanwendungen herausfinden. Dafür hier eine kurze Anleitung:

Download des Originale Plugin-Paket (hier als Beispiel das Lexikon) und anschließendes entpacken des .tar.gz Archivs
Nach dem öffnen des entpackten Ordners (hier: "com.viecode.lexicon") sieht es dann so aus:
Folglich können in den Dateien menuItem.xml, sowie der page.xml die entsprechenden Informationen gefunden werden:
com.viecode.lexicon.Lexicon und EntryList
Diese Informationen sind anschließend im o.g. Code an entsprechender Stelle mit den eigenen zu ersetzen
3.1 Datei: menuItem.xml
Zu finden: com.viecode.lexicon.Lexicon
Ersetzen mit: $menuItemNode->identifier === 'XXXXXXXXXX'
3.2 Datei: page.xml
Zu finden: EntryList
Ersetzen mit: {link controller='XXXXXXXXXX' application='lexicon'}{/link}

Hinweis: Die Bezeichnungen können ggfls. von den jeweiligen Entwickler abweichen!

Insofern mir weitere Möglichkeiten zur Abfrage diverser Notificationen (Badges) zu den Menüeinträgen bekannt werden, so werde ich diese hier entsprechend mit aufführen. Sollte jemand abseits von mir solches bekannt sein, so bitte immer her damit

Gruss,
Andreas

LRDE · May 7th 2020

Für das Schaufenster von Udo braucht man ein zusätzliches Plugin.

Belarus · May 7th 2020

Quote from LRDE

Für das Schaufenster von Udo braucht man ein zusätzliches Plugin.

Korrekt! Dafür wird das Plugin com.uz.show.unread.tar von UdoZ benötigt, welches u.a. auch in diesem von Dir eröffneten Thema zu finden ist. Vorausgesetzt dafür ist natürlich, dass der/diejenige(r) auch das Schaufenster-Plugin von UdoZ installiert hat

Das bei mir installierte Schaufenster ist bei mir ebenfalls installiert und bedarf letztlich auch nur noch den Feinschliff, dass auch dort je nach Kategorie, die neusten beiträge als Notification (Badge) angezeigt werden. Jedoch wird das, nach den vorherigen Hürden, auch kein Problem mehr darstellen.

Im übrigen habe ich den vorherigen Beitrag noch einmal editiert und genau aufgeführt, wie und wo solche Informationen zum Abrufen der Notificiationen (Badges) für die jeweilige Endanwendung gefunden werden kann. Vielleicht kann der ein oder andere damit etwas geholfen werden.

Gruss,
Andreas

Notification Badges in eigenen Menü einbinden

Participate now!

Share

Similar Threads

Megamenü

Tags