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 15
Vertical category menu
 
LorenzoG
Member
 
Total Posts:  36
Joined:  2007-09-02
 

Magento comes with a template there the customers select the right category from a horisontal menu. My question is if it’s possible to also have a vertical category menu (see attached picture) in a template.

I think a vertical category menu is a must when you have very many categories, subcategories and items and that you want to show your possible customers which main/sub categories exists by default without that they need to pulldown a horisontal menu. My example is taken from pixmania.com and there they use a combination of horisontal menu (like Magento does now) and a vertical menu for to show the sub categories. I would love to see something similar in the Magento as well.

I hope you understand what I mean. Else I’m happy to try to explain it in a better way.

Image Attachments
vertical-category-menu.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Dan Orsborne
Member
 
Total Posts:  72
Joined:  2007-09-20
 

There is already a .phtml file for a side navigation here: \app\design\frontend\OC\default\template\catalog\navigation\left.phtml
By default this template will display the categories in a vertical list with the number of products in brackets beside the category name, BUT this only displays/works once you are below the top level of the site.

It wouldn’t take much to edit this file to match the functionality you want to acheive. I would suggest making a copy of the left.phtml file and creating your own version called something different so your functionality doesn’t get over written when there is a new release.

To use the left.phtml you need to do the following:
Open app\design\frontend\OC\default\layout\catalog\initLayout.xml and add the following

<reference name="top.menu">
     <
block type="catalog/navigation" name="catalog.topnav">
          <
action method="setTemplate"><template>catalog/navigation/top.phtml</template></action>
     </
block>
</
reference>
    
<!-- 
Start Edit -->
<
reference name="left.menu">
     <
block type="catalog/navigation" name="catalog.leftnav" before="-">
          <
action method="setTemplate"><template>catalog/navigation/left.phtml</template></action>
     </
block>
</
reference>
<!-- 
End Edit -->

Then open app\design\frontend\OC\default\layout\core\default.xml and add

<block type="core/text_list" name="left.menu" as="leftMenu"/>

Then you can add the following code snippet into your template file to display the menu where you want it:

<!-- [start] menu -->    
     
<?=$this->getChildHtml('leftMenu')?>
<!-- [end] menu -->
 
Magento Community Magento Community
Magento Community
Magento Community
 
LorenzoG
Member
 
Total Posts:  36
Joined:  2007-09-02
 

Thanks Dan for taking your time and writting this I’ll take a look and play with it during the weekend.

 
Magento Community Magento Community
Magento Community
Magento Community
 
YoavKutner
Guru
 
Avatar
Total Posts:  491
Joined:  2007-08-08
 

We are working on a new design package that should have this kind of functionality. In this design package, if you do not have an anchored category the sub categories of this category will be displayed in the left column. It will not drill down or open the sub category just display the immediate child categories.

I hope this makes sense.

Thanks

yoav

 
Magento Community Magento Community
Magento Community
Magento Community
 
k9ert
Jr. Member
 
Total Posts:  3
Joined:  2007-09-10
 

There seems to be some other XML files in the play. This tip only works for me, if i comment out a section in the file
app\design\frontend\default\OC\layout\catalog\category\layered.xml

<layoutUpdate>
<!--    
COMMENT THIS OUT !
    <
reference name="left">
        <
block type="catalog/layer_view" name="catalog.leftnav" before="-">
            <
action method="setTemplate"><template>catalog/layer/view.phtml</template></action>
        </
block>
        <
block type="directory/currency" name="currency" before="-">
            <
action method="setTemplate"><template>directory/currency.phtml</template></action>
        </
block>
    </
reference>
-->
    <
reference name="content">
        <
block type="catalog/category_view" name="category.products">
            <
action method="setTemplate"><template>catalog/category/view.phtml</template></action>
            <
block type="catalog/product_list" name="product_list"></block>
        </
block>
    </
reference>
</
layoutUpdate>

