Der Ausgangszustand: Tabellen-Layout in Extremform

Für jede Kategorie eine Tabelle, Pfeil-Icons als <img>-Tag, wie weit “Unterkategorien” eingerückt werden, wird mit lauter Aneinanderreihungen von &nbsp; bestimmt - und (gewissermaßen als “Krönung”) werden Hover-Effekte bei MouseOver mit JavaScript realisiert. Das muss wirklich nicht sein.

Ein Beispiel: Angenommen, man hat einen Shop mit schlappen zwei Haupt-Kategorien - “Kategorie I” und “Kategorie II”. Und die “Kategorie I” hat noch zwei Unterkategorien, nämlich “Unterkat I” und “Unterkat II”. Bei angewählter “Kategorie I” werden diese Unterkategorien gewissermaßen “ausgeklappt” und angezeigt. Somit würde ein Menü mit insgesamt vier anwählbaren Menüpunkten angezeigt werden. Wieviel HTML für ein solch kurzes Menü benutzt wird, ist jedoch beeindruckend:

<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td class="infoBoxHeading">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="infoBoxHeading">Kategorien</td>
<td width="10"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="infoBox" align="right">
<table width="95%" border="0" cellspacing="0" cellpadding="2" >
<tr>
<td class="boxText">
<table width="100%">
<tr>
<td class="moduleRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)"><img src="templates/xtc4/img/icon_arrow.jpg">&nbsp;<b><a href="#"><b>Kategorie I</b></a></b><br>
&nbsp;-&nbsp;&nbsp;&nbsp;<a href="#">Unterkat I</a><br>
&nbsp;-&nbsp;&nbsp;&nbsp;<a href="#">Unterkat II</a><br>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td class="moduleRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)"><img src="templates/xtc4/img/icon_arrow.jpg">&nbsp;<b><a href="#">Kategorie II</a></b><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Da es nur wenige Shops mit derart wenigen Kategorien geben dürfte, sollte anhand dieses Beispiels deutlich geworden sein, wieviel Quelltext alleine für die Navigation eines “normalen” Shops verbraten wird.

Welche Dateien sind zu bearbeiten?

Zunächst kann man hier wieder die “äußeren” Tabellen durch Änderung an der entsprechenden Datei im Template-Ordner “boxes” eliminieren. Zu ändern ist die Datei “box_categories.html” - In Anlehnung an den Vorschlag aus diesem Beitrag machen wir aus dem Original, das im Standard-Template folgendermaßen daherkommt …

