如何在 Magento > 1.7 中向导航添加类别图像/缩略图

Question

I've seen a few solutions to this funcionality request for versions of Magento < 1.7 but none for the version I am using. Since in v1.7 the navigation template was moved from top.phtml to \\app\\design\\frontend\\THEME\\TEMPLATENAME\\template\\page\\html\\topmenu.phtml the solutions I have seen are no longer applicable.

I just want to be able to output the category image (uploaded through the admin interface) within the native category menu dropdown. The dropdown structure and layout is done and works as I want it, minus the image.

Answer 1

You will need to override / replace Mage_Catalog_Model_Observer.

Simplest way is to copy Mage_Catalog_Model_Observer (app/code/core/Mage/Catalog/Model/Observer.php) to:

 app/code/local/Mage/Catalog/Model/Observer.php

You can then modify: _addCategoriesToMenu()

Add the image into the data:

$categoryData = array(
    'image_url' => $category->getImageUrl(), // or thumbnail if you wanted.
    'name' => $category->getName(),
    'id' => $nodeId,
    'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
    'is_active' => $this->_isActiveMenuCategory($category)
);

this data will then be available inside the Navigation block. you will also need to override this block: copy app/code/core/Mage/Catalog/Block/Navigation.php to

app/code/local/Mage/Catalog/Block/Navigation.php

modify the _getHtml() method to add the image into the markup as required.

the image url will be available via the node, like this:

$child->getImageUrl(); // or
$child->getData('image_url');

Answer 2

This solution is for Magento -1.8.*

In Model file. (/app/code/core/Mage/Catalog/Model/Observer.php)

Update following code in Function Name: _addCategoriesToMenu

 $categoryData = array( 
        'name' => $category->getName(),
        'id' => $nodeId,
        'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
        'is_active' => $this->_isActiveMenuCategory($category),
        'thumbnail' => Mage::getModel('catalog/category')->load($category->getId())->getThumbnail()

);

Then go into Html folder. (app/code/core/Mage/Page/Block/Html/Topmenu.php)

Update the following line of code at line 128 in

Function name: _getHtml

$urls = Mage::getBaseUrl('media').'catalog/category/'.$child->getData('thumbnail');
$img = '<img src="'.$urls.'" />';

$html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
$html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>'
        . $this->escapeHtml($child->getName()) . ' </span> '.$img.' </a>';