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 2 of 3
Dispaly Subcategories Instead of Products On Category Page (With category Images) (Magento version 1.3.2.4)
 
DirectLowVoltage
Jr. Member
 
Total Posts:  30
Joined:  2009-02-19
 

the “ / “s at the end of a few lines are not supposed to be there… try this…

<?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="100" 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 echo $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>

I don’t know why but line 15 where it says product- and skips to the next line for name should all be on one line as well…

 
Magento Community Magento Community
Magento Community
Magento Community
 
DirectLowVoltage
Jr. Member
 
Total Posts:  30
Joined:  2009-02-19
 

I have some categories that don’t have products yet and they were showing up in the grid… so I added the following code and it shows only the categories with at lease 1 product in them…

<?php if ($_category->getProductCount() > 0): ?>

put above

<div class="categorylisting">
  
<?php if($cur_category->getIsActive()): ?>

and then

<?php endif; ?>

above

<?php endforeach; ?>

so you have

<?php endif; ?>
     <?php 
endif; ?>
 <?php 
endforeach; ?> 
 
</div>

at the end…

 
Magento Community Magento Community
Magento Community
Magento Community
 
rolomode
Jr. Member
 
Avatar
Total Posts:  18
Joined:  2008-10-29
Mar del Plata
 

Any ideas for 1.4?...and horizontal it’s posible?
Thaks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lurebeauty
Sr. Member
 
Avatar
Total Posts:  229
Joined:  2009-07-06
 

Ok i spent all afternoon trying to combine a bunch of these threads and finally got it working, and mine is working horizontally too.  I give credit to this forum and http://onerutter.com/web/magento-custom-category-images-listing-block-tutorial.html#idc-cover as well

Create a block called sub_category_listing.html and placed it in the following directory: app/design/frontend/YOURTEMPLATE/default/template/catalog/navigaton/sub_navigation.html

Place the following code in that file:

<div id="categories">
<
div class="col_full">
 
 
<
div class="listing" >
<?php $_maincategorylisting=$this->getCurrentCategory()?>                        
<?php $_categories
=$this->getCurrentChildCategories()?>
 
<?php 
if($_categories->count()):?>
           <? 
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();  
 
            if(
$_imageUrl=!$this->getCurrentCategory()->getImageUrl()):?>
 
            
<div class="category-box">
                <
div class="category-image-box">
                    <
a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="/skin/frontend/3graces/default/images/category_image_default.gif"></a>
                </
div>
                <
div class="category-name">    
                    <
p><a href="<?php echo $this->getCategoryUrl($_category)?>">
                        
<?php echo $catName ?></a></p>
                </
div>
            </
div>    
 
            
<?endif?>
 
            <? 
if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
 
         
<div class="category-box">
                <
div class="category-image-box">
                     <
a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="<?php echo $_imageUrl?>height="80"></a>
                </
div>
                <
div class="category-name">    
                    <
p><a href="<?php echo $this->getCategoryUrl($_category)?>"<?php echo $_category->getName()?></a></p>
                </
div>
            </
div>
 
 
 
<?                                              
                        
endif;
                        endif;
?>
            <?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>
<
br clear=all>
</
div>
</
div>

Next, go to CMS > Static Blocks. Once you get there, click Add New Block and fill in the following fields.

Block Title: Sub Category Listing
Identifier: sub_category_listing
Status: Enabled
Content: {{block type=”catalog/navigation” template=”catalog/navigation/sub_category_listing.phtml”}}

(Make sure the quotes look right; a lot of issues people were having was because the quotes were showing up slanted from copying and pasting, just redo the quotes if you have to).

To make it show up horizontally, go to your file skin/frontend/default/YOUR THEME/css/boxes.css file (if you’re using modern theme) and put at the bottom the following code:

/***** Category Sub Listing *************************************/

.category-box {
text
-aligncenter;
float:left;
margin:0px 15px 15px 0px;
width125px;

}

