Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 3
Dispaly Subcategories Instead of Products On Category Page (With category Images) (Magento version 1.3.2.4)
 
Contenda
Jr. Member
 
Total Posts:  10
Joined:  2009-03-07
 

This thread is in relation to the thread below, however I wthought I would start the subject again as although the thread below is quite relevant it is very out of date and in places very off topic.

http://www.magentocommerce.com/boards/viewthread/14527/P105/

I am using Magento version 1.3.2.4

So to achieve the goal here I have done the following step by step:

1. Create a static block as follows:

Block Title: Sub Category Listing
Identifier: subcategory_listing
Status: Enabled
Content:

{{block type="catalog/navigation" template="catalog/navigation/subcategory_listing.phtml"}}

2. Find the category in question and under the “Display Settings Tab” reflect the following:

Display mode: Static Block Only
CMS Block: Sub Category Listing
Is Anchor: No

3. Create a file called “subcategory_listing.phtml” (without the quotes) and place it here:

app/design/frontend/default/MY-TEMPLATE-DIR/template/catalog/navigation/

with the following code in it:

<?php $_categories=$this->getCurrentChildCategories(); ?>

<div class="listing-type-list catalog-listing">
    
<?php
        
foreach ($_categories as $_category):
    
?>
    
<table width="100%" border="0" cellspacing="0" cellpadding="0">
            
<?php if($_category->getIsActive()): ?>
            
<tr>
                <
td width="30%">
                    <
div class="listing-item">
                        <
div class="cat-box-text">
                        <
h6><a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) ?></a></h6>
                        </
div>
                        <
div class="product-image">
                            <
a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>">
                                <
img src="<?php echo $_category->getImageUrl() ?>" width="100" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />
                            </
a>
                        </
div>
                    </
div>
                </
td>
                <
td width="40%">
                    <
div class="listing-item">
                        <
div class="cat-box-text">
                        
<?php echo $_category->getDescription() ?>
                        
</div>
                    </
div>
                </
td>
            
<?php endif; ?>
            
</tr>
        </
table>
    
<?php endforeach; ?>
</div>

4. Copy:

app\code\core\Mage\Catalog\Block\Navigation.php

to

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

(we are making a local copy so that future Magento upgrades don’t overwrite our work today.)

Then open the local version of “Navigation.php”, find:

public function getCurrentChildCategories()
    
{
        $layer 
Mage::getSingleton('catalog/layer');
        
$category   $layer->getCurrentCategory();
        
/* @var $category Mage_Catalog_Model_Category */
        
$categories $category->getChildrenCategories();
        
$productCollection Mage::getResourceModel('catalog/product_collection');
        
$layer->prepareProductCollection($productCollection);
        
$productCollection->addCountToCategories($categories);
        return 
$categories;
    
}

And replace it with:

public function getCurrentChildCategories()
   
