Help

Questions & Answers

flaxoiu
I'm new here
โ€Ž02-05-2017 05:50 AM

Breadcrumb-Navigation mit Unternavigation wenn Unterordner existieren

Hallo Zusammen,

ich habe derzeit ein paar Schwierigkeiten eine Breadcrumb-Navigation mit der FirstSpirit-Navigationsfunktion abzubilden.

Mein Problem ist folgendes:

Die Navigation soll eine Art Breadcrumb sein, in welcher der Pfad zum aktiven Element angezeigt wird. Das ist kein Problem.

Das Problem sind jedoch die Submenรผs die auch mit angebunden werden sollen.

Beispiel:

Home --> Immobilien verkaufen --> Erfolg --> Vertriebsnetzwerk

Hier soll darรผber hinaus bei "Immobilien verkaufen" und "Erfolg" alle Elemente der darunterliegenden Navigationsstruktur abbilden.

Ich bekomm das irgendwie nicht hin.

HTML-Code soll dann am Ende so aussehen:

                     <ul>

                            <li class="expand">

                                <a href="#">Immobilien verkaufen</a>

                                <ul>

                                    <li><a href="#">Erfolg</a></li>

                                    <li><a href="#">Sicherheit</a></li>

                                    <li><a href="#">Komfort</a></li>

                                </ul>

                            </li>

                            <li class="expand">

                                <a href="#">Erfolg</a>

                                <span class="arrow"></span>

                                <ul>

                                    <li><a href="#">Unser Service</a></li>

                                    <li><a href="#">Vertriebsnetzwerk</a></li>

                                    <li><a href="#">Kรคuferfinder</a></li>

                                </ul>

                            < /li>

                            <li class="active">

                                <a href="#">Vertriebsnetzwerk</a>

                            </li>

                        </ul>

</ul>

Uns soweit bin ich bisher gekommen...

5384_pastedImage_7.png

Ziel:

5383_pastedImage_4.png

Danke

Florian

0 Kudos
7 Replies
marza
I'm new here
โ€Ž02-10-2017 05:59 AM

Hallo Florian,

hilft Dir nicht dieser Beitrag in der Community weiter?

GrรผรŸe Marian

0 Kudos
mbergmann
Crownpeak employee
Crownpeak employee
โ€Ž02-10-2017 04:58 PM

Hallo Florian,

sollen bei den einzelnen Punkten wirklich nochmal deren Unterpunkte dargestellt werden, also dadurch z.b. "Erfolg" zwei Mal auftauchen? Ich kenne es eher so, dass bei solchen aufklappenden Breadcrumbs jeweils die Nachbarseiten aufklappen - alles andere fรคnde ich persรถnlich verwirrend ๐Ÿ˜‰

Wie auch immer, ich wรผrde ja denken dass Du mit der expansionVisibility="standard" schonmal nรคher an dem wรคrst was รผberhaupt dargestellt werden soll (bzw. es wรผrde genau passen).

Dein Problem besteht letztlich darin, dass FirstSpirit die Elemente fรผr Deinen Fall in der "falschen" Reihenfolge ausgibt. FirstSpirit lรคuft quasi erst in den Baum rein (gibt also zwischendurch die Kinder aus) - macht somit eine sog. Tiefensuche. Du brรคuchtest zwar letztlich dieselben Elemente, aber von der Codereihenfolge her ebenenweise (=Breitensuche).

Du kรถnntest natรผrlich einfach z.B. purepath nehmen und dann pro Element selber die Logik zur Darstellung der Unterseiten bauen, mรผsstest aber dann die Abfragen wie "im Menรผ anzeigen" selbst nachbauen. Fรคnde ich irgendwie unschรถn.

Eine Alternative ist, dass die Navigationsfunktion selbst nur eine Datenstruktur aufbaut (Liste in Liste). Die รคuรŸere Liste wรผrde dann die Ebenen darstellen, die inneren Elemente die Eintrรคge dieser Ebene. D.h. in der Navigationsfunktion wรผrden letztlich nur $CMS_SET(...)$ stehen, รผber die eine "vorher" im Template initialisierte (die รคuรŸere) Liste gefรผllt wird. Wichtig zu wissen ist hierbei, dass die Navigationsfunktion erst ausgewertet wird, wenn darauf zugegriffen wird z.B. mit $CMS_VALUE(...)$ oder - wenn Du die Ausgabe (insb. Leerzeilen) unterdrรผcken willst - mit $CMS_SET(void,fr_breadcrumb_menu.toString())$. Darum kannst Du darin auf eine Variable (=die รคuรŸere Liste) zugreifen, die "nach" der Navigatonsfunktion-Definition, aber vor deren Aufruf initialisiert wird.