{config_load file="$language/lang_$language.conf" section="boxes"}
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td class="infoBoxHeading">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="infoBoxHeading">{#heading_categories#}</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="infoBox" align="left">
<table width="95%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td class="boxText">{$BOX_CONTENT}</td>
</tr>
</table>
</td>
</tr>
</table>

… kurzerhand etwas “Schlankeres” und Praktischeres, nämlich dies hier:

<div class="box" id="categoriesbox">
<h4><span>{#heading_categories#}</span></h4>
<div class="boxcontent">
{$BOX_CONTENT}
</div>
</div>

Damit ist das Tabellengeschachtel innerhalb der Kategorien-Navigation jedoch noch nicht behoben: Zuständig für diese (verbesserungswürdige) HTML-Ausgabe ist die Datei “xtc_show_category.inc.php” - die sich im Template-Ordner “source”/“inc” befindet.

Wie bei der Navigation für die statischen Seiten wird auch in dieser Datei wieder eine Variable während des Durchlaufens einiger Schleifen nach und nach mit Inhalten gefüllt - Hier ist es die Variable $categories_string. Wenn man sich die Standard-Funktion ansieht, bemerkt man schnell etliche Stellen mit deutlichem “HTML-Einsparungs-Potential”. Der nächste Schritt ist folgende Überlegung:

Was soll ausgegeben werden?

Ganz klar: Wieder einmal die “ungeordnete Liste”. Wünschenswert wäre also eine Navigation nach folgendem Muster, idealerweise in “hierarchischer” Struktur (also mit ineinander geschachtelten Listen):

<ul>
   <li><a href="#">Kategorie I</a>
     <ul>
         <li><a href="#">Unterkat I</a></li>
         <li><a href="#">Unterkat II</a></li>
      </ul>
   </li>
   <li><a href="#">Kategorie II</a></li>
</ul>

Eins vorweg: Eine Ausgabe in dieser “Idealform” hab ich nicht zustande gebracht. Problematisch war dabei, dass in XHTML jedes <li>-Tag wieder geschlossen werden muss. Und besonders, dass untergeordnete Listen kommplett innerhalb von <li> und </li> liegen müssen. Vielleicht kann man das realisieren, indem sich gewisse Schleifen unter bestimmten Bedingungen wieder “selbst” aufrufen?

Ich muss leider gestehen, dass ich mit sogenannten “Rekursionen” schon immer meine Schwierigkeiten hatte … In Endlosschleifen “verrannte” Rechner pflasterten meinen Weg durch den Informatik-Unterricht. Turbo-Pascal, irgendwann vor 1995. Und keiner hat mir geglaubt, dass ich diese 286er-Rennmaschinen wirklich nie mit Absicht lahmgelegt habe.

Also muss ein anderer Lösungsweg her - und zwar einer ohne “hierarchische” Struktur. Die Frage an dieser Stelle ist demnach nicht mehr “Was soll ausgegeben werden?”, sondern die Frage ist:

Was kann ausgegeben werden?

Auch ohne ineinander verschachtelte Listen gibt es Möglichkeiten, Haupt- von Unterkategorien zu unterscheiden - und verschiedene “Kategorie-Tiefen” abzubilden. CSS macht’s möglich: Prinzipiell muss unterschieden werden zwischen:

  • Hauptkategorie - Unterkategorie
  • aktiv - nicht aktiv

Um Unterkategorien entsprechend ihrer “Tiefe” individuell gestalten zu können (z.B. schrittweise weiter einzurücken), sollten diese noch eine Art “Level”-Information mit auf den Weg bekommen. Angenehm wäre es auch, wenn Kategorien mit weiteren Unterkategorien noch eínmal gesondert gekennzeichnet werden könnten, so dass der Besucher weiß “hier gibt’s noch mehr” … Hinzu kommen demnach noch:

  • Unterscheidung der Kategorie-Tiefen
  • Unterscheidung “hat weitere Unterkategorien” - “hat keine weiteren Unterkategorien”

Markieren mit eindeutigen CSS-Bezeichnern

Ohne hierarchische Listen-Struktur muss das ausgegebene HTML ausführlich mit eindeutigen CSS-Klassen ausgestattet werden. Man darf dabei allerdings nicht zu viele Bezeichner in Abhängigkeit voneinander setzen, damit man jeden “Navigations-Zustand” auch individuell im Stylesheet ansprechen kann. Ausgehend von oben genanntem Beispiel ergibt sich folgende HTML-Ausgabe, die erreicht werden sollte:

<ul>
   <li class="maincat submenue"><a class="gewaehlt" href="#">Kategorie I</a></li>
   <li class="subcat level1"><a href="#">Unterkat I</a></li>
   <li class="subcat level1"><a href="#">Unterkat II</a></li>
   <li class="maincat"><a href="#">Kategorie II</a></li>
</ul>

Hier die dazugehörigen “Regeln”:

  1. <li>-Tags einer “Hauptkategorie” erhalten die Klasse “maincat”
  2. <li>-Tags einer “Hauptkategorie”, die Unterkategorien besitzen, erhalten die Klasse “maincat submenue” und können auf Wunsch gesondert gekennzeichnet werden
  3. <li>-Tags einer “Unterkategorie” erhalten die Klasse “subcat level#”. So kann im Stylesheet a) zwischen “Unterkategorien” und “Hauptkategorien” im Allgemeinen unterschieden werden und b) je nach “Level” der jeweiligen “Unterkategorien” auch “Tiefe” in der Gestaltung berücksichtigt werden. [# steht hier für eine Zahl abhängig von der “Tiefe”]
  4. <li>-Tags einer “Unterkategorie” mit weiteren “Unterkategorien” erhalten die Klasse “subcat level# submenue#”, um auch hier in der Gestaltung das Vorhandensein weiterer “Unterkategorien” kenntlich zu machen.
  5. aktive Links bekommen die Klasse “gewaehlt”
  6. Auf Wunsch kann xt:Commerce je Kategorie die Anzahl der enthaltenen Artikel darstellen. Dies sollte (um CSS-Probleme zu vermeiden, falls man Links als Block-Element anzeigen möchte) zwischen <a> und </a> passieren. Und damit auch diese Zahl individuell gestaltet werden kann, erscheint sie in Runden Klammern zwischen öffnendem <span class="catcount"> und schließendem </span>.

Damit wären alle möglichen Fälle und “Zustände”, die eine Kategorien-Navigation annehmen kann, “abgedeckt” und könnten mit Arbeit am Stylesheet wie gewünscht markiert bzw. gestaltet werden. Jetzt muss man “nur” noch die Datei “xtc_show_category.inc.php” dahingehend umgestalten, dass sie auch den erforderlichen HTML-Code ausgibt.

Download

Und weil diese Datei für diesen Zweck beinahe komplett neu geschrieben werden muss, verzichte ich einfach auf die ausführliche Anleitung, was in welcher Weise zu verändern ist. Damit ist dieser Beitrag zwar kein “echtes Tutorial” mehr - aber da bitte ich um Verständnis.

Denn wenn man (ein weit hergeholter Vergleich, das gebe ich zu) eine Spinat-Pizza haben möchte, bestellt man sich schließlich auch nicht zunächst eine “Frutti di Mare” und erzählt dabei ausführlich und im Einzelnen, welches Meeresgetier weggelassen werden muss, um die entstandenen Lücken mit Spinat aufzufüllen.

:-)

Die Zip-Datei muss entpackt und enthaltene “xtc_show_category.inc.php” in das Verzeichnis “source”/“inc” des aktiven Templates hochgeladen werden. Der passende Pfad für diese Datei wäre also beispielsweise:
“http://www.meinshop.de/templates/meintemplate/source/inc/”

Hinweise:

Wie immer: Sicherheitskopie nicht vergessen! Und auch diese Bearbeitung einer Template-Datei ist für xt:Commerce Version 3.04 gedacht.

 

Bitte beachten Sie unbedingt die allgemeinen Hinweise zur Verwendung hier veröffentlichter Code-Beispiele!

 

 

Nachtrag: Erweiterte Version

Inzwischen gibt’s eine Kategorien-Navigation mit einigen erweiterten Möglichkeiten,
nähere Infos finden Sie hier: » “gunnART Advanced Show Category”