Viele Shop-Betreiber wünschen sich eine “geteilte” Kategorien-Navigation. So dass man ein Layout mit horizontalen “Reitern” für die Hauptkategorien und den Unterkategorien in der linken Spalte realisieren kann. Hier mein Lösungsvorschlag für diese Aufgabenstellung zum Runterladen:

» gunnart_ShowCategoryMulti.zip (Version 0.1)

 

Anleitung:

1) Vorab-Info:

Das Ganze benutzt eine komplett überarbeitete Funktion zur Ausgabe einer (hierarchischen) Kategorien-Liste, die folgendermaßen aufgerufen wird:

gunnartCategories($Zahl,1,$Konfiguraiton);

  • $Zahl ist die ID der Kategorie, von der aus die Unterkategorien “geholt” werden. Wenn man dort 0 einträgt, werden die Haupt-Kategorien gezeigt.
  • Die 1 muss als “Level-Startwert” immer bleiben.
  • $Konfiguration ist ein Array, in dem weitere Parameter zum “Verhalten” drin sein müssen …

$Konfiguration kann z.B. so aussehen:

$Konfiguration = array(
	'MinLevel'	=> 2,
	'MaxLevel'	=> 4,
	'HideEmpty'	=> true,
	'ShowCounts'	=> false,
	'CatNaviID'	=> 'LALALA'
);
  • 'MinLevel': So viele Hierarchie-Stufen sind standardmäßig ausgeklappt
  • 'MaxLevel': Tiefer als das lässt sich die Kategorien-Navi nicht ausklappen, bei false lässt sie sich “bis zum Ende” ausklappen
  • 'HideEmpty': Leere Kategorien verstecken? Ja/Nein?
  • 'ShowCounts': Anzahl der enthaltenen Produkte anzeigen? Ja/Nein?
    Achtung! Das, was man im Admin-Bereich von wegen “Produkte zählen” festlegen kann, hat hier keinen Einfluss. Damit man bei einer Zweigeteilten Navi eben unabhängig voneinenander entscheiden kann, wo gezählt werden soll und wo nicht)
  • 'CatNaviID': Die CSS-ID, welche die zurückgegebene Navi-Liste haben soll.


2) Installieren:

Das Übliche: Zip-Archiv herunterladen und entpacken, Dateien ins aktive Template uploaden (als Orientierung sind die Ordner im Zip-Archiv mit drin) - und in der “boxes.php” das nachtragen, was in “add_this_to_boxes.php.txt” zu lesen ist.

Zu der Geschichte mit “FORCE_CACHE” kommen wir später.


3) Loslegen:

Nun kennt die “index.html” eine {$top_CATEGORIES} und eine {$sub_CATEGORIES}-Box. Die {$top_categories} zeigt ausschließlich “Hauptkategorien” an und lässt sich nicht weiter ausklappen.

Die {$sub_CATEGORIES} zeigt auf der Startseite zunächst einmal gar nichts an - aber sobald man eine der Hauptkategorien gewählt hat, ist die {$sub_CATEGORIES} mit weiteren Unterkategorien gefüllt.


4) Anpassen:

Damit kann man schon herumspielen. Wer mehr möchte und seine “horizontale” Navigation als DropDown umsetzen will (wie z.B. auf » Mogani, bei » sportaera, bei » RegalRaum oder bei » CORA) kommt mit der “top_categories.php” im Zip-File natürlich nicht weiter. Denn die zeigt ja nur die “erste Ebene” - und dann gibt’s nichts zum Down-Droppen.

Man muss standardmäßig also mindestens 2 “Stufen” anzeigen. Und man sollte dafür sorgen, dass sich die Navigation auch noch “weiter ausklappen” kann. Dazu ändern wir in der “top_categories.php” unseren Konfigurations-Array $TopConfig wie folgt:

$Konfiguration = array(
	'MinLevel'	=> 2,
	'MaxLevel'	=> false,
	'HideEmpty'	=> false, // oder true, wie man will
	'ShowCounts'	=> false,
	'CatNaviID'	=> 'TopCats'
);

