gunnART Advanced Show Category - verbesserte Kategorien-Navigation

[pufaxx]

Beta-Tester willkommen. Ich hab die Kategorien-Navigation umgeschriebe, so dass sie jetzt folgende Möglichkeiten bietet

1) HTML-Ausgabe erfolgt als hierarchische Liste (CSS-Design)

2) Man kann einstellen, wie weit der "Kategorien"-Baum standardmäßig ausgeklappt sein soll

3) Hat man z.B. eingestellt, dass immer die "ersten beiden Ebenen" angezeigt werden sollen, gibt es noch einen zusätzlich Parameter, mit dem man bestimmen kann, ob trotz der Beschränkung weitere Unterkategorien ausgeklappt werden dürfen, wenn man grad eine Kategorie der "Ebene zwei" angewählt hat.

4) Man kann einstellen, ob leere Kategorien angezeigt werden dürfen oder nicht.

Einfach mal ausprobieren, wenn Ihr Lust habt.

--> LINK

Und: Ist natürlich kostenlos.

:-)

Viele Grüße

Gunnar

BUGFIX - Bitte die 0.2 benutzen!

In Version 0.1 wird den Produkt-Detail-Ansichten aktive Pfad nicht markiert. Das kann (je nach "Einstellung") dazu führen, dass sich auf "Artikelseiten" die Navigation wieder komplett einklappt.

Aber der Fehler ist gefunden und behoben, gefixte Version 0.2 unter der selben Adresse erreichbar.

[night66]

hallo, erstmal ein Kompliment für dein Skript, funktioniert super!

Leider passt es von der Optik her nicht ganz zum übrigen Layout meines Shops,siehe Bild

Gibt es eine Möglichkeit, dein Skript von der Optik her anzupassen und wenn ja, wie?

Danke

[pufaxx]

Das Skript selbst macht gar keine "Optik" - Ich hab's dafür ausgelegt, dass man es mit CSS gestalten kann.

Die Navigations-Liste hat die CSS ID "CatNavi", jeder Listenpunkt (je nach Level) die Klassen "CatLevel1" bis "CatLevel5" - Menüpunkte, die ein weiteres "Untermenü" enthalten, haben zusätzlich noch eine Klasse "SubMenue" - Aktive Menüpunkte heißen "Current", die "Eltern-Kategorien" aktiver Menüpunkte heißen "CurrentParent" ...

Damit kann man mit ein paar CSS-Kenntnissen so ziemlich Alles anstellen.

Sogar eine "zweigeteilte" Navigation (Die erste Ebene als Horizontale "Reiter", alle weiteren Ebenen wieder in der linken Spalte etc)

[night66]

Danke, werde mich damit mal näher beschäftigen.

Hoffe es klappt.

[night66]

Hallo,

vielleicht kannst du mir noch ein bischen weiterhelfen.

Ich habe CatNavi und CatLevel in die stylesheet.css eingefügt, leider ändert sich nichts.Ich kenn mich mit css nicht gut aus.Wie und wo füge ich die von dir genannten ID/Klassen in die css ein?

So sieht es bei mir aus:

CatNavi {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

}

.CatLevel {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

}

Eingefügt am Ende der css.

Danke

Night66

[pufaxx]

so wird das auch nichts.

Anweisungen für IDs werden im Stylesheet durch ein # gekennzeichnet.

also

#CatNavi {... }

und das andere sind Klassen, der Punkt vornedran ist schon mal richtig. Nur gibt's keine Klasse, die "CatLevel" heißt, dafür aber ...

.CatLevel1 {}

.CatLevel2 {}

.CatLevel3 {}

.CatLevel4 {}

.CatLevel5 {}

... aber solche Fragen sind eh immer ziemlich schwer zu beantworten, weil ein Stylesheet aus hunderten von Regeln besteht, die voneinander abhängen und sich gegenseitig beeinflussen. "Cascading", eben.

[night66]

Danke,

jetzt klappts.

Bin eben noch Anfänger in Sachen css.

[pufaxx]

"Anfänger" bleibt man im Grunde genommen irgendwie immer.

Und die unterschiedlichen "Verhaltensweisen" der unterschiedlichen Browser lassen auch "fortgeschrittene Anfänger" gerne wieder zu "blutigen Anfängern" werden - Also keine Sorge, die ganzen CSS-Tricks lernt man nicht von jetzt auf gleich.

