[news_categories] - Kategorienliste als Dropdown-list

[derRenner]

Hallo,

ich verwende für einen Blog [news_categories] und den Modultyp 'Liste mit Nachrichten-Kategorien'.
Dieser erzeugt eine ul mit den vorhandenen Kategorien.

Das template nav_newscategories.html5 sieht wie folgt aus:

<ul class="<?php echo $this->level; ?>">
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
    <li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?></li>
    <?php else: ?>
    <li class="<?php echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>" class="<?php echo $item['class']; ?>" title="<?php echo $item['linkTitle']; ?>"><?php echo $item['link']; ?><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?></a><?php echo $item['subitems']; ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
</ul>

Nun würde ich gerne anstatt eine Liste eine Dropdown-Liste erzeugen - nur habe ich keinen blassen Schimmer, wie ich die "links" in ein form/select bekommen könnte ... dafür reicht mein know-how einfach nicht aus
Hat jemand einen Tipp wo ich da ansetzen müsste, oder überhaupt jemand eine Lösung?

Danke schon mal

[Samuell]

Vergleiche einfach das HTML und tausche es:
https://wiki.selfhtml.org/wiki/HTML/.../Auswahllisten

li wäre dann option
und ul form, select

Was spricht gegen eine dropdown-navigation?
Die könntest Du auch mit dem HTML bauen.

[derRenner]

... nein das klappt nicht - das hatte ich auch im Vorfeld bereits probiert - sogar nach der gleichen google-Suchseite


Das sah dann so aus und ergab je Kategorie eine Dropdown-Liste, die nichts bewirkt hatte ...

<form action="#" class="<?php echo $this->level; ?>">
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
		<select name="blog-category">
			<option class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
			</option>
		</select>
		<?php else: ?>
		<select name="blog-category">
			<option class="<?php echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>" class="<?php echo $item['class']; ?>" title="<?php echo $item['linkTitle']; ?>"><?php echo $item['link']; ?><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?></a><?php echo $item['subitems']; ?>
			</option>			
		</select>
    <?php endif; ?>
    <?php endforeach; ?>
</form>

[Samson1964]

Der Ansatz ist schon mal ganz gut. Aber zwei Sachen müssen geändert werden. Das select muß aus der Schleife raus und kommt außen rum, denn Du willst ja nur eine Dropdownliste. Und den Link einfach in ein value-Attribut von option reinsetzen (das scheint bei Dir sowieso zu fehlen) reicht auch nicht aus. Es fehlt noch Javascript, um mit dem value-Wert auch wirklich ein window.href zu machen.

Den nachfolgenden Code habe ich mal vom einem Nachrichtenarchiv kopiert und zusammengekürzt. Vielleicht hilft das als Ansatz weiter:

<form id="ArchivNaviForm" style="display:none;" action="">
<div class="ArchivNaviBlock">
<!-- drop-down-menu start -->
<!--
JavaScript tests the selected row in drop-down-menu.
If it is not the first item (cause it is only text)
than reload the page and show the selected month
-->
<select id="ArchivNavi" onchange="if (document.getElementById('ArchivNavi').selectedIndex != 0)  parent.location.href = this.form.ArchivNavi.options[ this.form.ArchivNavi.options.selectedIndex ].value;">
<option selected="selected" value="">*** Auswahl Zeitraum ***</option>
<!-- each YEAR in drop-down-menu -->
<!-- label YEAR -->
<optgroup label="2016">
<!-- label MONTH start-->
<option  value="nachrichtenarchiv.html?month=201604">April 2016 (13 Einträge)</option>
<option  value="nachrichtenarchiv.html?month=201603">März 2016 (28 Einträge)</option>
<option  value="nachrichtenarchiv.html?month=201602">Februar 2016 (18 Einträge)</option>
<option  value="nachrichtenarchiv.html?month=201601">Januar 2016 (26 Einträge)</option>
<!-- label MONTH end -->
</optgroup>
</select>
<!-- drop-down-menu end -->
<a href="javascript:if ( document.getElementById('ArchivNavi').length > document.getElementById('ArchivNavi').options.selectedIndex +1) parent.location.href = document.getElementById('ArchivNavi').options[ document.getElementById('ArchivNavi').options.selectedIndex +1].value;">Monat zurück</a> |
<a href="javascript:if ( 1 < document.getElementById('ArchivNavi').options.selectedIndex ) parent.location.href = document.getElementById('ArchivNavi').options[ document.getElementById('ArchivNavi').options.selectedIndex -1].value;">Monat vor</a>
</div>
</form>

Wichtig ist bei select das onchange-Attribut. Die beiden Links am Ende (Vor, Zurück), brauchst Du sicher nicht.

[derRenner]

Hallo Frank,
Danke dir schon mal für den Schups in die richtige Richtung ... nur so ganz klar komm ich (wohl auch aus Mangel an fundierten jQuery-Kenntnissen) mit dem Ergebnis noch nicht.

Was klappt:
Die Dropdown-list wird befüllt und lässt sich auch auswählen - nur beim Auswählen passiert nix.

