Creative Reason » Magento http://www.creativereason.com Brian Schwartz's Blog Tue, 24 Aug 2010 22:53:36 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Category Thumbnail View for Magento http://www.creativereason.com/category-thumbnail-view-for-magento.html http://www.creativereason.com/category-thumbnail-view-for-magento.html#comments Sun, 22 Nov 2009 04:36:57 +0000 Brian Schwartz http://www.creativereason.com/?p=362 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:

  1. 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.
  2. 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('"><img src="');
			echo($_noimageLink);
			echo('" alt="No image available" /></a>');
			echo('</div><div class="category-name"><p><a href="');
			echo($_link);
			echo('">');
			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.'"><img src="'.$_imageUrl.'" alt="'.$_catName.'" /></a>');
			echo('</div><div class="category-name"><p><a href="'.$_link.'">');
			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.

]]> http://www.creativereason.com/category-thumbnail-view-for-magento.html/feed 0