[devran]

Also ich danke erst einmal für das Skript aber das ist nicht das was ich meinte !!!

Bei deinem Skript kann man die Hauptkategorien von den Subkategorien überhaupt nicht trennen.

Und abgesehen davon egal wie ich die Einstellung mache ob true, false oder 1-5 tut sich da überhaupt nichts. :-(((

Kann mir jemand hier die Lösung vielleicht nennen ???

Bitte um Hilfe !!!

MfG

Devran

[pufaxx]

Dochdoch, das geht - Man kann jeden "CatLevel" individuell gestalten.

Ein bisschen "Gefummel" mit CSS bleibt nicht aus, aber das ist bei allen "hierarchisch geschachtelten" Listen so. Denn was Du für

.CatLevel1 a { ... ANWEISUNGEN ... }

festlegst, gilt auch für alle a's innerhalb von CatLevel2, weil CatLevel2 ja innerhalb von CatLevel1 zu finden ist. Das, was für alle CatLevel2 a's anders sein soll, muss man wieder konkret angeben.

Oder andere Herangehensweise - Alle Hauptkategorien sollen Rot sein, alle Nicht-Hauptkategorien wieder schwarz.

.CatLevel1 a { color: red }

.CatLevel1 li a { color: black }

Damit würde für alle a's innerhalb CatLevel1 gelten: "Sei rot!" - und für alle a's innerhalb CatLevel1, die zusätzlich noch innerhalb eines weiteren li's liegen, würde wieder gelten "Sei schwarz!" - damit hätte man mit EINER "weiteren Regel" alle weiteren "Unterkategorien" im Gegensatz zu der Hauptkategorie wieder "schwarz gemacht".

Da man (je nachdem, was man für eine Gestaltung haben möchte) wirklich unzählige verschiedene Möglichkeiten hat, sein Stylesheet "aufzuziehen", habe ich auf ein "Muster"-Stylesheet verzichtet.

Das andere mit den "true" "false" "1-5" - was genau möchtest Du denn erreichen? Schreib einfach mal, dann kann ich Dir sagen, ob das mit "Advanced Show Category" geht oder nicht - und wenn ja, wie das geht.

:-)

[devran]

Dochdoch, das geht - Man kann jeden "CatLevel" individuell gestalten.

Ein bisschen "Gefummel" mit CSS bleibt nicht aus, aber das ist bei allen "hierarchisch geschachtelten" Listen so. Denn was Du für

.CatLevel1 a { ... ANWEISUNGEN ... }

festlegst, gilt auch für alle a's innerhalb von CatLevel2, weil CatLevel2 ja innerhalb von CatLevel1 zu finden ist. Das, was für alle CatLevel2 a's anders sein soll, muss man wieder konkret angeben.

Oder andere Herangehensweise - Alle Hauptkategorien sollen Rot sein, alle Nicht-Hauptkategorien wieder schwarz.

.CatLevel1 a { color: red }

.CatLevel1 li a { color: black }

Damit würde für alle a's innerhalb CatLevel1 gelten: "Sei rot!" - und für alle a's innerhalb CatLevel1, die zusätzlich noch innerhalb eines weiteren li's liegen, würde wieder gelten "Sei schwarz!" - damit hätte man mit EINER "weiteren Regel" alle weiteren "Unterkategorien" im Gegensatz zu der Hauptkategorie wieder "schwarz gemacht".

Da man (je nachdem, was man für eine Gestaltung haben möchte) wirklich unzählige verschiedene Möglichkeiten hat, sein Stylesheet "aufzuziehen", habe ich auf ein "Muster"-Stylesheet verzichtet.

Das andere mit den "true" "false" "1-5" - was genau möchtest Du denn erreichen? Schreib einfach mal, dann kann ich Dir sagen, ob das mit "Advanced Show Category" geht oder nicht - und wenn ja, wie das geht.

:-)

Also ich danke für dein Antwort aber du hast mich immer noch nicht verstanden.

Mein Problem ist nicht mit CSS, weil das ist kein Problem für mich.

Sondern was PHP teil angeht wo die Kategorien einfach getrennt sind.

Ich möchte z.B. sowas hier haben.

Man hat, nehmen wir mal an 3 Hauptkategorien.

Z.B. Bücher, Filme, Musik.

Und die Unterkategorie zu Bücher hätte man z.b. sub_bücher1, sub_bücher2

und für Filme z.b. sub_filme1, sub_filme2, sub_filme3 usw.

und für Musik das gleiche z.B.

So nun möchte ich ein Box in meinem Shop haben, wo nur diese Kategorien drin sind. (Bücher, Filme, Musik) und nichts anderes (keine Unterkategorien !!!).

Dann möchte ich noch ein weitere Box haben, wo wenn ich auf Bücher klicke in der anderen Box sollen alle Subkategorien von den Büchern wie z.B. sub_bücher1, sub_bücher2 angezeigt werden.

Wenn ich jetzt auf Filme klicke in der Hauptkategorie Box, dann sollen entsprechend die Unterkategorien

wie z.B. sub_filme1, sub_filme2, sub_filme3 usw. in der 2. Box drin sein.

Versteht ihr jetzt was ich meine ???

Also so schwer ist das bestimmt nicht zu verstehen oder ???

Nur mit dem Skript geht es nicht und das was ich oben schildere - da reicht definitive keine CSS Lösung.

Denn ich will ja erst mal nicht die style etc ändern das kommt später...

Sondern erst die Kategorie Struktur !!!

Das sind 2 verschiedene paar Schuhen...

Bitte um Hilfe !!!

MfG

Devran

[dukie6666]

Nur mit dem Skript geht es nicht und das was ich oben schildere - da reicht definitive keine CSS Lösung.

Dann solltest Du Deine css Kenntnisse verbessern.

Du kannst doch die Subkategorien an einer anderen Stelle des Templates positionieren. (Somit kannst Du eine weitere Box "simulieren")

[devran]

Dann solltest Du Deine css Kenntnisse verbessern.

Du kannst doch die Subkategorien an einer anderen Stelle des Templates positionieren. (Somit kannst Du eine weitere Box "simulieren")

Okay und wie schneide ich die subkategorien via CSS und platziere sie wo anders hin ???

MfG

Devran

[dukie6666]

z.B. hier:

http://www.css4you.de/position.html

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

[pufaxx]

Stimmt schon, in unterschiedlichen Boxen wird die Kategorien-Navi nicht ausgegeben. Hab momentan ein bisschen zu viel anderes zu tun, aber eine "echte" Ausgabe in "echten" unterschiedlichen Boxen wäre schon was Feines - beispielsweise für eine Navigation mit "Reitern" horizontal - und die Unterkategorien wieder vertikal in der Seitenspalte.

Mit ein bisschen "Getrickse" geht das aktuell aber auch mit CSS - ich hatte als Kommentar ein Beispiels-Stylesheet geschrieben.

Musst Du mal ausprobieren.

:-)