{
        $layer 
Mage::getSingleton('catalog/layer');
        
$category   $layer->getCurrentCategory();
        
/* @var $category Mage_Catalog_Model_Category */
        
$collection Mage::getModel('catalog/category')->getCollection();
        
/* @var $collection Mage_Catalog_Model_Resource_Eav_Mysql4_Category_Collection */
        
$collection->addAttributeToSelect('url_key')
            ->
addAttributeToSelect('name')
            ->
addAttributeToSelect('is_anchor')
            ->
addAttributeToSelect('image'
            ->
addAttributeToFilter('is_active'1)
            ->
addIdFilter($category->getChildren())
            ->
setOrder('position''ASC')
            ->
joinUrlRewrite()
            ->
load();

        
$productCollection Mage::getResourceModel('catalog/product_collection');
        
$layer->prepareProductCollection($productCollection);
        
$productCollection->addCountToCategories($collection);
        return 
$collection;
    
}

5. I edited my blocks.css file and did some styling to make it look good!

Problems…

Okay - everything works except the category image. Now I am under the impression that the categry image is is the reason why I made a local copy of and edited Navigation.php?

Any ideas anyone?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Contenda
Jr. Member
 
Total Posts:  10
Joined:  2009-03-07
 

I am an absolute turnip!

It’s quite important that you also need to actually UPLOAD some category images to your subcategories to make this work.

Solved.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Contenda
Jr. Member
 
Total Posts:  10
Joined:  2009-03-07
 

It’s also worth mentioning that if you don’t want to display the image on the category listing page it’s self then you should edit:

app/design/frontend/default/MY-TEMPLATE-DIR/template/catalog/category/list.phtml

and remove (or comment out) this bit of code:

<?php if($_imgHtml): ?>
        
<p><?php echo $_imgHtml?></p>
    
<?php endif; ?>

If you don’t it loads the category image at the top of the category’s page by default and unless styled can look pretty untidy.

 
Magento Community Magento Community
Magento Community
Magento Community
 
q23media
Member
 
Avatar
Total Posts:  72
Joined:  2009-04-29
 

Hey! First of all: thx for this tutorial, exactly what I wanted and very nice impemented!

I have just a little problem with the description. It just doesn’t want to appear...getName and getImageUrl work fine...only getDescription does not...any ideas?

I tried to copy a part of a code from the catalog/category/view.phtml into the subcategory_listing.phtml...but unfortionatly it didnt work (I’m still learnig this php template thing):

<td width="40%">
<div class="listing-item">
<div class="cat-box-text">
<h2><?php echo $_helper->categoryAttribute($_category, $this->htmlEscape($_category->getName()), 'name') ?></h2>
</div>

<?php if($_description=$_category->getDescription()): ?>
<p class="category-description"><?php echo $_helper->categoryAttribute($_category, $_description, 'description') ?></p>
<?php endif; ?>
</div>
</div>
</td>

thanx and greets from Mexico
Jakob

 
Magento Community Magento Community
Magento Community
Magento Community
 
mkII
Sr. Member
 
Total Posts:  79
Joined:  2009-02-24
 
Avera - 21 December 2009 03:45 AM

app/design/frontend/default/MY-TEMPLATE-DIR/template/catalog/category/list.phtml

You have a small typo: actually, the file is view.phtml, not list.phtml smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
mkII
Sr. Member
 
Total Posts:  79
Joined:  2009-02-24
 

Some time ago I found the Magento Custom Category Images Listing Block Tutorial (http://onerutter.com/web/magento-custom-category-images-listing-block-tutorial.html). Being slightly modified it runs perfectly for me in 1.3.2.4.

But I needed more - I wanted to generate a list of subcategories of any arbitrary category and place it on the home page. So I made some mods and it works. The following is the code:

<div class="listing-type-list catalog-listing">
<?php /* Some kind of hardcoding - set current category to specified Id (mkII) */
    
$cur_category=Mage::getModel('catalog/category')->load(109); /* <<<=== 109 is a category Id */
    
$layer Mage::getSingleton('catalog/layer');
    
$layer->setCurrentCategory($cur_category);
/* end of hardcoding */ ?>

<?php $_maincategorylisting
=$this->getCurrentCategory()?>                        
<?php $_categories
=$this->getCurrentChildCategories()?>

<?php 
if($_categories->count()):?>
    <?php 
foreach ($_categories as $_category):?>
        <? 
if($_category->getIsActive()):
             
$cur_category=Mage::getModel('catalog/category')->load($_category->getId());
            
$layer Mage::getSingleton('catalog/layer');
            
$layer->setCurrentCategory($cur_category);
 
            
$catName $this->getCurrentCategory()->getName();?>
 
            
<div class="listing-item">
                <
div class="product-image">
                    
<? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
                        
<a href="<?php echo $this->getCategoryUrl($_category)?>" title="<?php echo $catName ?>"><img src="<?php echo $_imageUrl?>width="135" height="135"></a>
                    
<? else: ?>
                        
<a href="<?php echo $this->getCategoryUrl($_category)?>" title="<?php echo $catName ?>"><img src="/skin/frontend/3graces/default/images/category_image_default.gif"></a>
                    
<? endif; ?>
                
</div>
                <
div class="product-shop">
                    <
h5><a href="<?php echo $this->getCategoryUrl($_category)?>"><?php echo $catName?></a></h5>
                    <
div class="clear"></div>
                    <
div class="description">
                        
<?php echo $this->getCurrentCategory()->getDescription(); ?>
                    
</div>
                </
div>
            </
div>
        
<?endif;?>
    <?php 
endforeach; ?>
 
    <?php 
/* This resets the category back to the original pages category
            If this is not done, subsequent calls on the same page will use the last category
            in the foreach loop */
    
?>
    <?php $layer
->setCurrentCategory($_maincategorylisting);?>
<?endif
;?>
 
</div>
 
Magento Community Magento Community
Magento Community
Magento Community
 
lolocucu
Jr. Member
 
Total Posts:  22
Joined:  2010-02-15
 

Hi
I’m doing a very similar thing that you Avera : a list of products in current category.
But I dont succeed : my ->addIdFilter dont work :

$layer Mage::getSingleton('catalog/layer'); 

 
$currentCategory Mage::registry('current_category');

 print(
$currentCategory->getName());    
            
$collection Mage::getModel('catalog/category')->getCollection()
                ->
addAttributeToSelect(array('name''is_active','url_key'))
                ->
addIdFilter($currentCategory->getId())  
                ->
setLoadProductCount(true)
                ->
load()
            ;

$_productCollection Mage::getResourceModel('catalog/product_collection'); 
$layer->prepareProductCollection($_productCollection); 
$_productCollection->addCountToCategories($collection);

It shows all products in my store!
Any idea guys ???

 
Magento Community Magento Community
Magento Community
Magento Community
 
Stuardo2
Jr. Member
 
Total Posts:  2
Joined:  2010-03-15
 


Hi All..great bit of code!

We have been reading this thread with great interest. We are a small company making personalised lasered gifts and are working hard to get our Magento site up and running.

We too want to get our product category images to display their corresponding category images on a page.

We have followed the instructions and code changes as in the http://www.3graces.com

It does work, but the category images are in a vertical list. Does anybody know how to get the images to display horizontally. We think we are missing something simple here (a brain maybe!!)

see the following link to see what I mean:
http://www.createmygift.co.uk/magento/index.php/products.html

Please HELP.

Cheers
Stuardo

 
Magento Community Magento Community
Magento Community
Magento Community
 
gnocetiuy
Jr. Member
 
Total Posts:  3
Joined:  2009-08-20
Montevideo, Uruguay
 

Hello Stuardo2, try with this code:

<div class=\"listing-type-grid catalog-listing\">
<?php $_categories=$this->getCurrentChildCategories(); ?>
<?php $_collectionSize 
$_categories->count() ?>
<?php $_columnCount 
3?>
    <?php $i
=0;
        foreach (
$_categories as $_category):
    
?>
        <?php 
if($i++%$_columnCount==0): ?>
        
<ol class=\"grid-row\">
        
<?php endif; ?>
            
<li class=\"item\">
                <
class=\"product-image\">
                    <
a href=\"<?php echo $_category->getURL() ?>\" title=\"<?php echo $this->htmlEscape($_category->getName()) ?>\"><?php echo $this->htmlEscape($_category->getName()) ?></a>
                       <
a href=\"<?php echo $_category->getURL() ?>\" title=\"<?php echo $this->htmlEscape($_category->getName()) ?>\">
                            <
img src=\"<?php echo $_category->getImageUrl() ?>\" width=\"100\" alt=\"<?php echo $this->htmlEscape($_category->getName()) ?>\" />
                        </
a>
                </
p>
            </
li>
        
<?php if($i%$_columnCount==|| $i==$_collectionSize): ?>
        
</ol>
        
<?php endif; ?>
    <?php 
endforeach ?>
    
<script type=\"text/javascript\">decorateGeneric($$(\'.grid-row\'), [\'last\'\'odd\'\'even\']);</script>
</div>
 
Magento Community Magento Community
Magento Community
Magento Community
 
Stuardo2
Jr. Member
 
Total Posts:  2
Joined:  2010-03-15
 

Hi,

Many thanks for taking the time to give me the code it was exactly what i had been looking for. I had to take the \ out but once i had done this it worked well. I also placed a <br> in the code to allow a break between the image title and the image. Please find our code below for anyone who needs the same.

<div class="listing-type-grid catalog-listing">
<?php $_categories=$this->getCurrentChildCategories(); ?>
<?php $_collectionSize = $_categories->count() ?>
<?php $_columnCount = 4; ?>
<?php $i=0;
foreach ($_categories as $_category):
?>
<?php if($i++%$_columnCount==0): ?>
<ol class="grid-row">
<?php endif; ?>
<li class="item">
<p class="product-image">
<a href="<?php echo $_category->getURL() ?>” title="<?php echo $this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) ?></a>
<a href="<?php echo $_category->getURL() ?>” title="<?php echo $this->htmlEscape($_category->getName()) ?>"><br>
<img src="<?php echo $_category->getImageUrl() ?>” width="120" alt="<?php echo $this->htmlEscape($_category->getName()) ?>” />
</a>
</p>
</li>
<?php if($i%$_columnCount==0 || $i==$_collectionSize): ?>
</ol>
<?php endif; ?>
<?php endforeach ?>
<script type="text/javascript\">decorateGeneric($$(’.grid-row’), [’last’, ‘odd’, ‘even’]);</script>
</div>

 
Magento Community Magento Community
Magento Community
Magento Community
 
ArthurCatigbe
Member
 
Total Posts:  34
Joined:  2009-06-02
 
Stuardo2 - 20 March 2010 04:48 AM

Hi,

Many thanks for taking the time to give me the code it was exactly what i had been looking for. I had to take the \ out but once i had done this it worked well. I also placed a <br> in the code to allow a break between the image title and the image. Please find our code below for anyone who needs the same.

<div class="listing-type-grid catalog-listing">
<?php $_categories=$this->getCurrentChildCategories(); ?>
<?php $_collectionSize = $_categories->count() ?>
<?php $_columnCount = 4; ?>
<?php $i=0;
foreach ($_categories as $_category):
?>
<?php if($i++%$_columnCount==0): ?>
<ol class="grid-row">
<?php endif; ?>
<li class="item">
<p class="product-image">
<a href="<?php echo $_category->getURL() ?>” title="<?php echo $this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) ?></a>
<a href="<?php echo $_category->getURL() ?>” title="<?php echo $this->htmlEscape($_category->getName()) ?>"><br>
<img src="<?php echo $_category->getImageUrl() ?>” width="120" alt="<?php echo $this->htmlEscape($_category->getName()) ?>” />
</a>
</p>
</li>
<?php if($i%$_columnCount==0 || $i==$_collectionSize): ?>
</ol>
<?php endif; ?>
<?php endforeach ?>
<script type="text/javascript\">decorateGeneric($$(’.grid-row’), [’last’, ‘odd’, ‘even’]);</script>
</div>