Die eigentliche Ausgabe wรผrde dann im Template mit einer erneuten Iteration รผber die dann von der Navigationsfunktionen gefรผllten Liste passieren.

Viele GrรผรŸe

Michael

0 Kudos
mikula
Crownpeak employee
Crownpeak employee
In response to mbergmann
โ€Ž02-16-2017 02:37 AM

Hallo Florian,

benรถtigst Du noch weitere Hilfe oder hat Dir die Antwort von Michael bereits geholfen? In diesem Fall wรคre es super, wenn Du die "richtige Antwort" entsprechend markierst, damit auch andere Community-Teilnehmer diese auf den ersten Blick finden. Solltest Du zwischenzeitlich eine eigene Lรถsung gefunden haben, wรคre es nett, wenn Du diese hier bereit stellst.

Viele GrรผรŸe,

Martin

0 Kudos
flaxoiu
I'm new here
In response to mikula
โ€Ž02-22-2017 02:34 PM

Vielen Dank fรผr den Tipp. Hatte mir jetzt vorรผbergehend mit mehreren Navigationsfunktionen beholfen, was aber irgendwie auch unschรถn wirkt und ziemlich schlecht lesbar wirkt

0 Kudos
flaxoiu
I'm new here
โ€Ž02-22-2017 02:36 PM