[devran]

Stimmt schon, in unterschiedlichen Boxen wird die Kategorien-Navi nicht ausgegeben. Hab momentan ein bisschen zu viel anderes zu tun, aber eine "echte" Ausgabe in "echten" unterschiedlichen Boxen wäre schon was Feines - beispielsweise für eine Navigation mit "Reitern" horizontal - und die Unterkategorien wieder vertikal in der Seitenspalte.

Mit ein bisschen "Getrickse" geht das aktuell aber auch mit CSS - ich hatte als Kommentar ein Beispiels-Stylesheet geschrieben.

Musst Du mal ausprobieren.

:-)

Ja habe ich doch recht...

Welche Stylesheets hast du denn geschrieben ???

Könntest du die eventuell veröffentlichen ???

Wäre dir sehr dankbar...

Ja mit den absolute verten via CSS die Boxen zu trennen ist keine professionelle Lösung und abgesehen davon kann man diese absolut werte nicht überall anwenden.

Also Anwenden schon aber meistens ist es so, dass die restlichen Layouts bei mir vor alle dann sich verschieben und verzerren.

Also ist es keine Richtige Lösung mit CSS.

Bitte um Hilfe !!!

MfG

Devran

[pufaxx]

Die "CSS-Lösung" hat den Nachteil, dass sie auf "position: absolute" basiert - und alles, was "absolut" positioniert ist, hat gewissermaßen "keine Ausdehnung" - so werden nachfolgende Elemente nicht "nach unten verschoben".

