Magento 1.9 – Thumbnails / Icons für Kategorien hinterlegen und in der Oberkategorie anzeigen

Wir haben einen Shop der verschiedene Marken mit jeweils eigenem Logo anbietet. Nun wollten wir für jede Markenkategorie das jeweilige Logo als Icon / Thumbnail hinterlegen können, um dann in der Oberkategorie “Marken” alle Logos mit Namen der jeweiligen Marken anzuzeigen.

In Magento 1.9 ist die Möglichkeit neben einem Bild auch ein Thumbnail pro Kategorie zu hinterlegen nicht mehr enthalten. In 1.8 ging dies noch.

Um nun im ersten Schritt diese Möglichkeit wieder zu aktivieren, muss ein neues Attribut für die Kategorien integriert werden. Dies tun wir durch drei SQL-Befehle direkt in der Datenbank.

INSERT INTO `eav_attribute` (`attribute_id`, `entity_type_id`, `attribute_code`,`attribute_model`, `backend_model`, `backend_type`, `backend_table`, `frontend_model`,`frontend_input`, `frontend_label`, `frontend_class`, `source_model`, `is_required`,`is_user_defined`, `default_value`, `is_unique`, `note`) VALUES(120, 3, 'thumbnail', NULL,'catalog/category_attribute_backend_image', 'varchar', NULL, NULL, 'image', 'Thumbnail', NULL, NULL, 0, 0, NULL, 0, NULL);

INSERT INTO `catalog_eav_attribute` (`attribute_id`, `frontend_input_renderer`,`is_global`, `is_visible`, `is_searchable`, `is_filterable`, `is_comparable`,`is_visible_on_front`, `is_html_allowed_on_front`, `is_used_for_price_rules`,`is_filterable_in_search`, `used_in_product_listing`, `used_for_sort_by`,`is_configurable`, `apply_to`, `is_visible_in_advanced_search`, `position`,`is_wysiwyg_enabled`, `is_used_for_promo_rules`) VALUES (120, NULL, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, NULL, 0, 0, 0, 0);

INSERT INTO `eav_entity_attribute` (`entity_attribute_id`, `entity_type_id`,`attribute_set_id`, `attribute_group_id`, `attribute_id`, `sort_order`) VALUES (337, 3, 3, 4, 120, 3);

Wichtig ist hierbei, dass die ID des neuen Attributes individuell pro Shop festgelegt werden muss. Daher im zuvor in die Tabelle eav_attribute gehen und dort schauen welche ID als letztes vergeben wurde (z.B. 2 x auf die erste Spaltenüberschrift “attribute_id” klicken, um die größte ID oben stehen zu haben) und dann die nächste anstelle der oben in den Befehlen hinterlegten 120 nehmen (in jedem Befehl!).

Anschließend ausführen.

Nun ist das neue Attribut in der Kategorie-Verwaltung vorhanden und es können Thumbnails hinterlegt werden.

Um nun die Icons der Unterkategorien in einem Gitter auf der Oberkategorie-Seite angezeigt zu bekommen, wird nun per FTP auf die Shopinstallation zugegriffen und eine neue Datei erstellt und zwar

/app/design/frontend/rwd/drinksandco/template/catalog/category/cat-thumbs.phtml

In diese Datei packen wir folgenden Content:

<?php
$category = Mage::getSingleton('catalog/layer')->getCurrentCategory();
$categories = $category->getCollection()
        ->addAttributeToSelect(array('name', 'thumbnail'))
        ->addAttributeToFilter('is_active', 1)
        ->addIdFilter($category->getChildren())
        ->addAttributeToSort('position');
?>
<ul class="subcategories">
    <?php foreach ($categories as $category): ?>
        <li>
            <a href="<?php echo $category->getUrl() ?>"><img src="<?php echo Mage::getBaseUrl('media') . 'catalog' . DS . 'category' . DS . $category->getThumbnail() ?>" alt="<?php echo $this->htmlEscape($category->getName()) ?>" /></a>
        </li>
    <?php endforeach; ?>
</ul>

Möchte man den Namen der Kategorie noch unter dem Logo haben, kann man noch diese Zeile vor dem schließenden </a> einbauen

<span><?php echo $category->getName() ?></span>

Nun erstellen wir einen neuen Statischen Block mit dem Namen “Cat-Thumbs” (oder wie man möchte) und dem Code “cat-thumbs”.

Der Inhalt dieses Blocks ist dann

{{block type="core/template" template="catalog/category/cat-thumbs.phtml"}}

Dann wird in der gewünschten Oberkategorie unter” “Display Settings” entweder “Nur statische Block” gewählt wenn ausschließlich die Unterkategorien aus dem Statischen Block dargestellt werden sollen. Sollen aber zusätzlich noch Produkte angezeigt werden, wäre die korrekte Einstellung “Statischer Block und Artikel”.

So oder so wählt man dann darunter im Dropdown den gerade erstellten Block und speichert.

Als letztes kommt es noch darauf an die Seite hübsch zu machen. Dazu kann man sich dann mit CSS die Anzeige so anpassen, dass es gefällt.

Eine Möglichkeit wäre z.B.

.subcategories li {
    float: left; 
    display: block; 
    margin: 25px;
}
.subcategories li span {
    display: block; 
    margin: 8px 0;
}
.subcategories {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

Man kann dies aber natürlich noch sehr viel weiter ausarbeiten.

Fertig!

Wer Probleme mit der Anzeige der konkreten Unterkategorien hat, kann bei den Kommentaren auf dieser Seite evtl. Hilfe finden.