Where are you supposed to put this code?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Harmenk
Member
 
Avatar
Total Posts:  35
Joined:  2009-08-10
Loppersum
 

Hello,

i used the code to display my subcategories with an image. It works great!! Now I have the same problem as Stuardo2. I’d like to have my categories displayed horizontal, and not vertical. I have tried the \updated’ code, even without all the / but I couldn\t figure it out.

I\’m using version 1.4.0.1. Can anyone help me to solve this problem?

O, and by the way, I also want to have a *.css file to setup some layout for the subcategory listing. How can I made that?

Thanks in advance.

H.Kuijer

 
Magento Community Magento Community
Magento Community
Magento Community
 
ubedarab
Jr. Member
 
Total Posts:  10
Joined:  2010-04-28
 

let take backup your oringinal view.phtml file in
app\design\frontend\yourdiractory_path\default\template\catalog\category

copy this code to view.phtml file
u get subcategory on your category page

i hope this code is useful for u ppl

enjoy with this code

File Attachments
view.phtml  (File Size: 3KB - Downloads: 427)
 
Magento Community Magento Community
Magento Community
Magento Community
 
Harmenk
Member
 
Avatar
Total Posts:  35
Joined:  2009-08-10
Loppersum
 

Hello,

the code from ubedarab don’t worked for me. Is there already that knows how to displays the categories horizontal in stead of vertical?

 
Magento Community Magento Community
Magento Community
Magento Community
 