.category-image-box {
background
url(../images/category_image_bg.gif) no-repeat;
height:104px;
width125px;
}

.category-image-box img {
padding
10px 0px 0px 0px;
}

.category-name a:link, .category-name a:visited {
color
#7c2b83;
font-weightbold;
font-size12px;
text-decorationnone;
}

.category-name a:hover, .category-name a:active {
color
#7c2b83;
font-weightbold;
font-size12px;
text-decorationunderline;
}

Now to enable this static block for a parent category that contains a bunch of sub-categories with images that are set.
Go to: Catalog > Manage Categories

Then click on the parent category to which you wish to add this layout, go to the tab “display settings”.

You will see the following fields, just setup as follows:

Display Mode: Static Block Only
CMS Block: Sub Category Listing
Is Anchor: Yes

If you notice your category images are too large when you actually click to GO TO the category, just go to your boxes.css file and change the category-image to something smaller, like 200.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Skepsis
Jr. Member
 
Total Posts:  5
Joined:  2010-10-25
 

Hi, everybody

Is there any way to group the subcategories alphabetically. For example have a big A and after this all the subcategories that starts with an A etc. I attach a picture for an example

Image Attachments
example.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Stefan88
Jr. Member
 
Total Posts:  12
Joined:  2010-10-18
 
lurebeauty - 04 November 2010 08:43 AM

Ok i spent all afternoon trying to combine a bunch of these threads and finally got it working, and mine is working horizontally too.  I give
app/design/frontend/YOURTEMPLATE/default/template/catalog/navigaton/sub_navigation.html

Place the following code in that file:

<div id="categories">
<
div class="col_full">
 
 
<
div class="listing" >
<?php $_maincategorylisting=$this->getCurrentCategory()?>                        
<?php $_categories
=$this->getCurrentChildCategories()?>
 
<?php 
if($_categories->count()):?>
           <? 
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();  
 
            if(
$_imageUrl=!$this->getCurrentCategory()->getImageUrl()):?>
 
            
<div class="category-box">
                <
div class="category-image-box">
                    <
a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="/skin/frontend/3graces/default/images/category_image_default.gif"></a>
                </
div>
                <
div class="category-name">    
                    <
p><a href="<?php echo $this->getCategoryUrl($_category)?>">
                        
<?php echo $catName ?></a></p>
                </
div>
            </
div>    
 
            
<?endif?>
 
            <? 
if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
 
         
<div class="category-box">
                <
div class="category-image-box">
                     <
a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="<?php echo $_imageUrl?>height="80"></a>
                </
div>
                <
div class="category-name">    
                    <
p><a href="<?php echo $this->getCategoryUrl($_category)?>"<?php echo $_category->getName()?></a></p>
                </
div>
            </
div>
 
 
 
<?                                              
                        
endif;
                        endif;
?>
            <?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>
<
br clear=all>
</
div>
</
div>

AND
/***** Category Sub Listing *************************************/

.category-box {
text
-aligncenter;
float:left;
margin:0px 15px 15px 0px;
width125px;

}

.category-image-box {
background
url(../images/category_image_bg.gif) no-repeat;
height:104px;
width125px;
}

.category-image-box img {
padding
10px 0px 0px 0px;
}

.category-name a:link, .category-name a:visited {
color
#7c2b83;
font-weightbold;
font-size12px;
text-decorationnone;
}

.category-name a:hover, .category-name a:active {
color
#7c2b83;
font-weightbold;
font-size12px;
text-decorationunderline;
}

I’m playing with this code for days now and i don’t get it!
I have entered the above code, which shows the vertically aligned sub category! I want the next Each (horizontal)
How to do? It must be so simple!

Image Attachments
whatiwant.jpgwhatiwant.jpgnot.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
iulian05
Jr. Member
 
Total Posts:  20
Joined:  2009-12-01
Bucharest
 

