0

I asked a question earlier about using subcategories thumbnails as links, but I looked back and saw that I explained myself quite badly. So I'll try again. Is it possible to make a thumbnail clickable in a dropdown menu? Like this: http://i.gyazo.com/b1d0bbb65614076472a7a3f48ad08d88.png So that you can click the image instead of the text below, and then remove the text so we only have an image to click. Hope that you will be able to help me.

1

You will need to either find an extension that allows for this like the Tsdesign Menubuilder or build one yourself. Honestly your question is way too broad to give a specific and more usefull answer

1

So this is by no means a complete solution but it should give you s starting point if you want to make your own extensions.

You will need to create an extension with the files below, I have shown how to get the image data into the default menu. You will also probably need to setup another renderer if you want it to show nicely. But as an example for now if you were using the rwd theme you could change line 54 to this

$html .= '<a href="'. $child->getUrl() .'" class="'. $outermostClassCode .' '. $_hasChildren .'">'. $this->escapeHtml($this->__($child->getName()));

if(!empty($child->getImage())):
$html .= '<img width="100px" src="'.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'catalog/category/'.$child->getImage().'"/>';
endif;

$html .= '</a>';

and you will get something like

enter image description here

Since the category data is added to the Varien_Data_Tree for the categories is added via an observer we can disable to original observer and add our own which will add in the image see 'image' => $category->getImage()

And if the image is in the category collection this will make it avaliable to the menu renderer template. However first we need to add in the image to the collection and to do this we need 2 more observers one for flat category data and the other for eav category data.

app/code/local/Namespace/Thumbnailmenu/Model/Observer.php

    <?php class Namespace_Thumbnailmenu_Model_Observer
{
    /**
     * Adds catalog categories to top menu
     *
     * @param Varien_Event_Observer $observer
     */
    public function pageBlockHtmlTopmenuGethtmlBefore(Varien_Event_Observer $observer)
    {
        $block = $observer->getEvent()->getBlock();
        $this->_addCategoriesToMenu(
            Mage::helper('catalog/category')->getStoreCategories(), $observer->getMenu(), $block, true
        );
    }

    public function catalogCategoryCollectionLoadBefore(Varien_Event_Observer $observer)
    {
        $categoryCollection = $observer->getEvent()->getCategoryCollection();
        $categoryCollection->addAttributeToSelect('image'); //should probably be in a resource model
    }

    /**
     * Adds custom category attributes to flat select.
     * @param Varien_Event_Observer $observer
     */
    public function catalogCategoryFlatLoadnodesBefore(Varien_Event_Observer $observer)
    {
        $observer->getSelect()->columns(
            array('image')
        );
    }

    /**
     * Recursively adds categories to top menu
     *
     * @param Varien_Data_Tree_Node_Collection|array $categories
     * @param Varien_Data_Tree_Node $parentCategoryNode
     * @param Mage_Page_Block_Html_Topmenu $menuBlock
     * @param bool $addTags
     */
    protected function _addCategoriesToMenu($categories, $parentCategoryNode, $menuBlock, $addTags = false)
    {
        $categoryModel = Mage::getModel('catalog/category');
        foreach ($categories as $category) {
            if (!$category->getIsActive()) {
                continue;
            }

            $nodeId = 'category-node-' . $category->getId();

            $categoryModel->setId($category->getId());
            if ($addTags) {
                $menuBlock->addModelTags($categoryModel);
            }

            $tree = $parentCategoryNode->getTree();
            $categoryData = array(
                'name' => $category->getName(),
                'id' => $nodeId,
                'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
                'is_active' => $this->_isActiveMenuCategory($category),
                'image' => $category->getImage()
            );

            $categoryNode = new Varien_Data_Tree_Node($categoryData, 'id', $tree, $parentCategoryNode);
            $parentCategoryNode->addChild($categoryNode);

            $flatHelper = Mage::helper('catalog/category_flat');
            if ($flatHelper->isEnabled() && $flatHelper->isBuilt(true)) {
                $subcategories = (array)$category->getChildrenNodes();
            } else {
                $subcategories = $category->getChildren();
            }

            $this->_addCategoriesToMenu($subcategories, $categoryNode, $menuBlock, $addTags);
        }
    }

    /**
     * Checks whether category belongs to active category's path
     *
     * @param Varien_Data_Tree_Node $category
     * @return bool
     */
    protected function _isActiveMenuCategory($category)
    {
        $catalogLayer = Mage::getSingleton('catalog/layer');
        if (!$catalogLayer) {
            return false;
        }

        $currentCategory = $catalogLayer->getCurrentCategory();
        if (!$currentCategory) {
            return false;
        }

        $categoryPathIds = explode(',', $currentCategory->getPathInStore());
        return in_array($category->getId(), $categoryPathIds);
    }


}

app/code/local/Namespace/Thumbnailmenu/etc/config.xml

    <?xml version="1.0" ?>
<config>
    <modules>
        <Namespace_Thumbnailmenu>
            <version>0.1.0</version>
        </Namespace_Thumbnailmenu>
    </modules>

    <global>
        <helpers>
            <namespace_thumbnailmenu>
                <class>Namespace_Thumbnailmenu_Helper</class>
            </namespace_thumbnailmenu>
        </helpers>

        <models>
            <namespace_thumbnailmenu>
                <class>Namespace_Thumbnailmenu_Model</class>
            </namespace_thumbnailmenu>
        </models>
    </global>

    <frontend>
        <events>

            <!-- Disable Default topmenu observer-->
            <page_block_html_topmenu_gethtml_before>
                <observers>
                    <catalog_add_topmenu_items>
                        <type>disabled</type>
                    </catalog_add_topmenu_items>

                    <namespace_thumbnailmenu>
                        <class>namespace_thumbnailmenu/observer</class>
                        <method>pageBlockHtmlTopmenuGethtmlBefore</method>
                    </namespace_thumbnailmenu>
                </observers>
            </page_block_html_topmenu_gethtml_before>


            <catalog_category_collection_load_before>
                <observers>
                    <namespace_thumbnailmenu>
                        <class>namespace_thumbnailmenu/observer</class>
                        <method>catalogCategoryCollectionLoadBefore</method>
                    </namespace_thumbnailmenu>
                </observers>
            </catalog_category_collection_load_before>

            <catalog_category_flat_loadnodes_before>
                <observers>
                    <namespace_thumbnailmenu_add_extra_flat_attributes>
                        <class>namespace_thumbnailmenu/observer</class>
                        <method>catalogCategoryFlatLoadnodesBefore</method>
                    </namespace_thumbnailmenu_add_extra_flat_attributes>
                </observers>
            </catalog_category_flat_loadnodes_before>
        </events>
    </frontend>
</config>

And since it's all pre-fetched in a few mysql calls this way of adding the image in the menu it should be pretty quick.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.