It took me some time until i got the relations between the XML-Files, the Block-Code and the .phtml-Files. But i am still sometimes lost:
- Why is this layered.xml file processed? Which are the general rules for processing the XML-Files?
- What´s the meaning of this “before-attribute”

 
Magento Community Magento Community
Magento Community
Magento Community
 
seldon
Sr. Member
 
Total Posts:  92
Joined:  2007-11-08
 
YoavKutner - 28 September 2007 11:28 AM

We are working on a new design package that should have this kind of functionality. In this design package, if you do not have an anchored category the sub categories of this category will be displayed in the left column. It will not drill down or open the sub category just display the immediate child categories.

I hope this makes sense.

Thanks

yoav

Im very interesting in a vertical menu as you describe. Is this design package already available?

Seldon

 
Magento Community Magento Community
Magento Community
Magento Community
 
YoavKutner
Guru
 
Avatar
Total Posts:  491
Joined:  2007-08-08
 

We should add more Magento design packages early next year.

Thanks

yoav

 
Magento Community Magento Community
Magento Community
Magento Community
 
seldon
Sr. Member
 
Total Posts:  92
Joined:  2007-11-08
 

So, that currently means i should implement it myself rasberry

 
Magento Community Magento Community
Magento Community
Magento Community
 
Spek
Sr. Member
 
Total Posts:  77
Joined:  2007-11-28
 
YoavKutner - 11 November 2007 10:06 PM

We should add more Magento design packages early next year.

Thanks

yoav

I’m just wondering if this feature is available yet in the latest version? Or would a design package be a seperate download? If so, where? I haven’t run into any so far and I’m wondering if I’m missing something. I was able to cook up a basic working version but I would like to start with the added functionality you’ve mentioned.

A quick overview of how I did this in 0.7.14800:

cut the following from app/design/frontend/default/default/template/page/html/header.phtml

<?=$this->getChildHtml('topMenu')?>

paste it into app/design/frontend/default/default/template/page/3colums.phtml

<div class="col-left side-col">
                
<?=$this->getChildHtml('store')?>
                <?
=$this->getChildHtml('left')?>
                <?
=$this->getChildHtml('topMenu')?>
                                
&nbsp;
            </
div>

in app/design/frontend/default/default/layout/page.xml

move the following at around line 40:

<block type="core/text_list" name="top.menu" as="topMenu"/>

to about line 47 (where the left block is):

<block type="core/text_list" name="left" as="left"/>
            <
block type="core/text_list" name="top.menu" as="topMenu"/>

That should do it, but you will notice that the CSS for the navigation is purely for a horizontal layout.

Some quick changes you can make in app/skin/frontend/infinite/default/css/menu.css at about line 35

this:

#nav li { float:left; }

to his:

#nav li { float:none; }

This will put the categories below eachother. Remember though that I just made these changes real quick, not to be used in a live environment, so it doesn’t look good, and it might very well not work as expected.
Subcategories for instance, are shown ontop of the other categories when you hover over a category with subcategories, and there’s something wrong with the z-index, making the subcategories appear below the center column, giving them a cut-off look. These problems shouldn’t be difficult to solve in the menu.css file.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pablo Lopez
Member
 
Avatar
Total Posts:  51
Joined:  2008-01-17
 

Hi there, I’m also trying to use a left sidebar for displaying the categories.
I have Magento V. 0.7.14800 and the file structure you are talking about is kind of different.
I don’t have either a app\design\frontend\XX\default\layout\catalog\initLayout.xml or app\design\frontend\XX\default\layout\core\default.xml

what I did is I added this code to de /layout/catalog.xml on the default layout ( <default>)

<reference name="left.menu">
            <
block type="catalog/navigation" name="catalog.leftnav" template="catalog/navigation/left.phtml"/>
        </
reference>

then, on layout/page.xml I added this line (above the “left” block side):

<block type="core/text_list" name="left.menu" as="leftMenu"/>