Ich habe in das template nun noch etwas code mit reingepackt, sodass das zur Zeit so aussieht:

<form action="" class="<?php echo $this->level; ?>">
    <select id="blogcat">
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
            <option class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>
        <?php else: ?>
            <option class="<?php echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>" class="<?php echo $item['class']; ?>" title="<?php echo $item['linkTitle']; ?>"><?php echo $item['link']; ?><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?></a><?php echo $item['subitems']; ?>
            </option>            
    <?php endif; ?>
    <?php endforeach; ?>
     </select>
</form>
<script>
    (function($){
        var dropdown = document.getElementById("blogcat");
        function onCatChange(){
            if(dropdown.options[dropdown.selectedIndex].value > 0){
                parent.location.href = "http://meinedomain/index.php/" + dropdown.options[dropdown.selectedIndex].value;
            }
        }
        dropdown.onchange = onCatChange;
    })(jQuery);
</script>

hast du nochmals Rat für mich?
liegt das <script> im template überhaupt richtig? also wird es von dort aus denn überhaupt verarbeitet - wobei ich hatte es auch bereits in den <head> gepackt ... auch von dort aus tut sich nix.

[derRenner]

so, ein Stückchen weiter bin ich - aber das Ergebnis ist leider eine grossgeschriebene html-Seite
also z.B. Musik.html
und diese wird nicht erkannt - ändere ich das grosse 'M' zu Fuss in der Suchleiste auf ein kleines 'm' werden auch die korrekten Kategorien dargestellt

<form action="" class="<?php echo $this->level; ?>">
    <select id="blogcat">
    <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
            <option class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>
        <?php else: ?>
            <option class="<?php echo $item['class']; ?>"><a href="<?php echo $item['href']; ?>" class="<?php echo $item['class']; ?>" title="<?php echo $item['linkTitle']; ?>"><?php echo $item['link']; ?><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?></a><?php echo $item['subitems']; ?>
            </option>            
    <?php endif; ?>
    <?php endforeach; ?>
     </select>
</form>
<script>
    (function($){
        var dropdown = document.getElementById("blogcat");
        function onCatChange(){
            if(dropdown.options[dropdown.selectedIndex].selectedIndex != 0){
                parent.location.href = "http://meinewebseite/index.php/blog/category/" + dropdown.options[dropdown.selectedIndex].value + ".html";
            }
        }
        dropdown.onchange = onCatChange;
    })(jQuery);
</script>

der Fehler lag wohl am "... if(dropdown.options[dropdown.selectedIndex].selectedIndex != 0){ ...

Noch jemand eine Idee?

[Spooky]

Ist ein <a> in einer <option> überhaupt valid HTML5? Warum machst du das überhaupt mit einem <a>?

[derRenner]

Das <a> war mal nur in der "Übernahme" so mit drinnen ...

Ich habe das template jetzt mal zusammengeschrumpft und es sieht so aus und ist mittlerweile (fast komplett) brauchbar

<form action="" class="<?php echo $this->level; ?>">
    <select id="blogcat">
    <?php foreach ($this->items as $item): ?>
            <option value="<?php echo $item['href']; ?>" class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>            
    <?php endforeach; ?>
     </select>
</form>
 <script>
    (function($){
        var dropdown = document.getElementById("blogcat");
        function onCatChange(){
            if(dropdown.options[dropdown.selectedIndex].value != 0){
                parent.location.href = "http://cto.jutima.at/" + dropdown.options[dropdown.selectedIndex].value;
            }
        }
        dropdown.onchange = onCatChange;
    })(jQuery);
</script>

Wo ich jetzt noch ein Problem habe ist Folgendes:
Ich wähle eine Kategorie aus » die Seite wird korrekt aufgebaut, aber das Dropdown springt zurück auf "Alle Kategorien" und bleibt dort als <span> stehen, sodass von einer gefilterten Kategorie nicht wieder auf 'Alle Kategorien' gewählt werden kann.

Zu sehen hier: http://cto.jutima.at/

So gesehen, bräuchte ich nun hierzu Hilfe ;-)

[derRenner]

... ich revidiere ...
passt doch nicht » steht man auf einer Unterseite und wählt eine Kategorie aus, so wird ein falscher link generiert

[Samson1964]

Die Kategorieauswahl funktioniert doch wunderbar. Wenn Du aber jetzt noch die aktuell angezeigte Kategorie als selected haben willst, kommst Du um weiteres PHP nicht herum. In $_SERVER['REQUEST_URI'] müßte ja die aktuelle URL (ohne Domain) drin stehen, die Du dann mit $item['href'] vergleichen kannst, um das selected zu setzen.

    <?php foreach ($this->items as $item): ?>
        <?php if($_SERVER['REQUEST_URI'] == $item['href']): ?> 
            <option value="<?php echo $item['href']; ?>" selected class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>            
        <?php else: ?>
            <option value="<?php echo $item['href']; ?>" class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>            
        <?php endif; ?>
    <?php endforeach; ?>

