Magento Kategorien mit Thumbnail und Titel

Wer in Magento auf einer CMS-HTML Seite im Template eine Templateliste ausgeben lassen möchte, kann dies wie in diesem Beispiel umsetzen. Anforderung war hier, dass ein Bild über die Thumbnailfunktion ausgewählt werden sollte. Man kann die Abrage auch umschreiben, so dass das Kategoriebild genutzt werden kann. Dies wird jedoch in unserem Template an einer anderen Stelle mit anderen Inhalten schon verwendet.  Daher nutzen wir einfach die Thumbnail-Bildfunktion.

getascript

Anzeige

Hier der Code: Getestet und Entwickelt mit Magento CE 1.8.1 Der Code kann in ein beliebiges Template eingesetzt und z.B. als Statischer-Block ausgegeben werden.

<?php
$_category = Mage::getModel('catalog/category')->load(2);
$_categories = $_category
    ->getCollection()
    ->addAttributeToSelect(array('name', 'entity_id', 'image', 'description', 'thumbnail'));
echo '<ul id="CategoryOverview">';
$i_cat = 0;
foreach ($_categories as $_category) :
    $CatId            = $_category->getId();
    $CatName      = $_category->getName();
    $CatUrl          = $_category->getUrl();
    $CatThumbnnail        = $_category->getThumbnail();
    if ($_category->getThumbnail() != '') {
        $CatThumbnnailPath = '/media/catalog/category/'.$_category->getThumbnail();
        $i_cat++;
        $last ='';
        echo '<li class="CatItem">
      <a href="'.$CatUrl.'" alt="'.$CatName.'"><img src="'.$CatThumbnnailPath .'" title="'.$CatName.'" alt="'.$CatName.'" width="290"  /></a></li>';
    }
endforeach;
echo '</ul>';
?>

 

Erklärung:

Abfrage In Zeile 3 muss die Wunschkategorie, ab der geprüft werden soll, ob eine Kateogie ein Thumbnail besitzt angegeben werden. Hat eine Kategorie ein Thumpnail, so wird es lt. Script angezeit. Die Bedingung dafür ist in Zeile 19. Performance Die Collection der Kategorieabfrage wurde auf das nötigste reduziert, um Ladezeit zu sparen. Werden weitere Informationen zur Kategorie gebraucht, kann man diese dem Filter in Zeile 7 hinzufügen. CSS In Zeile 23 wird mit ” $i_cat % 3 === 0 ” definiert, dass alle 3 Kategorien ein Element die CSS Klasse “last” bekommt, so dass man bequem mit CSS einen Umbuch erzeugen kann.

#CategoryOverview {clear:both;overflow:hidden}
#CategoryOverview div.CatItem {float:left;margin-right:40px;margin-bottom:30px;}
#CategoryOverview div.last {float:left;margin-right:0;}
#CategoryOverview div.CatItem .CatName {background:#fff;color:#fff;padding:5px;display:block;border-left:1px solid #ccc;border-top:1px solid #ccc;border-right:1px solid #ccc;-webkit-transition:.3s;-moz-transition:.3s;transition:.3s}
#CategoryOverview div.CatItem .CatName a {display:block;color:#666;font-size:15px}
#CategoryOverview div.CatItem img {opacity:0.85;-webkit-transition:.3s;-moz-transition:.3s;transition:.3s;}
#CategoryOverview div.CatItem:hover img {opacity:1;}
#CategoryOverview div.CatItem:hover .CatName a {color:#a9a172}

 

Repository on BitBucket
{{bitbucket:dermatz,sortby:updated,sortdir:desc}}

Titelbild:
Stefan Schwarz  / pixelio.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren

Menü