Für eine wirklich "saubere" Lösung müsste man also zwei wirklich getrennte Navigationen erzeugen. Momentan bin ich aber ein bisschen in Zeit- /Termin- /Projektdruck - ich guck mal, ob ich am Wochenende eine etwas "universeller einsetzbare" Variante zustande bringe.

:-)

[devran]

Die "CSS-Lösung" hat den Nachteil, dass sie auf "position: absolute" basiert - und alles, was "absolut" positioniert ist, hat gewissermaßen "keine Ausdehnung" - so werden nachfolgende Elemente nicht "nach unten verschoben".

Für eine wirklich "saubere" Lösung müsste man also zwei wirklich getrennte Navigationen erzeugen. Momentan bin ich aber ein bisschen in Zeit- /Termin- /Projektdruck - ich guck mal, ob ich am Wochenende eine etwas "universeller einsetzbare" Variante zustande bringe.

:-)

Oh endlich jemand der mich versteht und weis wie CSS funktioniert.

Denn ich bin und war der gleiche meinung.

Öhm ja okay wäre dir sehr dankbar, wenn du mir da helfen könntest.

MfG

Devran

[pufaxx]

*g*

... wie sagte nicht der gute Herr Mittermeier so richtig: "Mir pum, maf mir kömmem."

Do you have an Auslandskrankenschein?

:-)

[devran]

Hi,

wollte noch mal nach fragen wie weit die Lösung nun geworden ist.

Oder hat jemand es irgendwie anders gelöst ???

Brauche dringend Hilfe, wer kann mir hier Helfen ???

MfG

Devran

[pufaxx]

Ist eigentlich gar nicht so schwer. Man kann die entsprechenden Funktionen und Dateien verdoppeln und beide gleichzeitig mit verschiedenen Einstellungen benutzen.

Duplizier die "xtc_show_category.inc.php" und benenne sie um in meinetwegen ... "xtc_show_topcategory.inc.php" ... Die Datei öffnen und darin natürlich die Funktion "xtc_show_category" umbenennen, ein paar "globale" Variablen nicht vergessen, dass sich die Navis nachher nicht "gegenseitig stören" ...

Entsprechend mit der "categories.php" im Ordner "boxes" vorgehen - in "topcategories.php" umbenennen - und (wichtig) die Smarty-Zuweisungen ändern und zwar auf eine "box_topcategories.html" (die "box_categories.html" einfach kopieren, da muss man nichts weiter ändern) - und auch da wieder ein bisschen auf die "neue Box" anpassen.

Wenn alles klappt, kannst Du dann im Template sowohl {$box_CATEGORIES} als auch mit {$box_TOPCATEGORIES} eine KatNavi erzeugen. Und beide können unterschiedliche "Einstellungen" von wegen Ein-Ausklappen und so weiter haben.

So. Hälfte geschafft - Eine der beiden Funktionen brauchst Du ja für deine "Reiter" oben. Nehmen wir mal die "xtc_show_topcategory.inc.php" (passt vom Namen her ganz gut)

:-)

"Einstellungen" sind

$MaxLevel = 1;

$HideEmpty = true oder false (nach Wunsch)

$ShowAktSub = false;

Achtung übrigens - Die Variablen sind als globale Variablen angelegt. Also durchgängig umbenennen, z.B. $topMaxLevel oder so ...

Okay, jetzt {$box_TOPCATEGORIES} ausschließlich die erste Ebene an. Damit wäre die Hälfte geschafft.

Jetzt muss man noch der anderen KatNavi beibringen, eben genau diese erste Eben "auszulassen" - Musst Du einfach mal gucken. Zusätzlich zum $MaxLevel ein $MinLevel als "Einstellungsmöglichkeit" einführen und entsprechend ob $level > 1 ist, den $categories_string erweitern oder eben nicht.

Probier's mal - Das geht ...

Allerdings gibt's hier und da noch falsch verschachteltes HTML. Und eigentlich find ich es auch nicht so elegant, die Category-Dingsens zu duplizieren - Das sollte man auch mit EINER Funktion bewerkstelligen können. (Code-Beispiel hier erstmal noch nicht, weil Baustelle und in der "HTML-Ausgabe wackelig")