and finally , I made the php call to output the block… (i did it on the 2colums-left.phtml )

<?=$this->getChildHtml('leftMenu')?>

But didn’t get any results confused

So...any ideas what may be wrong? I don’t know if I understood correctly how I am supposed to call/reference/declare this boxes and then output them....

 
Magento Community Magento Community
Magento Community
Magento Community
 
Spek
Sr. Member
 
Total Posts:  77
Joined:  2007-11-28
 
Pablo Lopez - 18 January 2008 05:40 AM


So...any ideas what may be wrong? I don’t know if I understood correctly how I am supposed to call/reference/declare this boxes and then output them....

Look at my post before yours for instructions with your version. It’s not very well done and needs some work but atleast the categories show up vertically in the left block.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pablo Lopez
Member
 
Avatar
Total Posts:  51
Joined:  2008-01-17
 

@ben - I see that you come around with a way to do the menu vertically, but is more a “hack” than the right way smile
I try following the method posted in intro to layouts as I’m looking more into actually learning how to use magento than to only customize it.
Thanks for your help anyway smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
ad2joe
Member
 
Avatar
Total Posts:  60
Joined:  2007-08-31
 

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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ad2joe
Member
 
Avatar
Total Posts:  60
Joined:  2007-08-31
 

Hello,

I also created a variation of the vertical category menu display, that will show a list of main categories, with a subcategories for only the active one, and without empty main categories:

<?php
$_main_categories
=$this->getStoreCategories(10);
$res=new Mage_Catalog_Model_Layer();

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):
                    
$_sub_categories=$this->_getChildCategories($_main_category10); 
                    if(
$_sub_categories->count()): ?>
                        
<dt><a href="<?=$this->getCategoryUrl($_main_category)?>"<?if ($this->isCategoryActive($_main_category)):?> class="active"<?endif?>><?=$_main_category->getName()?></a></dt>
                        
<? if($_main_category->getName()===$res->getCurrentCategory()->name || $_main_category->entity_id===$res->getCurrentCategory()->parent_id): ?>
                            
<dd>
                                <
ol>
                                    
<?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>
                        
<? endif; ?>
                    <? 
endif; ?>
                <?endforeach?>
              
</dl>
              <
script type="text/javascript">decorateDataList('narrow-by-list')</script>
        
</div>
    </
div>
</
div>
<?endif;?>

Thanks, Joe.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pablo Lopez
Member
 
Avatar
Total Posts:  51
Joined:  2008-01-17
 

Exelent joe!! Works great.
I will like to add a couple of things to take in advice:
disable magento’s cache when workin’ with layouts. I wasted a bunch of time trying to figure out what’s wrong until I read a couple of post that explained this . You should do that on de admin, over system-> cache management or something like that-

The other thing is that you should disable the layered navigation when browsing categories, and show the left navigation ; cos it will overlap with the vertical menu you just created, and will show only the subcategories of the category you are currently browsing. This is in case you want to always show all categories

<catalog_category_default>
        <
reference name="left">
       <!-- 
this is joe's menu -->
            <block type="catalog/navigation" name="catalog.leftnavig" before="-" template="catalog/navigation/left_menu.phtml"/>
       <!--   I dont want to show the layered navigation, so I comment this line  -->
       <!--  <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>            -->
        </reference>
        <reference name="content">
            <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
                <block type="catalog/product_list" name="product_list"></block>
            </block>
        </reference>
    </catalog_category_default>

note that is on the catalog_category_default handle , not in the <default> handle.

 
Magento Community Magento Community
Magento Community
Magento Community
 
andrewmaier
Jr. Member
 
Avatar
Total Posts:  22
Joined:  2008-01-13
 

Hey guys, I’m trying to get this to work on my front page. Any idea why it wouldn’t work? I even created a test category and added an item to it. :shrugs:

Very frustrated with magento at the moment. Although, I know it’s my fault.

-A

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