… und der Rest ist dann eine Mischung aus CSS-Basteleien und ein bisschen JavaScript.

Für derlei DropDowns verwende ich persönlich gerne das behaviour-Script » csshover.htc - Damit bringt man dem IE bei, wie alle Standard konformen Browser auch Elemente zu hovern, die kein Link sind.

Ist wirklich ein interessantes Teil. Einmal korrekt eingebunden, kann man alle möglichen “wilden” Dinge nur via CSS-Regeln umsetzen.

 

Was noch?

Einstellungssache:

Um die ganze Geschichte übersichtlich zu halten, gibt’s diesmal nicht ganz so viele Konfigurationsmöglichkeiten wie in der Advanced Show Category 2.0 - So hab ich mich z.B. dazu entschlossen, ein paar Dinge nicht mehr anzubieten, die meines Erachtens nach eh ziemlicher Quatsch sind.

Es ist nun mal CSS-mäßig sehr viel leichter zu handhaben, in “aktiven” Kategorien dem Link und nicht dem Listenpunkt eine besondere CSS-Klasse als “Aktiv-Markierung” zu verpassen.

Sonst kommt man (siehe YAML und Konsorten) um ziemlich wilde CSS-Konstruktionen kaum noch herum. Das wird dann je nach Hierarchietiefe schnell unübersichtlich:


.categories ul li ul li ul li ul li a, .categories li.activeCat li.activeCat li.activeCat ul li a {
	padding: 1px 0px 1px 40px;
	background: #ccc;
	color:#333;
}
.categories li.activeCat a, .categories li.activeCat li.activeCat a, .categories li.activeCat li.activeCat li.activeCat a, .categories li.activeCat li.activeCat li.activeCat li.activeCat a {
	background: #18578b;
	color:#fff;
}
	

Ganz ehrlich: Ich steig da nicht mehr durch …

Daher werden die aktiven Links mit “Current” bzw. “CurrentParent” markiert. Und gut ist.

Die Listenpunkte kommen allesamt mit einer “CatLevel”-Klasse zurück, so spart man sich im Stylesheet weitere “Gesänge” à la lala li { } li li { } li li li { } … z.B. für Einrückungen. Das kann man dann mit Anweisungen für .CatLevel1 { … } $CatLevel2 {…} etc. mindestens genau so gut regeln.

Diesmal sind die CSS-Bezeichner ziemlich fest “eingeklopft”. Dabei habe ich die gewählt, die sich für mich bisher als praktisch und “gut zu gestalten” erwiesen haben.


FORCE_CACHE:

Ein kleiner Trick, um die Performance ein bisschen zu verbessern. Ich empfehle jedoch, FORCE_CACHE in der “boxes.php” zunächst einmal auf false zu lassen - Wenn alles wie gewünscht klappt, kann man auf true umschalten und zwängt den Kategorien-Boxen damit den Smarty-Cache auf.

Mehr Infos dazu im » eComBASE-Forum


SHOW_COUNTS:

… hat hier keinen Einfluss mehr. Damit man z.B. den “horizontalen Reitern” sagen kann, dass sie KEINE Produkte zählen sollen, während die “vertikale Unterkategorienliste” gleichzeitig eben doch zählt. Wenn man dabei auf die Einstellugen im Admin-Bereich achten würde, könnte man das nicht mehr voneinander trennen.

Also nicht wundern, einfach in den entsprechenden Boxen so eintragen, wie’s gewünscht ist.


Selbstverständlich …

… kann man diese Kategorien-Navi auch für eine ganz normale Kategorien-Box einsetzen. Eine Beispiel “categories.php” ist im Zip mit drin.

Dann in der “boxes.php” die beiden anderen Files auskommentieren …


Wo sind die {#Marker#}?

In der » Advanced Show Category 2.0 konnte man in der Kategorien-Navi über “Markierungen” zu anderen Scripten umleiten. War eine nette Idee, in der Praxis hab ich das persönlich eher selten benutzt.

Das “Marker-System” ist hier daher noch nicht drin.
Aber wir schreiben ja auch erst die Version 0.1

:)