Colors Swatches in der Layered Navigation

Die Layered Navigation, ein mächtiges Tool von Magento, möchte ich heute etwas anpassen. Und zwar möchte ich bei Farbwerten anstatt der Textes ein Bild für die Farbe anzeigen.

Die Datei app/design/frontend/[Ihr Interface]/[Ihr Theme]/template/catalog/layer/filter.phtml ist für die Anzeige der Attribute zuständig.

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>
        <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?></a>
        (<?php echo $_item->getCount() ?>)
    </li>
<?php endforeach ?>
</ol>

Hier werden die Werte der Attribute ausgegeben, verlinkt und in der Datei view.phtml, ein Verzeichnis zurück, wir der Name der Attribute mit der Fukntion getName() ausgegeben. Ich frage einfach den Namen des Attributes ab, und kann somit eine individuelle Ausgabe für jedes Attribut und deren Werte erstellen.
Die Bilddaten sollen im Verzeichnis media/colors verwaltet werden. Die Bezeichnung der Dateinamen ergibt sich aus der Bezeichnung für die Attribute. Red.jpg,Blue.jpg,Green.jpg, …

Also stellen wir unser Template wie folgt um:

<ol>
   <?php if (trim($this->getName()) == 'Color') : ?>
     <li style="margin-top: 4px;">
       <?php foreach ($this->getItems() as $_item): ?>
         <a href="<?php echo $_item->getUrl() ?>"><IMG alt="<?php echo $_item->getLabel(); ?>" title="<?php echo $_item->getLabel(); ?> (<?php echo $_item->getCount() ?>)" src="<?php echo Mage::getUrl();?>media/colors/<?php echo $_item->getLabel() ?>.png"></a>
       <?php endforeach ?>
     </li>
   <?php else: ?>
     <?php foreach ($this->getItems() as $_item): ?>
       <li>
         <a href="<?php echo $_item->getUrl() ?>"><?php echo $_item->getLabel() ?></a>
        (<?php echo $_item->getCount() ?>)
       </li>
     <?php endforeach ?>
   <?php endif ?>
</ol>

Nachdem Sie die Bilddaten in den Ordner media/colors kopiert haben, erscheint die Layered Navigation in dem neuen Outfit.

8 Kommentare to “Colors Swatches in der Layered Navigation”

1. ds_1984 sagt:

   13. August 2009 um 21:51

   Das sorgt echt mal für Abwechslung in der Layered Navigation. Danke!

   http://www.tutorials.golox.eu/electronics/computers.html

   LG - Daniel

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     13. August 2009 um 22:55

     Das muss nun nicht auf Farben beschränkt sein. Das können auch Formen; Oberflächen und sonstige Icons sein. Denn über Piktogramme kann sich das Auge des Betrachters besser zurecht finden. Mit Bildsignalen zu arbeiten ist immer besser als mit Text.

     Grüße
     Johannes Teitge

     Zum Antworten anmelden
2. danoh sagt:

   17. August 2009 um 11:52

   WOW!

   Das ist gute Arbeit, gut gemacht. Wie könnte dies auf die tatsächlichen Produkt-Seite?

   Zum Antworten anmelden
3. Links der Woche 34/09 – diesmal etwas mehr… | Webdesign & Online Shops | Kai Köpke Blog & Portfolio sagt:

   20. August 2009 um 16:00

   [...] Hier zeigen die Mxperts, wie man in Magentos Layered Navigation für Farbwerte statt Text, Bilder in der jeweiligen Farbe zeigen kann. Gefällt mir… Colors Swatches in der Layered Navigation [...]

   Zum Antworten anmelden
4. Haengesessel Joe sagt:

   3. Oktober 2009 um 13:35

   Hätte dazu zwei Fragen
   1.) Wie mache ich es, dass die Bilder in skin/frontend/default/theme_name/catalog/layer/.. liegen?
   Da würden sie hingehören oder?

   2.)
   $_item->getLabel() ?>.png”>
   Mit dem Commando wird ja das Icon in der jeweiligen Sprache am Server gesucht. d.h. man müsste ein icon rot.png, eines red.png, usw. anlegen.
   Wie kann man da den adminwert nehmen? Sodass man das File nur mehr einmal anlegen muss? d.h. yellow.png, red.png usw…

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     3. Oktober 2009 um 16:12

     Zu erstens kannst Du die Funktion $this->getSkinUrl(… verwenden.
     Zur zweiten Frage müsste ich auch erst mal nachsehen - wäree was fürs Forum

     Gruß
     Johannes Teitge

     Zum Antworten anmelden
5. tik sagt:

   25. Dezember 2009 um 15:09

   Hello Mr. Johannes !

   I wanted to thank you for this awesome piece of code which really helped me and of course wish you happy holidays

   I have a question regarding this , maybe someone asked already for it but my German isn’t that good so I hope you can help me.

   I would like to add another item which has to be replaced by images.

   I’ll show you here my piece of code of the filter.php file , I added an item called “Item2″ underneath your Color modification, but once I do this I get an error.

   getName()) == ‘Color’) : ?>

   getItems() as $_item): ?>
   <a href=”getUrl() ?>”><IMG alt=”getLabel(); ?>” title=”getLabel(); ?> (getCount() ?>)” src=”mywebistegetLabel() ?>.png”>

   getName()) == ‘Item2′) : ?>

   getItems() as $_item): ?>
   <a href=”getUrl() ?>”><IMG alt=”getLabel(); ?>” title=”getLabel(); ?> (getCount() ?>)” src=”mywebsitegetLabel() ?>.png”>

   getItems() as $_item): ?>

   <a href=”getUrl() ?>”>getLabel() ?>
   (getCount() ?>)

   Once I upload the file like this I get an error. Is there another way to have this code working ?

   Thank you , and best regards,
   Tik

   Zum Antworten anmelden
6. b_nice sagt:

   2. April 2010 um 10:57

   Ich bin schon lange auf der Suche nach einer “Shop By Color” Umsetzung für die Startseite oder den Sidebar, bin allerdings noch nicht fündig geworden. Die Color Swatches für den Filter sind da schon eine schöne Sache und führen zumindest in den Ankerkategorien zum gleichen Komfort für den Kunden.

   Was ich nicht umgesetzt kriege sind die dt. Übersetzungen. Mein Attribut “Color” hat z.B. folgende Übersetzungen:

   black -> schwarz
   white -> weiß
   green -> grün

   Bei einem Umlaut wie “ß” oder “ü” erfolgt kein Aufruf eines swatches, egal in welcher Schreibweise das Bild hinterlegt wurde.

   Stefan Pröhl hat für seine Umsetzung der Hersteller-Logos eine Umformung von Umlauten eingebaut - das wäre eine schöne Lösung.

   Eine andere feine Sache wäre die Anpassung der state.phtml damit dort ebenfalls die color swatches angezeigt werde. Wie würde da der Code aussehen?

   Vielen Dank für die tolle Arbeit!

   Sven

   Zum Antworten anmelden