[derRenner]

mmmh - nein tut's nicht ... macht das Gleiche wie vorher

<form action="" class="<?php echo $this->level; ?>">
    <select id="blogcat">
    <?php foreach ($this->items as $item): ?>
        <?php if($_SERVER['REQUEST_URI'] == $item['href']): ?> 
            <option value="<?php echo $item['href']; ?>" selected class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>            
        <?php else: ?>
            <option value="<?php echo $item['href']; ?>" class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>            
        <?php endif; ?>             
    <?php endforeach; ?>
     </select>
</form>
<script>
    (function($){
        var dropdown = document.getElementById("blogcat");
        function onCatChange(){
            if(dropdown.options[dropdown.selectedIndex].value != 0){
                parent.location.href = "http://cto.jutima.at/" + dropdown.options[dropdown.selectedIndex].value;
            }
        }
        dropdown.onchange = onCatChange;
    })(jQuery);
</script>

[Samson1964]

In $_SERVER['REQUEST_URI'] sollte theoretisch dasselbe drinstehen, wie in irgendeinem $item['href']. Durch die URL-Umschreibung kann das natürlich auch voneinander abweichen. Einfach mal $_SERVER['REQUEST_URI'] mit echo ausgeben lassen und dann die Abfrage entsprechend modifizieren. Eventuell fehlt ja nur ein / vor $item['href'] um einen Treffer zu erzeugen.

[derRenner]

Hallo,

ja, du hattest recht - der Unterschied liegt in einem /

$_SERVER['REQUEST_URI'] » /index.php/blog/category/allgemein.html
$item['href'] » index.php/blog/category/allgemein.html

so, nun bin ich aber sowas von überfordert mit dieser Marterie ... kannst du mir nochmals weiterhelfen, wie ich das jetzt "manipulieren" kann?

[Spooky]

Es ist nicht notwendig die globale Variable zu benutzen.

\Environment::get('requestUri') 

[derRenner]

Danke an euch beide - es ist geschafft ;-)

das fertige template sieht nun wie folgt aus und funktioniert soweit auch:

<form action="" class="<?php echo $this->level; ?>">
    <select id="blogcat" >
    <?php foreach ($this->items as $item): ?>
        <?php if((trim(Environment::get('requestUri'),'/')) == $item['href']): ?> 
            <option value="<?php echo $item['href']; ?>" selected class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>            
        <?php else: ?>
            <option value="<?php echo $item['href']; ?>" class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php if ($this->showQuantity): ?> <span class="quantity">(<?php echo $item['quantity']; ?>)</span><?php endif; ?><?php echo $item['subitems']; ?>
            </option>            
        <?php endif; ?>             
    <?php endforeach; ?>
     </select>
</form>
<script>
    (function(){
        var dropdown = document.getElementById("blogcat");
        function onCatChange(){
            if(dropdown.options[dropdown.selectedIndex].selectedIndex != 0){
                parent.location.href = "http://cto.jutima.at/" + dropdown.options[dropdown.selectedIndex].value;
            }
        }
        dropdown.onchange = onCatChange;
    })(jQuery);
</script>

[Samson1964]

trim(Environment::get('requestUri'),'/') 

Interessant. Mir war gar nicht bekannt, das man trim mehr als einen Parameter mitgeben kann.

[derRenner]

... bis gestern wusste ich gar nicht, was das das möglich wäre ;-)
ob der eingesetzte code korrekt ist, kann ich ja auch gar nicht beurteilen - er klappt halt

Freund Google hatte mir den Tipp gegeben und mit ein wenig dry&error kam dann eben dies raus

trim(Environment::get('requestUri'),'/') 

Was wäre die "korrekte" Lösung?

[Spooky]

Gibt die Funktion die Request URI nicht eh schon ohne leading slash zurück?

[derRenner]

Gibt die Funktion die Request URI nicht eh schon ohne leading slash zurück?

nein, beides via echo ausgeben lassen und bei beidem ist / mit vorangestellt

[jenda]

Hallo,

dank Kamil, dem Entwickler konnte ich auch mehrere Hauptkategorien mit deren Unterkategorien ausgeben. Hier ist der Code, der auch für die Isotope-Filterung vorbereitet ist, also ggf. löschen (die Angaben mit data-filter und value)

nav_newscategories

<?php if ($this->level === 'level_1'): ?>
    <?php foreach ($this->items as $item): ?>
        <div class="styled-select">
            <select>
                <option class="first-item <?= standardize($item['frontendTitle']) ?>" value="*" data-filter="*"><?= $item['title'] ?></option>
                <?= $item['subitems'] ?>
            </select>
        </div>
    <?php endforeach; ?>
<?php else: ?>
    <?php foreach ($this->items as $item): ?>
        <option class="<?= standardize($item['frontendTitle']) ?>" value=".<?= standardize($item['title']) ?>" data-filter=".<?= standardize($item['title']) ?>"><?php echo $item['title']; ?></option>
    <?php endforeach; ?>
<?php endif; ?>