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

Vertical category menu
 
capple_
Jr. Member
 
Total Posts:  17
Joined:  2008-04-02
 
shd-media - 02 April 2008 01:51 AM

If I delete this block, the top catgeories are shown. But if I enter one catgeorei, I only see the subcategories under this one main_categorie. so it seems like this donesn`t work in Magento 1.0. Has anybody the same problem or fixed it for Magento 1.0?

Hi,

I’m using Magento 1.0 and managed to get the first level of the subcategories shown with this block of code:

Just replace the block you quoted with the following:

<?
    $children 
$_main_category->getChildren();
    
$hasChildren $children && $children->count();
    if (
$hasChildren){
        
foreach ($children as $child{
            
if ($child->getIsActive()) { ?>
                
<li>
                <
a href="<?=$this->getCategoryUrl($child)?>" <?if ($this->isCategoryActive($child)):?> class="active"<?endif;?>><span><?=$child->getName()?></span></a>
                </
li>
            
<?}
        }
    }
?>

I drew the inspiration from the code for the top category menu bar:
app/design/frontend/default/default/template/catalog/navigation/top.phtml

There is a call to a function here:

$this->drawItem($_category)

drawItem() is a recursive function located in: app/code/core/Mage/Catalog/Block/Navigation.php.

I didn’t manage to figure out how to show more levels of sub-categories, but I hope other members may be able to figure something out from these functions.

Thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
emagine
Member
 
Total Posts:  36
Joined:  2007-12-10
 

Is anyone able to get this working on the main home page? I can’t seem to have it display by default somehow?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Spek
Sr. Member
 
Total Posts:  77
Joined:  2007-11-28
 

Should work if you change the Home CMS page to 3 columns and make the apropriate changes to the layout and template files.

 
Magento Community Magento Community
Magento Community
Magento Community
 
r7designs
Jr. Member
 
Total Posts:  1
Joined:  2008-04-04
 

I followed Joe’s implementation......but I’m using Magento 1.0, so the contents of his left_menu.phtml were giving me errors.

Instead I used the code from /template/catalog/navigation/top.phtml and put it in left_menu.phtml.  I then altered the CSS a bit, I was able to add a simple category menu to the left sidebar.

http://magento.r7designs.com/

 
Magento Community Magento Community
Magento Community
Magento Community
 
samho
Jr. Member
 
Total Posts:  10
Joined:  2008-01-22
 
Joe - 21 January 2008 02:28 PM

Hello,

Here’s my implementation of vertical categories menu:
(note: see content that was added between <!-- edit --> and <!-- end edit -->)

Step1.
catalog.xml, around line 45

<reference name="top.menu">
    <
block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/>
</
reference>
<!-- 
edit -->
<
reference name="left.menu">
    <
block type="catalog/navigation" name="catalog.leftnavig" before="-" template="catalog/navigation/left_menu.phtml"/>
</
reference>
<!-- 
end edit -->

Step2.
page.xml around line 47

<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
<
block type="core/text_list" name="left" as="left"/>
<!-- 
edit -->
<
block type="core/text_list" name="left.menu" as="leftMenu"/>
<!-- 
end edit -->

Step3.
in template/page/2columns-left.phtml (my case) around line 70

<!-- [start] left -->
<
div class="col-left side-col">
<!-- 
edit -->
    
<?=$this->getChildHtml('leftMenu')?>
<!-- end edit -->
    
<?=$this->getChildHtml('left')?>&nbsp;
</
div>

Step4.
create a new file in template/catalog/navigation/
called left_menu.phtml with following content:

<?php
$_main_categories
=$this->getStoreCategories(10);
if(
$_main_categories->count()):
?>
<div class="box layered-nav">
    <
div class="head"><h3><?=$this->__('My categories')?></h3></div>
    <
div class="border-creator">
        <
div class="narrow-by">
            <
dl id="narrow-by-list">
                
<?foreach ($_main_categories as $_main_category):?>
                
<dt><a href="<?=$this->getCategoryUrl($_main_category)?>"<?if ($this->isCategoryActive($_main_category)):?> class="active"<?endif?>><?=$_main_category->getName()?></a></dt>
                <
dd>
                    <
ol>
                        
<? $_sub_categories=$this->_getChildCategories($_main_category10); ?>
                        <?foreach 
($_sub_categories as $_sub_category):?>
                            
<li>
                                &
nbsp;&nbsp;-><a href="<?=$this->getCategoryUrl($_sub_category)?>"<?if ($this->isCategoryActive($_sub_category)):?> class="active"<?endif?>><?=$_sub_category->getName()?></a></li>
                        
<?endforeach?>
                    
</ol>
                </
dd>
                
<?endforeach?>
              
</dl>
              <
script type="text/javascript">decorateDataList('narrow-by-list')</script>
        
</div>
    </
div>
</
div>
<?endif;?>

That should work. I just wanted to post it in case anyone is looking for something like this.

You may add some style to it if you like, then share.  wink

Thanks, Joe.

hi joe, this is great and work well on version 0.7..

but i am on version 1.0 now and it seems not working anymore. i got the following error

arse error: syntax error, unexpected T_VARIABLE in /home/snapshop/domains/snapshop.com.my/public_html/store/app/design/frontend/snapshop/default/template/catalog/navigation/left_menu.phtml on line 2

Can you help to fix it? thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
porterhouse
Jr. Member
 
Total Posts:  27
Joined:  2008-02-23
 

Any update for when this will be available in the backend without all these hacks?

 
Magento Community Magento Community
Magento Community
Magento Community
 
LorenzoG
Member
 
Total Posts:  36
Joined:  2007-09-02
 

I have also a very big need of a vertical menu since we have a large number of categories and subcategories and a horisontal menu isn’t suitable. I get it to work with 0.7 but not the latest 1.0. Thanks smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
adriancid
Jr. Member
 
Total Posts:  2
Joined:  2008-04-03
 

I have created a menu in version 1.0 using these steps

1-. Create a file named “left_menu1.phtml” in “magento\app\design\frontend\default\default\template\catalog\navigation\”

left_menu1.phtml

<div class="box layered-nav">
    <
div class="head">
      <
h3><?php echo $this->__('Browse By'?></h3>
    </
div>
    <
div class="border-creator">
      <
div class="narrow-by">
           <
dl id="narrow-by-list">
           
         <
dd>
         <
ol>        
        
<?php foreach ($this->getStoreCategories() as $_category): ?>
            
<dt>
             <
a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="active"<?php endif ?>><?php echo $this->htmlEscape($_category->getName()) ?></a>
            </
dt>
        
<?php endforeach ?>
        
       
</ol>
      </
dd>
      </
dl><script type="text/javascript">decorateDataList('narrow-by-list')</script>
    
</div>
   </
div>
</
div>

2-. Go to: CMS->Manage Pages, and click in Homepage, select in the left “Custom Design” and write this code in “Layout Update XML”:

<reference name="left">
    <
block type="catalog/navigation" name="catalog.leftnavig" before="-" template="catalog/navigation/left_menu1.phtml"/>
</
reference>

3-. Save and enjoy smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
Andrea, Argentina
Sr. Member
 
Total Posts:  164
Joined:  2007-12-05
Buenos Aires, Argentina
 

Adrian, I’m trying this code and I think it works!!!!
Let me make some tries anyway.
¿Do you know hot to show a menu with cats and subcats as in the top? I think the top one uses javascript to appear when mouse over. Something similar it would be good but at left column.

Thank you very much
Andrea

 
Magento Community Magento Community
Magento Community
Magento Community
 
adriancid
Jr. Member
 
Total Posts:  2
Joined:  2008-04-03
 

left_menu1.phtml

<div class="box layered-nav">
    <
div class="head">
      <
h3><?php echo $this->__('Browse By'?></h3>
    </
div>
    <
div class="border-creator">
      <
div class="narrow-by">
           <
dl id="narrow-by-list">
         
        
<?php foreach ($this->getStoreCategories() as $_category): ?>
            
<ul id="nav">
            
<?php echo $this->drawItem($_category?>
             
</ul>
        
<?php endforeach ?>
       
        
</dl>
    </
div>
   </
div>
</
div>
Only need some styles and the category´s submenu to right, in this moment I don´t know how move it
 
Magento Community Magento Community
Magento Community
Magento Community
 
CalinT
Jr. Member
 
Total Posts:  15
Joined:  2008-04-11
 

.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Spek
Sr. Member
 
Total Posts:  77
Joined:  2007-11-28
 
asfaltagmail - 10 April 2008 04:44 AM

Adrian, I’m trying this code and I think it works!!!!
Let me make some tries anyway.
¿Do you know hot to show a menu with cats and subcats as in the top? I think the top one uses javascript to appear when mouse over. Something similar it would be good but at left column.

Thank you very much
Andrea

It’s fairly easy to put together, but you need to know some css. Luckily that’s easy to pick up.
These are the changes I’ve made to create a menu that:

- shows subcategories of the active category (how deep you dig down is based on your css)
- drops down subcategories when I hover over the main category
- highlights the category and subcategory I’m in
- works with magento 1.0 in IE 6, 7 and Firefox 2 and 3

catalog.xml:

<reference name="left">
            <
block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/left_cat_nav.phtml" />
        </
reference>

left_cat_nav.phtml

<div class="left-nav-container">
    <
div class="left-nav">
        <
h4 class="no-display"><?php echo $this->__('Category Navigation:'?></h4>
        <
ul id="nav">
        
<?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php 
echo $this->drawItem($_category?>
        <?php 
endforeach ?>
        
</ul>
    </
div>
</
div>

And that’s it...you can make the menu behave any way you want through css from that point on.
If you have no idea where to begin, the article on drop down menu’s at ‘a list apart’ is a good start. Ask away if you need help…

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

I figured I would give a little copy and paste backup of the original before I make the change in the custom design area, just in case anyone needs to go back to default. I’m giving the new method a try to see if it works. Thanks for the hard work and help!

<!--<reference name="content">
<
block type="catalog/product_new" name="home.catalog.product.new" alias="product_new" template="catalog/product/new.phtml" after="cms_page"/>
<
block type="reports/product_viewed" name="home.reports.product.viewed" alias="product_viewed" template="reports/home_product_viewed.phtml" after="product_new"/>
<
block type="reports/product_compared" name="home.reports.product.compared" template="reports/home_product_compared.phtml" after="product_viewed" />
</
reference><reference name="right">
<
action method="unsetChild"><alias>right.reports.product.viewed</alias></action>
<
action method="unsetChild"><alias>right.reports.product.compared</alias></action>
</
reference>-->
 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

tried it, couldn’t figure out what was wrong at first. it works, but its only loading if you use a design that uses a left column (standard 3 column or 2 colum left, for example). of course this makes perfect sense, but i couldn’t figure out why it wasn’t working at first, lol.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Andrea, Argentina
Sr. Member
 
Total Posts:  164
Joined:  2007-12-05
Buenos Aires, Argentina
 

Ben:
I followed your steps but don’t see any change at my frontpage. Can you please be more specific about where edit and replace or add your code?

Thank you very much
Andrea

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top