LeidiBird
Jr. Member
 
Total Posts:  4
Joined:  2010-03-06
 

Thanks for this it is exactly what I needed.  I made some changes to make the subcategories show up in the grid format instead of just all vertically down the page.  Here is my code (for subcategory_listing.phtml) as it seems some of you were interested in doing the same:

<?php $_categories=$this->getCurrentChildCategories(); ?>
<br>

<
div class="category-products">
<?php $_collectionSize $_categories->count() ?>
    
<table class="products-grid" id="products-grid-table">
    
<?php $i=0; foreach ($_categories as $_category): ?>
    <?php 
if ($i++%3==0): ?>
        
<tr>
        
<?php endif ?>
            
<td>
               <
a href="<?php echo $_category->getURL() ?>" title="<?php echo \
$this->htmlEscape($_category->getName()) ?>">
                  <
img src="<?php echo $_category->getImageUrl() ?>" width="10\
0" 
alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />
               </
a>
               <
h3 class="product-name"><a href="<?php echo $_category->getURL\
() ?>" 
title="<?php echo $this->htmlEscape($_category->getName()) ?>"><?php ec\
ho $this
->htmlEscape($_category->getName()) ?></a></h3>
            </
td>
        
<?php if ($i%3==&& $i!=$_collectionSize): ?>
        
</tr>
        
<?php endif ?>
        <?php 
endforeach ?>
            <?php 
for($i;$i%3!=0;$i++): ?>
            
<td class="empty">&nbsp;</td>
        
<?php endfor ?>
            <?php 
if ($i%3==0): ?>
        
</tr>
        
<?php endif ?>
    
</table>
</
div>
<
br>
 
Magento Community Magento Community
Magento Community
Magento Community
 
WebexpertNO
Member
 
Total Posts:  74
Joined:  2008-09-14
 

The last approach gave me following error:

Parse error: syntax error, unexpected T_VARIABLE, expecting T_STRING in /home/web00031/public_html/app/design/frontend/default/tpl-003/template/catalog/navigation/subcategory_listing.phtml on line 14

Any idea why?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 3