Create categories grid with images

Last modified by gonzela2006 on Wed, July 21, 2010 06:05
Source|Old Revisions  

This is an old revision of the document!


You can do it without editing the core files of Magento

*Create a new file called “category_listing.phtml” on this directory “app/design/frontend/default/YOUR_TEMPLATE/catalog/navigation/”.

*Add the following code on that file:

  1. <?php $_maincategorylisting=$this->getCurrentCategory();?>
  2. <?php $_categories=$this->getCurrentChildCategories();?>
  3. <div class="widget widget-viewed">
  4.     <div class="widget-products">
  5.         <?php $_columnCount = $this->getColumnCount(); ?>
  6.         <?php $i=0; foreach ($_categories as $_category): ?>
  7.         <?php if($_category->getIsActive()): ?>
  8.         <?php $cur_category=Mage::getModel('catalog/category')->load($_category->getId()); ?>
  9.         <?php $layer = Mage::getSingleton('catalog/layer'); ?>
  10.         <?php $layer->setCurrentCategory($cur_category); ?>
  11.         <?php if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
  12.         <?php if ($i++%$_columnCount==0): ?>
  13.             <ul class="products-grid">
  14.         <?php endif; ?>
  15.                 <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
  16.                  <a href="<?php echo $this->getCategoryUrl($_category); ?>" title="<?php echo $this->htmlEscape($_category->getName()); ?>"> <img src="<?php echo $_imageUrl; ?>" width="135px" height="135px" alt="<?php echo $this->htmlEscape($_category->getName()); ?>" /> </a>
  17.                 <h3><?php echo $this->htmlEscape($_category->getName()); ?></h3>
  18.                 <?php if($_description=$this->getCurrentCategory()->getDescription()):?>
  19.                 <p class="category-description"> <?php echo $_description; ?></p>
  20.                 <?php endif; ?>
  21.                 </li>
  22.         <?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
  23.             </ul>
  24.         <?php endif; ?>
  25. <?php endif; ?>
  26. <?php endif; ?>
  27.         <?php endforeach; ?>
  28.     </div>
  29. </div>

*Go to the Magento admin panel CMS → Pages → Add New Page.

Page Title: Categories

URL Key: categories

Status: enabled

Content:

  1. {{block type="catalog/navigation" column_count="3" name="catalog.categories" template="catalog/navigation/category_listing.phtml"}}

*Click on Save Page. *You can access that page from here: http://www.domain.com/categories

I have tested it on Magento 1.4.1.0 and it works GREAT

Best Regards, gonzela2006




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs