Die “übliche” Hersteller-Box von xt:Commerce kommt - besonders, wenn die Auswahl als Select-DropDown ausgegeben wird - ein wenig “trocken” daher. Etwas schicker kann’s aussehen, die Logos anzuzeigen. Da in Select-Elementen keine Bilder enthalten sein können, muss man ein wenig tricksen. Hier die Dateien, die ich bei » UrbanTrendsetter* im Template eingebaut habe:

» gunnart_Manufacturers_LogoBox_v1.zip (Version 0.1)

*Anmerkung: Bei UrbanTrendsetter ist die Box nicht mehr in der Form drin, stattdessen gibt’s nun “Brand-Stores”

 

Installation:

  1. Das Zip-Archiv runterladen und entpacken
  2. Die Datei “source/boxes/manufacturers.php” mit der entsprechenden Datei Ihres Templates austauschen (Sicherheitskopie nicht vergessen)
  3. Die Datei “boxes/manufacturers.html” mit der entsprechenden Datei Ihres Templates austauschen (ebenfalls Sicherheitskopie anfertigen)
  4. Das war’s schon beinahe, die anderen Dateien sind eher als “Anregung” gedacht, siehe weiter unten

Wenn man damit fertig ist, hat man eine Hersteller-Box, die eine verlinkte UL-Liste mit allen Herstellern ausgibt, von denen es aktive und für die jeweilige Kundengruppe zugelassenene Artikel im Shop gibt.

Ist ein Hersteller-Logo hinterlegt, so wird dieses angezeigt, gibt es keines, dann nur der Name. Ist ein Hersteller ausgewählt, erhält der “Listenpunkt” die CSS-Klasse “Current”, so dass aktive Hersteller “markiert” werden können.

Die gebildeten Links enthalten den Hersteller-Namen, die Suchmaschinen sollte es freuen, da solche URLs schöner sind als welche à la “index.php?manufacturers_id=123″ …

 

Gestaltung:

Ohne weitere Bearbeitung des Stylesheets sieht die Geschichte natürlich noch ziemlich “mau” aus - und man hat unter Umständen eine endlos lange Liste. Um das zu vermeiden habe ich ein paar CSS-Anweisungen in der Datei “stylesheet.css” beigelegt.

Das Prinzip ist eigentlich ganz einfach:

  • Die Hersteller-Box hat die CSS-ID “BoxBrands”.
  • Das DIV innerhalb von “BoxBrands” hat eine festgelegte Höhe und breite sowie die Eigenschaft “overflow: auto”, damit ein Scrollbalken entstehen kann.
  • Das DIV innerhalb von “BoxBrands” hat die Eigenschaft “position: absolute”, damit nachfolgende Elemente nicht verdrängt werden können.
  • Damit Das Scroll-DIV nicht “irgendwo” erscheint, sondern da, wo man es erwartet, muss “BoxBrands” relativ positioniert sein (absolut würde natürlich auch klappen)
  • #BoxBrands div ist unsichtbar, #BoxBrands:hover div wird angezeigt.

 

CSS-Hover:

Leider versteht der Internet Explorer 6 (und kleiner) “:hover” nur für Links und nicht für alle HTML-Elemente. Damit auch der IE6 so reagiert, wie wir es gerne hätten, kommt man um JavaScript oder “behaviour” nicht herum.

Ich benutze für diese Zwecke sehr gerne » csshover.htc - Das Script liegt bei und muss nur in den “javascript”-Ordner des Templates hochgeladen werden. Die Datei “general.js.php” ist dann noch um die 3 Zeilen zu ergänzen, die im Zip-File zu finden sind.

 

Ich wünsche viel Spaß beim Basteln!