Elegantere Lösung folgt. Ist vermutlich sogar noch ein bisschen leichter, denn im Grunde genommen müsste man bloß alles, was $level1 hat in einer anderen Variablen sammeln als alles, was "drüber" ist - Und dann in der "categories.php" entsprechend neue "Boxen" damit bestücken.

Also wie gesagt - oben beschriebener Weg funktioniert problemlos - Geht aber sicherlich auch noch eleganter. Und da ich eh vor habe, der Advanced Show Category ein paar mehr "Einstellungsmöglichkeiten" mit auf den Weg zu geben - Warum nicht auch gleich eine "Trennung" ...?

:-)

(Sorry, ich war letzte Woche ganz gut "vergrippt" und nu is Hektik in Fürth ... Ausführliche Anleitung mach ich dann besser Ruhe)

[pufaxx]

Vergessen: die Naviliste hat die ID "CatNavi" - Eine von beiden muss auch umbenannt werden, denn erstens wäre das ein HTML-Fehler und zweitens hätte man sonst probleme in Sachen CSS.

...

[devran]

Vergessen: die Naviliste hat die ID "CatNavi" - Eine von beiden muss auch umbenannt werden, denn erstens wäre das ein HTML-Fehler und zweitens hätte man sonst probleme in Sachen CSS.

...

Hi,

wow danke für deine Hilfe aber ich habe das schon so ähnlich gelöst, hatten beide die gleiche gedanke gehabt.

Und es funktioniert perfekt...

Aber habe eine andere frage die bezüglich diese Sache betrift.

Wenn ich auf z.b. auf Hauptkategorie geklickt habe möchte ich dass das bei den Subkategorien (unterkategorien) immer der ausgewählte Hauptkategorie Name angezeigt wird.

Nur das Porblem ist das, wenn ich z.b. auf Subsubkategorie also schon bei $level 3 bin ändert sich angezeigte Kategorietitel im Subkategorie...

Bekomme nie den Hauptkategorienamen nicht gespeichert.

Habe das auch mit $_SESSION versucht aber vergebens.

Hast du oder jemand hier eine Idee vielleicht ???

Würde mich sehr auf jede kleine Hilfe von euch freuen !!!

MfG

Devran

[pufaxx]

Dazu muss man den Namen der Hauptkategorie erst einmal ermitteln - Lass Dir im Template mal $GLOBALS['cPath'] ausgeben, da steckt der komplette "Kategorien-Pfad" drin. Also in Form der IDs, durch Unterstrich getrennt.

Wenn Du alles ab dem ersten Unterstrich abschneidest, hast Du die ID der "ersten" Kategorie im Pfad.

Den dazugehörigen Namen muss man dann aber neu aus der Datenbank holen, der ist in untergeordneten Kategorien nicht mehr "bekannt".

.

.

.

.

Sorry, nee - geht viel einfacher - in $GLOBALS[breadcrumb]->_trail steckt auch ohne Datenbank-Abfrage alles drin, was Du zum Anzeigen der übergeordneten Kategorien brauchst.

[devran]

Dazu muss man den Namen der Hauptkategorie erst einmal ermitteln - Lass Dir im Template mal $GLOBALS['cPath'] ausgeben, da steckt der komplette "Kategorien-Pfad" drin. Also in Form der IDs, durch Unterstrich getrennt.

Wenn Du alles ab dem ersten Unterstrich abschneidest, hast Du die ID der "ersten" Kategorie im Pfad.

Den dazugehörigen Namen muss man dann aber neu aus der Datenbank holen, der ist in untergeordneten Kategorien nicht mehr "bekannt".

.

.

.

.

Sorry, nee - geht viel einfacher - in $GLOBALS[breadcrumb]->_trail steckt auch ohne Datenbank-Abfrage alles drin, was Du zum Anzeigen der übergeordneten Kategorien brauchst.

Wow danke für die schnelle antwort aber ich habe das was ich haben wollte gelöst...

Meinte nicht zwar das aber trotzdem tausend dankeschön.

Oh cool, woher bekommst du eigentlich das alles so raus ???

Ich meine das mit dem $GLOBALS[breadcrumb]->_trail usw.

Ich habe noch eine frage.

Wie bekomme ich von der Subkategorie NUR den obersten Subkategorie mit den dazu gehörigen Links raus ???

Weil möchte was drittes in das shob einbinden.

Würde mich sehr auf dein Hilfe freuen !!!

MfG

Devran