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.
ln_screen_small

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.

ln_screen



Viele Grüße und ein schönes Wochenende
Johannes Teitge