so I’ve create sub_category_listing.phtml, create sub_category_listing static bloc and noting is show...anyone can help me?

 
Magento Community Magento Community
Magento Community
Magento Community
 
liolemaire
Jr. Member
 
Total Posts:  22
Joined:  2008-09-25
 
iulian05 - 27 January 2011 09:21 AM

so I’ve create sub_category_listing.phtml, create sub_category_listing static bloc and noting is show...anyone can help me?

Try this in your block :
{{block type="catalog/navigation" template="catalog/navigation/sub_navigation.phtml"}}

 
Magento Community Magento Community
Magento Community
Magento Community
 
steinbauer
Jr. Member
 
Avatar
Total Posts:  14
Joined:  2009-01-11
Czech Republic
 
q23media - 16 January 2010 06:06 PM

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?

thanx and greets from Mexico
Jakob

I have same problem - via screen

ANY IDEA?

Image Attachments
problem.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
charford
Jr. Member
 
Total Posts:  28
Joined:  2009-05-07
 

Hello all,

I spent a bunch of time on this issue and tried about everything I could. What I was trying to find is a way for my subcategories to show up under my main categories in grid view, instead of just displaying all the products. I know a lot of this has been covered, but I just wanted to put out all the code and steps that worked for me. Also, I am running 1.5.0.1 so it should work with any of the latest versions. Hopefully I don’t forget anything as I did all this about 3 days ago. I have copied a lot of this from other forums, but this is not exactly like Avera’s forum post- I am using different code from DirectLowVoltage to get the grid layout. If you want to see an example of all this code working, just visit my categories page:

http://www.itrees.com/species.html and http://www.itrees.com/categories.html

OK, so here goes…

1. Create a static block as follows (props to Magento Fox, Avera, and Brendan.):

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

THIS IS AN IMPORTANT STEP THAT I THINK SOME PEOPLE FORGET- Under the Custom Design tab you must select the correct custom design template that you are going to be using! This little dumb mistake set me back hours.

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

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

with the following code in it (props to DirectLowVoltage for this):

<?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="180" 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 echo $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>

I’ll state the obvious as well, you must assign a picture to your categories. If you want to change the size of the pictures, simply edit the width attribute in the above code. You can also create css for displaying boxes around everything and formatting the text, this is all done in the boxes.css file. I didn’t really mess with that because I thought mine looked fine without. Someone else will have to figure that out, because I am really not that good at programming- only good at scouring forums and copying off of people.

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. Edit your css to make it look good in the boxes.css file.

 
Magento Community Magento Community
Magento Community
Magento Community
 
charford
Jr. Member
 
Total Posts:  28
Joined:  2009-05-07
 

6. 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/view.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.

I also forgot to mention that for this solution to look good, all of your product category images should be the exact same size- I believe I made mine 512 px X 768 px

 
Magento Community Magento Community
Magento Community
Magento Community
 
keyzo
Jr. Member
 
Total Posts:  23
Joined:  2011-02-12
 

Hi,

This is great got it working etc, But I’m really lazy (as a programmer) and I can’t be bothered to upload an image for each category as we have 100’s so what I’d like to do is just grab and image of the first product image of each category… Is this possible, can anybody provide any code with that works with the first bit of code mentioned on this thread?

If so your a super star - and I’ll look forward to hearing from you!

Much Love

Shane

 
Magento Community Magento Community
Magento Community
Magento Community
 
keyzo
Jr. Member
 
Total Posts:  23
Joined:  2011-02-12
 

Magnaged to do it by:

if($_imageUrl=!$this->getCurrentCategory()->getImageUrl()):

foreach ($_category->getProductCollection() as $product) {

$_product = new Mage_Catalog_Model_Product();
$_product->load($product->getId());
?>
<div class="category-box">
<div class="category-image-box">
<a href="<?php echo $this->getCategoryUrl($_category)?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->backgroundColor(65,157,220)->resize(135); ?>"></a>
</div>
<div class="category-name">
<p><a href="<?php echo $this->getCategoryUrl($_category)?>">
<?php echo $catName ?></a></p>
</div>
</div>
<?php

break;
}

