Adventskalender 2011
xt:C und semantisch korrekter Code
16.11.2006
26 Kommentare
Zwei Welten prallen aufeinander. Definitiv. Aber bevor man sich an irgendwelche Erweiterungen für xt:Commerce macht sollte man erstmal den absolut grausigen Quellcode ausmisten.
Ein besonderes Übel stellt die Kategorien-Navigation dar. Verschachtelte Tabellen, über Non-Breaking-Spaces erreichte Einrückungen, Hover-Effekte mittels Javascript, Web-Design aus der Steinzeit quasi.
<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"/> <b><a href="#"><b>Kategorie I</b></a></b><br /> - <a href="#">Unterkat I</a><br /> - <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"/> <b><a href="#">Kategorie II</a></b><br /> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>
Zum Glück haben das auch schon andere erkannt und so musste ich nicht alles neu schreiben, bei gunnART findet sich dankenswerterweise bereits eine geänderte xtc_show_category.inc.php. Die hat nur einen Schönheitsfehler: Die Listen sind nicht ineinander verschachtelt, wenn es gilt, tiefere Ebenen darzustellen, wird das ganze lediglich durch CSS und damit nur optisch erreicht:
<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>
Sicherlich schon ein riesiger Fortschritt, wenn man sich es mit dem ursprünglichen Tabellenchaos vergleicht, aber noch nicht der Weisheit letzter Schluß. Das ist mein php-Code möglicherweise auch nicht, der auf der Version von gunnART basiert, aber er erzeugt das, was man haben will: Listen, die korrekt ineinander verschachtelt sind, um so auch denen, die ohne oder mit deaktivierten Stylesheets durch das Web surfen, die Möglichkeit zu geben, Unterkategorien problemlos zu erkennen.
<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>
Die angepasste Version von xtc_show_category.inc.php gibt es zum Download:
Speichern, in das Verzeichnis /source/inc/ des verwendeten Templates legen, nach xtc_show_category.inc.php umbenennen, fertig.
[tags]xtc, xt:commerce, xtcommerce, semantic code, css, html, unordered lists, nested[/tags]
26 Kommentare Kommentieren
Trackbacks/Pingbacks
-
-
Saturday, 16. June 2007
[...] “hierarchische” Variante kam bald darauf von Matt Slovig – Und auch Björn Teßmann der u.a. das YAML-Framework [...]
-
-
Tuesday, 19. June 2007
[...] arne zu xt:C und semantisch korrekter Code: das ist nicht so einfach, meines erachtens :/ vielleicht kann ja jemand… [...]
-
-
Monday, 25. June 2007
[...] das Rad ungern neu, doch waren mir die Ergebnisse, die ich bei Gunnar Tillmann1 und Matthias Slovig2 fand, noch nicht genug :). Es musste noch kürzer [...]
Korrekt verschachtelt? Prima, Deinen Code werd ich auf jeden Fall ausprobieren.
Vielen Dank!
Ich hab noch etwas Feines gefunden: Wirf doch mal einen prüfenden Blick auf CubeCart.
Meinen persönlichen ersten Eindruck hab ich vorhin auf meiner Website zusammengefasst: http://www.gunnart.de/?p=196 – mehr folgt nach intensiveren Tests. Ob das System im hiesigen eCommerce-Haifischbecken für den echten, “produktiven Einsatz” tauglich ist, kann ich noch nicht sagen, dazu habe ich noch nicht genügend damit herum experimentiert. Vermutlich hilft dann die ein oder andere Frage an den Support – und vermutlich muss man hier und da in Eigenregie ein wenig nachbessern. Aber wo ist das nicht so?
Eine Test-Installation sollte CubeCart auf jeden Fall wert sein.
Viele Grüße aus Fürth,
Gunnar
Vielen vielen Dank für dieses Listing!
Mir ist noch ein kleiner Fehler aufgefallen:
Der Code
$this->ulproduziert bei mir (xt:C 3.04 SP 2) einen Fehler. Muss ich die Funktion noch in irgendeine Klasse packen? Ich habe aus diesem Konstrukt nun einfach überall eine normale Variable gemacht.
Beste Grüße,
tommy
Da sollte eigentlich auch eine normale Variable stehen, da die ausreichend ist.
Trotzdem sollte es auch mit
statt
$ullaufen, es tut es zumindest hier…
Diese
xtc_show_category.inc.php
funktioniert nicht bei mir mit XTCommerce 3.04 SP1.
Fatal error: Call to undefined function xtc_show_category() in …/source/boxes/categories.php on line 117
In Zeile 117 steht in der categories.php steht.
xtc_show_category($first_element);
Hm…
Die hier angebotene Datei enthält diesbezüglich keinen Fehler. Die bemängelte Funktion beginnt in Zeile 30.
Also am besten mal bei der eigentlichen Installation prüfen, ob mit der Datei alles korrekt ist.
sehr schöne sache mit der geschlossenen listen anordnung, jedoch komme ich mit den css klassen noch nicht klar.
es gibt haupt, unter und unterunter kategorien, jedoch wird eine “unter kat.” class mit “sub xxx” bezeichnet, und eine “unterunter kat.” auch mit “sub xxx” müßte dies nicht “subsup xxx” lauten?
kann man dies noch dazu erweitern?
classen:
main normal = Haupt Kat. ohne Unterkat.
main submenu = Haupt Kat. mit Unterkat.
sub normal = Unter Kat. ohne UnterUnter Kat.
sub submenu = Unter Kat. mit UnterUnter Kat.
sub normal = UnterUnter Kat. ohne UnterUnterUnter Kat.
sub submenu = UnterUnter Kat. mit UnterUnterUnter Kat.
Die letzten beiden zeilen sollen wohl
supsub normal = UnterUnter Kat. ohne UnterUnterUnter Kat.
supsub submenu = UnterUnter Kat. mit UnterUnterUnter Kat.
lauten, sonst haben wir ja genau das, was wir derzeit haben.
Aber andersrum wäre es eigentlich richtig, man könnte das noch verkürzen, die Unterscheidung nach main und sub ist durch die Verschachtelung gar nicht mir nötig.
Angenommen, die Liste steht in einem Container mit der id #boxCategories:
#boxCategories > ul wäre dann die Hauptkategorie.
#boxCategories > ul > li > ul die zweite Ebene usw.
Leider unterstützt der IE diesen Selektor erst ab Version 7. Daher macht es durchaus Sinn, der Hauptkategorie eine eigene Klasse zuzuweisen, um direkt auf diese zugreifen zu können.
Auf die übrigen Ebenen kann man derzeit auch ohne >-Selektor mittels #boxCategories ul ul zugreifen. Dabei muss man aber beachten, dass das dann auch für die dritte Ebene usw. gilt, also immer, wenn sich innerhalb #boxCategories eine Liste innerhalb einer Liste befindet. Diesen Umstand kann man sich aber beispielsweise zunutze machen, um jeder Liste einen linken Einzug von 1em zu verpassen, wodurch diese immer weiter einrücken, ohne die genaue Verschachtelungstiefe kennen zu müssen. Dafür würde
#boxCategories ul ul {
margin-left: 1em;
}
genügen.
hi, spitze das Teil, aber warum werden die Sublisten nicht gleich ausgegeben sondern erst auf Klick?
Kann man das nicht so umbauen das die komplette Liste sofort ausgegeben wird, also mit Unterkategorien und Unterunterkategorien…
Gruss
Michael
Hi ich habe auf shop.joundjos.de dein Script mal eingebaut. Leider sieht das jetzt aufgrund der langen Kategorienamen ziemlich schlecht aus, da der Abstand (tabstop) beim untermenü so extrem weit eingerückt wird. kann ich diesen Abstand irgendwo ändern?
Ach und die Frage von michael (ob man die kategorieansicht so ändern kann, dass unterkategorien immer angezeigt werden) interessiert mich auch brennend.
würde mich über eine antwort sehr freuen, denn aufgeräumter code gefällt mir besser *grins*
danke!
Steffan
Du kannst den Abstand über
#boxCategories ul ul {
margin-left: 1em;
}
beeinflussen. Das auf einen niedrigeren Wert (z.B. 0.2em) setzen, dann ist der linke Einzug auch nicht mehr so groß.
Zur Anzeige auch der Unterkategorien kann ich nichts sagen. Aber man könnte sich beispielsweise mal den Code anschauen, der im Admintool das entsprechende Dropdown füllt und diesen adaptieren.
Wenn ich die datei xtc_show_category.inc.php mit deiner datei überschreibe . Bekomme ich beim Aufruf des Shops nur noch den Quelltext der xtc_show_category.inc.php zu sehen
wie kann man den gerade aktiven li punkt hervorheben?
das ist nicht so einfach, meines erachtens :/
vielleicht kann ja jemand dafür eine schleife schreiben;
>Test
list_a muss nun gesondert Formatiert werden (Block; anderer Hintergrund usw..)
?id=010 ist mein “link”, welcher oben in der adressleiste stehen muss, kann natürlich gegen irgendwas anderes getauscht werden…
einfach mal testen, so habe ich es bei anderen projekten versucht zu lösen.
mfg
war gerade dabei die “old” Version von xtc zu verstehen, und bin nun hier im detail. Wie kann ich einstellen, dass nur subkategorien angezeigt werden, da ich eine topnavigation seperat habe.
gibt mir einer einen hint ? wollte schon gleich eine if-schleife mit level==1 vor if(empty..) beginnen, kriegs aber nicht gebacken,… danke.
Die oberste Ebene hat level 0.
if-Schleifen gibt es im übrigen nicht.
Sehr großes Dankeschön für dieses großartige Script. Schön, dass es für XT noch kostenloses gibt.
Funktioniert nicht mit Version v3.0.4 SP2.1.
Es wird nur der Quelltext angezeigt…
Schade,
Emil
Was dann aber eher an der Server-Config liegt und weniger an der Datei
hallo, wie programmiert man das als divmenu um so das jeder navigationspunkt ein eigenes layer erhält?
tiefe und zustand soll über background-image in der css gestaltet werden der text wird dann quasi “eingerückt”
Roberto, es gibt keinen Grund, das auf irgendwelche DIV-Suppen umzubauen, schon gar nicht unter dem Gesichtspunkt der Zugänglichkeit.
Alles, was du machen willst, lässt sich mit Listen wesentlich leichter erreichen. Jede Menge Anregungen dazu findest du hier: http://www.cssplay.co.uk/menus/
sag mal ist es auch möglich die subkategorien immer darzustellen, also praktisch auch schon auf der startseite?
Ja, aber aufgrund der Struktur der DB wird das etwas anstrengend, wenn du tief verschachtelte Unterkategorien hast.