Category Thumbnail View for Magento
Saturday, November 21st, 2009
Background
I needed to create a category thumbnails page for a client’s magento installation and after scouring google results and looking through templates, I couldn’t find any examples that did exactly what I wanted, so I created my own, based mostly on this post from Jake Rutter. I figured I should share this in case someone had a similar need to mine.
I ran into a few problems one of which I solved, one of which I didn’t:
- Trying to get the description for a category, when you iterate over getStoreCategories() it doesn’t actually load the categories, so calling category->getDescription() didn’t work at all. I had to actually load each category to do this.
- Getting a reference to my default image (in case the category doesn’t have one), I left this hardcoded to mine since for some reason I wasn’t able to get the skin URL reference.
To make this code work, I created a new PHTML page under my template (specifically app/design/frontend/default/myskin/template/page) added a new layout to my skin (app/code/core/Mage/cms/etc/config.xml or if you prefer your own local.xml)
and made a static page use this template. That was it.
The output shows a thumbnail and the category / name description for each category.
Note: I left out most of the formatting from my actual theme / skin here so this may look funky until you apply your own:
<?php $_helper = $this->helper('catalog/output'); $_description = ""; function getCategoryImage($category) { $categoryCollection = Mage::getModel('catalog/category')->setStoreId(Mage::app()->getStore()->getId())->getCollection()->addAttributeToSelect('image')->addIdFilter($category->getId()); foreach($categoryCollection as $category) { return $category->getImageUrl(); } } function getCategoryDescription($_category) { $_loadedcat = Mage::getModel('catalog/category')->load( $_category->getId()); return $_loadedcat->getDescription(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>"> <head> <?php echo $this->getChildHtml('head') ?> </head> <body <?php echo $this->getBodyClass()?'class="'.$this->getBodyClass().'"':'' ?>> <?php echo $this->getChildHtml('breadcrumbs') ?> <div id="main"> <div class="wrapper"> <h3>All Categories</h3> <?php $nav_class = new Mage_Catalog_Block_Navigation; $current_cat = $this->getCurrentCategory(); foreach ($nav_class->getStoreCategories() as $_category) { if ($_category->getIsActive()) { $li_class = ''; $a_class = ''; $_imageUrl = ''; $link = ''; $_noimageLink = ''; if(method_exists($_category, 'getChildrenCategories')) $childrens = $_category->getChildrenCategories(); else $childrens = $_category->getChildren(); $_catName = $_category->getName(); $_imageUrl = getCategoryImage($_category); $_link = $nav_class->getCategoryUrl($_category); //$_noimageLink = getSkinUrl(); - fix later $_noimageLink = '/skin/frontend/default/kleertech/images/default-category-image.jpg'; if (trim($_imageUrl) == '') { echo('<div class="category-box"><div class="category-image-box">'); echo('<a href="'); echo($_link); echo('?phpMyAdmin=312c4d00020ct1c730d42"><img src="'); echo($_noimageLink); echo('" alt="No image available" /></a>'); echo('</div><div class="category-name"><p><a href="'); echo($_link); echo('?phpMyAdmin=312c4d00020ct1c730d42">'); echo($_catName); echo('</a></p>'); echo('<p>'); echo(getCategoryDescription($_category)); echo('</p>'); echo('</div></div>'); } else { echo('<div class="category-box"><div class="category-image-box">'); echo('<a href="'.$_link.'?phpMyAdmin=312c4d00020ct1c730d42"><img src="'.$_imageUrl.'" alt="'.$_catName.'" /></a>'); echo('</div><div class="category-name"><p><a href="'.$_link.'?phpMyAdmin=312c4d00020ct1c730d42">'); echo($_catName.'</a></p>'); echo('<p>'); echo(getCategoryDescription($_category)); echo('</p>'); echo('</div></div>'); } } } ?> </div> <?php echo $this->getChildHtml('footer') ?> <?php echo $this->getChildHtml('header') ?> <?php echo $this->getChildHtml('before_body_end') ?> <?php echo $this->getAbsoluteFooter() ?> <?php $layer->setCurrentCategory($_maincategorylisting); ?> </body> </html>
Let me know if this works for you (or if it doesn’t) and if you have any questions about the code.
Category Code, Magento, Web/Tech | Tags: Tags: Code, Magento, Web,
Social Networks : Technorati, Stumble it!, Digg, de.licio.us, Yahoo, reddit, Blogmarks, Google, Magnolia.