endif;

 
Magento Community Magento Community
Magento Community
Magento Community
 
roberto2
Jr. Member
 
Total Posts:  1
Joined:  2011-03-21
 

It worked form me on 1.4.2

I wanted to show allways when a category has subcategories so I modified the layout. This way I get:
- I don’t need to modify each category layout.
- This works without create the cms custom block.

I also used a ordered list instead of a table to show the categories.

Finally I only show the image if there is an image set in the subcategory. If there is no image I show the text link.

Here are my changes:

1.- In app/design/frontend/default/YOURTEMPLATE/layout/catalog.xml modify your category default layout to add the block where you want with this line:

<block type="catalog/navigation" name="subcategory_listing" template="catalog/navigation/subcategory_listing.phtml"/>

My category default layout with this change is in the top content:

<!--
Category default layout
-->

    <
catalog_category_default translate="label">
        <
label>Catalog Category (Non-Anchor)</label>
        <
reference name="left">
            <!--
            <
block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>
            -->
        </
reference>
        <
reference name="content">
            <
block type="catalog/navigation" name="subcategory_listing" template="catalog/navigation/subcategory_listing.phtml"/>
            <
block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
                <
block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                    <
block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                        <
block type="page/html_pager" name="product_list_toolbar_pager"/>
                        <!-- 
The following code shows how to set your own pager increments -->
                        <!--
                            <
action method="setDefaultListPerPage"><limit>4</limit></action>
                            <
action method="setDefaultGridPerPage"><limit>9</limit></action>
                            <
action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                            <
action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                            <
action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                            <
action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                            <
action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                        -->
                    </
block>
                    <
action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                    <
action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                    <
action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                    <
action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                    <
action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                    <
action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
                </
block>
            </
block>
        </
reference>
    </
catalog_category_default>

2.- Create the custom template for subcategories. Create the file app/design/frontend/default/YOURTEMPLATE/template/catalog/navigation/subcategory_listing.phtml with this content:

<?php $_categories=$this->getCurrentChildCategories(); ?>
<?php 
if(count($_categories)): ?>
<div class="subcategories">
    <
h2>Subcategories</h2>
    <
ul class="subcategories">
    
<?php $_collectionSize $_categories->count() ?>
        <?php $i
=0
        foreach (
$_categories as $_category): ?>
            
<li>
                
<?php
                $image 
$_category->getImageUrl(); 
                if(!
is_null($image) && $image != ''): ?>
                   
<a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>">
                      <
img src="<?php echo $image ?>" width="180" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />
                   </
a>
                
<?php else: ?>
                     
<a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>">
                         
<?php echo $this->htmlEscape($_category->getName()) ?>
                     
</a>
                
<?php endif; ?>
            
</li>
        
<?php endforeach ?>
    
</ul
</
div>
<?php endif; ?>

3.- Personalize your css. Mine is:

/*Subcategories listing */
.subcategories {
  margin
20px 0;
}
.subcategories h2 { color#2F2F2F; font-size: 0.95em; 
  
text-transformuppercasefont-weightbold;
}
.subcategories ul { width740pxmargin0px autopadding0px;
  
margin20px 0;
}
.subcategories ul li { displayinline-blockwidth177px
  
border1px dotted #ddd; margin-right: 1px; margin-bottom: 1px; padding: 0px;
}
.subcategories ul li a { color#5A5A5A; }
.subcategories ul li a:hover { color#1E7EC8; }
 
Magento Community Magento Community
Magento Community
Magento Community
 
stuarthammill
Jr. Member
 
Total Posts:  3
Joined:  2011-07-03
 

fantastic have it all working good but can not get an image

help anyone please

take a look

http://onlinediscountfabric.com/prints/nostalgic-prints.html

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