<CMS_HEADER>

  <CMS_FUNCTION name="Navigation" resultname="fr_breadcrumb_menu">

  <CMS_PARAM name="expansionVisibility" value="standard"/>

  <CMS_PARAM name="wholePathSelected" value="1"/>

  <CMS_PARAM name="suppressEmptyFolders" value="1" />

    

     <CMS_ARRAY_PARAM name="innerBeginHTML">

        <CMS_ARRAY_ELEMENT index="0"><![CDATA[<ul>]]></CMS_ARRAY_ELEMENT>

        <CMS_ARRAY_ELEMENT index="1"><![CDATA[<li>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

    

     <CMS_ARRAY_PARAM name="beginHTML">

      <CMS_ARRAY_ELEMENT index="0"><![CDATA[<li class="expand">]]></CMS_ARRAY_ELEMENT>

      <CMS_ARRAY_ELEMENT index="1"><![CDATA[<li>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

   

     <CMS_ARRAY_PARAM name="unselectedHTML">

      <CMS_ARRAY_ELEMENT index="0"><![CDATA[$CMS_IF(#nav.selected)$<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a>$CMS_IF(#nav.hasSubFolders)$<span class="arrow"></span>$CMS_END_IF$$CMS_END_IF$]]></CMS_ARRAY_ELEMENT>

      <CMS_ARRAY_ELEMENT index="1"><![CDATA[<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

    

     <CMS_ARRAY_PARAM name="selectedHTML">

      <CMS_ARRAY_ELEMENT index="0"><![CDATA[<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a>$CMS_IF(#nav.hasSubFolders)$<span class="arrow"></span>$CMS_END_IF$]]></CMS_ARRAY_ELEMENT>

      <CMS_ARRAY_ELEMENT index="1"><![CDATA[<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

    

     <CMS_ARRAY_PARAM name="endHTML">

      <CMS_ARRAY_ELEMENT index="0"><![CDATA[</li>]]></CMS_ARRAY_ELEMENT>

      <CMS_ARRAY_ELEMENT index="1"><![CDATA[</li>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

    

     <CMS_ARRAY_PARAM name="innerEndHTML">

      <CMS_ARRAY_ELEMENT index="0"><![CDATA[</ul>]]></CMS_ARRAY_ELEMENT>

    <CMS_ARRAY_ELEMENT index="1"><![CDATA[</li>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

 

  </CMS_FUNCTION>

  <CMS_FUNCTION name="Navigation" resultname="fr_breadcrumb_submenu">

  <CMS_PARAM name="expansionVisibility" value="standard"/>

  <CMS_PARAM name="wholePathSelected" value="1"/>

  <CMS_PARAM name="suppressEmptyFolders" value="1" />

    

     <CMS_ARRAY_PARAM name="innerBeginHTML">

        <CMS_ARRAY_ELEMENT index="1"><![CDATA[<ul>]]></CMS_ARRAY_ELEMENT>

        <CMS_ARRAY_ELEMENT index="2"><![CDATA[<li>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>   

   

     <CMS_ARRAY_PARAM name="beginHTML">

      <CMS_ARRAY_ELEMENT index="1"><![CDATA[<li class="expand$CMS_IF(#nav.selected && !#nav.hasSubFolders)$ active$CMS_END_IF$">]]></CMS_ARRAY_ELEMENT>

      <CMS_ARRAY_ELEMENT index="2"><![CDATA[<li>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

   

     <CMS_ARRAY_PARAM name="unselectedHTML">

      <CMS_ARRAY_ELEMENT index="1"><![CDATA[$CMS_IF(#nav.selected)$<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a>$CMS_IF(#nav.hasSubFolders)$<span class="arrow"></span>$CMS_END_IF$$CMS_END_IF$]]></CMS_ARRAY_ELEMENT>

      <CMS_ARRAY_ELEMENT index="2"><![CDATA[$CMS_IF(!#nav.selected)$<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a>$CMS_END_IF$]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

    

     <CMS_ARRAY_PARAM name="selectedHTML">

       <CMS_ARRAY_ELEMENT index="1"><![CDATA[$CMS_IF(#nav.selected)$<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a>$CMS_IF(#nav.hasSubFolders)$<span class="arrow"></span>$CMS_END_IF$$CMS_END_IF$]]></CMS_ARRAY_ELEMENT>

      <CMS_ARRAY_ELEMENT index="2"><![CDATA[$CMS_IF(!#nav.selected)$<a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a>$CMS_END_IF$]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

    

      <CMS_ARRAY_PARAM name="endHTML">

      <CMS_ARRAY_ELEMENT index="1"><![CDATA[</li>]]></CMS_ARRAY_ELEMENT>

      <CMS_ARRAY_ELEMENT index="2"><![CDATA[</li>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

    

     <CMS_ARRAY_PARAM name="innerEndHTML">

      <CMS_ARRAY_ELEMENT index="1"><![CDATA[</ul>]]></CMS_ARRAY_ELEMENT>

    <CMS_ARRAY_ELEMENT index="2"><![CDATA[</li>]]></CMS_ARRAY_ELEMENT>

     </CMS_ARRAY_PARAM>

 

  </CMS_FUNCTION>

  <CMS_FUNCTION name="Navigation" resultname="fr_breadcrumb_purepath">

  <CMS_PARAM name="expansionVisibility" value="purepath"/>

     <CMS_PARAM name="wholePathSelected" value="1"/>

       <CMS_PARAM name="suppressEmptyFolders" value="1" />

    

  <CMS_ARRAY_PARAM name="selectedHTML">

  <CMS_ARRAY_ELEMENT index="0"><![CDATA[$CMS_IF(#nav.selected && !#nav.hasSubFolders)$<li class="active"><a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a></li>$CMS_END_IF$]]></CMS_ARRAY_ELEMENT>

  <CMS_ARRAY_ELEMENT index="2..99"><![CDATA[<li class="active"><a href="$CMS_REF(#nav.ref)$">$CMS_VALUE(#nav.label)$</a></li>]]></CMS_ARRAY_ELEMENT>

  </CMS_ARRAY_PARAM>

    

  </CMS_FUNCTION>

</CMS_HEADER>

$CMS_TRIM(level:2)$

  <div class="row breadcrumbs $CMS_VALUE(ss_highlight_color.convert2)$">

  <ul>

  <li>

  <a href="$CMS_REF(ps_start_page)$">Home</a>

  </li>

  $CMS_IF(!fr_breadcrumb_menu.isEmpty)$

  $CMS_VALUE(fr_breadcrumb_menu.toString)$

  $CMS_END_IF$

  $CMS_IF(!fr_breadcrumb_submenu.isEmpty)$

  $CMS_VALUE(fr_breadcrumb_submenu.toString)$

  $CMS_END_IF$

  $CMS_IF(!fr_breadcrumb_purepath.isEmpty)$

  $CMS_VALUE(fr_breadcrumb_purepath.toString)$

  $CMS_END_IF$

  </ul>

  </div>   

$CMS_END_TRIM$

0 Kudos
marza
I'm new here
In response to flaxoiu
โ€Ž03-09-2017 03:29 AM

Hallo Florian,

benรถtigst Du noch Hilfe oder hast Du uns Deine Lรถsung zur Verfรผgung gestellt? Im zweiten Fall wรคre es fรผr die anderen in der Community hilfreich, wenn Du den entsprechenden Beitrag, wie Martin bereits vorgeschlagen hat, bitte als "Richtige Antwort" markierst. Danke!

GrรผรŸe Marian

0 Kudos
tenter
I'm new here
In response to marza
โ€Ž03-27-2017 08:11 AM

Hallo Florian,

danke fรผr deinen Code! Vielleicht hilft das anderen Leuten mit dem gleichen Problem weiter.

Ich nehme an, damit hast du erstmal eine Lรถsung - alternativ hatte Michael dir ja schon einen anderen Weg aufgezeigt.

GrรผรŸe,

Hannes

0 Kudos

Type a product name