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
 
tomislavbilic
Member
 
Avatar
Total Posts:  69
Joined:  2007-11-17
Osijek, Croatia
 

I’m not 100% sure it is a good idea to update default Magento files, especially app/code/core/Mage/ folder. It will work, no question about it, but if you get used to edit those often, future Magento upgrades could become a nightmare.

My approach is to leave all default files intact and to modify only following folders:
/skin/frontend/default/[theme]/
/app/design/frontend/default/[theme]/

... as is stated in Designer’s Guide to Magento

 
Magento Community Magento Community
Magento Community
Magento Community
 
magento-marie
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-01
France
 

Hello everyone,

Josh, did you post your left menu installation in the wiki ? I looked for it and found none.

Or did someone come up with installing it and make it work ?
I am really interested in this kind of menu !
Maybe I can help back on some other topic, just ask !

By the way Tomislav, I agree with you, only interface files should be modified, but until Magento Team offers us a release with this native left menu, maybe there’s no choice…

Thanks to anyone who’ll help !!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Peter Hamilton
Jr. Member
 
Total Posts:  3
Joined:  2008-06-13
 

Hi all, I dont know how far everone has got with the vertical category navigation as i started it as a toy project a day or two ago when i saw this thread.

here is what i have so far, it does a menu from your categories and creates it 3 levels deep (more could be added). The advantage is that only the theme files are being changed, no magento system files (mage etc).

layout (catalog.xml)
Added the following to the <default> ..code.. </default> section

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

added a file called vert_nav.phtml in app/design/frontend/[yourinterface]/[yourtheme]/template/catalog/navigation/ with the following code

<div class="vertical-nav-container box base-mini">
    <
div id="vertical-nav">
        <
div class="head">
            <
h4><?php echo $this->__('Categories'?></h4>
        </
div>
        <
ul id="nav_vert">
            
<?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php $open 
$this->isCategoryActive($_category); ?>
            <?php $potential 
$_category->hasChildren(); ?>
            
<li><a href="<?php echo $this->getCategoryUrl($_category); ?>"<?php if($openecho ' class="open"'} ?><?php if($potentialecho ' class="potential"'} ?> ><?php if($potential&&$openecho 'v 'elseif($potentialecho '> '}else{ echo '  '}?><?php echo $_category->getName();?></a>
                
<?php if ($open && $potential): ?>
                
<ul>
                    
<?php foreach ($_category->getChildren() as $subcategory): ?>
                    <?php $subCat 
Mage::getModel('catalog/category')->load($subcategory); ?>
                    <?php $open 
$this->isCategoryActive($subCat); ?>
                    <?php $potential 
$subCat->hasChildren(); ?>
                    
<li><a href="<?php echo $this->getCategoryUrl($subCat); ?>"<?php if($openecho ' class="subopen"'} ?><?php if($potentialecho ' class="potential"'} ?><?php if(!$potential&&$openecho ' class="final"'} ?> ><?php if($potential&&$openecho 'v 'elseif($potentialecho '> '}?><?php echo $subCat->getName(); ?></a>
                        
<?php if ($open && $potential): ?>
                        
<ul>
                            
<?php foreach ($subcategory->getChildren() as $subsubcategory): ?>
                            <?php $subsubCat 
Mage::getModel('catalog/category')->load($subsubcategory); ?>
                            <?php $open 
$this->isCategoryActive($subsubCat?>
                            
<li><a href="<?php echo $this->getCategoryUrl($subsubCat); ?>" <?php if($openecho ' class="final"'} ?>><?php echo $subsubCat->getName(); ?></a></li>
                            
<?php endforeach; ?>
                        
</ul>
                        
<?php endif; ?>
                    
</li>
                    
<?php endforeach; ?>
                
</ul>
                
<?php endif; ?>
            
</li>
            
<?php endforeach ?>
        
</ul>
    </
div>
</
div>

Add to (or replace) skin/[yourinterface]/[yourtheme]/css/menu.css with the following…

/***************VERTICAL**********************/
/*****ALL*****/

#vertical-nav ul {
    list-style-typenone/* get rid of the bullets */
    
padding:0;             /* no padding */
    
margin:0;              /* no margin for IE either */
}

#vertical-nav ul li {
    
margin0;
    
padding0;
    
display:block;
    
margin-top1px/* lines */
}

#vertical-nav ul ul li a,#vertical-nav ul li{
    
background-color#FFFFFF;
}
#vertical-nav ul li a {
    
displayblock;
    
padding3px 3px 3px 23px;
    
margin:0;
    
text-decorationnone;
    
height:15px;           /* hint for IE, alternatively remove whitespace from HTML */
    
background-color#CCCCCC;
}
#vertical-nav ul li .open, #vertical-nav .activesubsub, #vertical-nav .subopen {
    
font-weightbolder;
    
text-decorationunderline;
    
color:#000000
}
#vertical-nav .final{
background-color:#ECECEC;
}

#vertical-nav ul ul li a {
    
margin-left20px;
}

#vertical-nav ul ul ul li a {
  
margin-left40px;     /* indent level 2 */
}

#vertical-nav a {
  
color:#999999;
}
#vertical-nav a:hover {
  
color:#666666;
}
#vertical-nav ul li ul li a {
    
border-top-widththin;
    
border-bottom-widththin;
    
border-top-styledotted;
    
border-bottom-styledotted;
    
border-top-color#CCCCCC;
    
border-bottom-color#CCCCCC;
    
margin-bottom:0px;
    
margin-top:0px;
}
#vertical-nav ul li ul li {
    
margin-bottom:0px;
    
margin-top:0px;
}

I know there are probably loads of ways to improve this but its my first attempt and i only started on it an hour ago.
im afraid my code health isnt very good so working out which bits of the css control the design could be tricky but some common sense and logic should set you sound!

 
Magento Community Magento Community
Magento Community
Magento Community
 
magento-marie
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-01
France
 

Thank you so much Peter, I’ll experience it today and will keep you posted.

 
Magento Community Magento Community
Magento Community
Magento Community
 
magento-marie
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-01
France
 

Peter,

Awesome menu, it’s just what i needed : display cateories and when a category is clicked, display sub-categories .

Thank you very much for the help!
Don’t hesitate to ask me for any design tip.

 
Magento Community Magento Community
Magento Community
Magento Community
 
schmelzgeist
Sr. Member
 
Total Posts:  92
Joined:  2008-05-27
Marzipane World Capital (Lübeck, Germany)
 
Peter Hamilton - 15 June 2008 01:47 PM

...<snip>…


added a file called vertnav.phtml in app/design/frontend/[yourinterface]/[yourtheme]/template/catalog/navigation/ with the following code

<div class="vertical-nav-container box base-mini">
<div id="vertical-nav">
<div class="head">
<h4><?php echo $this->__('Categories') ?></h4>
</div>
[… ]


[/code ]



I know there are probably loads of ways to improve this but its my first attempt and i only started on it an hour ago.
im afraid my code health isnt very good so working out which bits of the css control the design could be tricky but some common sense and logic should set you sound!

you should name the PHTML File ‘vert_nav.phtml’

then it will work wink

but it is great, thanks Peter smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
Peter Hamilton
Jr. Member
 
Total Posts:  3
Joined:  2008-06-13
 
schmelzgeist - 16 June 2008 02:11 AM

you should name the PHTML File ‘vert_nav.phtml’

then it will work wink

but it is great, thanks Peter smile

Thanks, what is the reason behind this or is it just good code practise?

 
Magento Community Magento Community
Magento Community
Magento Community
 
magento-marie
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-01
France
 

Peter,

No problem, it’s just that you advice to create a file called vertnav.phtml, and in the code, the file vert_nav.phtml is called.
It just needed to be corrected.

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

added a file called vertnav.phtml in app/design/frontend/[yourinterface]/[yourtheme]/template/catalog/navigation/ with the following code

 
Magento Community Magento Community
Magento Community
Magento Community
 
Peter Hamilton
Jr. Member
 
Total Posts:  3
Joined:  2008-06-13
 

smile thanks, didnt notice, now corrected.

 
Magento Community Magento Community
Magento Community
Magento Community
 
overhaulmedia
Jr. Member
 
Total Posts:  17
Joined:  2008-05-23
 

Do you guys know how to build the vertical menu “browse by” with attributes etc like in this screen shot? I have only scanned through this thread and it seems you guys got a basic version working with categories and sub categories.

http://www.magentocommerce.com/images/uploads/grid-highres.jpg

 
Magento Community Magento Community
Magento Community
Magento Community
 
golles
Sr. Member
 
Total Posts:  257
Joined:  2008-01-15
 
overhaulmedia - 16 June 2008 11:38 AM

Do you guys know how to build the vertical menu “browse by” with attributes etc like in this screen shot? I have only scanned through this thread and it seems you guys got a basic version working with categories and sub categories.

http://www.magentocommerce.com/images/uploads/grid-highres.jpg

the browse by functionality as per the image is created using categories / attributes and making them filterable on the frontend - this is standard ‘ out of the box’ magento functionality

look through the help sections on creating products / attributes etc

 
Magento Community Magento Community
Magento Community
Magento Community
 
jay@grimestore
Member
 
Avatar
Total Posts:  49
Joined:  2008-04-02
 
Peter Hamilton - 15 June 2008 01:47 PM

layout (catalog.xml)
Added the following to the <default> ..code.. </default> section

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

added a file called vert_nav.phtml in app/design/frontend/[yourinterface]/[yourtheme]/template/catalog/navigation/ with the following code
<div class="vertical-nav-container box base-mini">
    <
div id="vertical-nav">
        <
div class="head">
            <
h4><?php echo $this->__('Categories'?></h4>
        </
div>
        <
ul id="nav_vert">
            
<?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php $open 
$this->isCategoryActive($_category); ?>
            <?php $potential 
$_category->hasChildren(); ?>
            
<li><a href="<?php echo $this->getCategoryUrl($_category); ?>"<?php if($openecho ' class="open"'} ?><?php if($potentialecho ' class="potential"'} ?> ><?php if($potential&&$openecho 'v 'elseif($potentialecho '> '}else{ echo '  '}?><?php echo $_category->getName();?></a>
                
<?php if ($open && $potential): ?>
                
<ul>
                    
<?php foreach ($_category->getChildren() as $subcategory): ?>
                    <?php $subCat 
Mage::getModel('catalog/category')->load($subcategory); ?>
                    <?php $open 
$this->isCategoryActive($subCat); ?>
                    <?php $potential 
$subCat->hasChildren(); ?>
                    
<li><a href="<?php echo $this->getCategoryUrl($subCat); ?>"<?php if($openecho ' class="subopen"'} ?><?php if($potentialecho ' class="potential"'} ?><?php if(!$potential&&$openecho ' class="final"'} ?> ><?php if($potential&&$openecho 'v 'elseif($potentialecho '> '}?><?php echo $subCat->getName(); ?></a>
                        
<?php if ($open && $potential): ?>
                        
<ul>
                            
<?php foreach ($subcategory->getChildren() as $subsubcategory): ?>
                            <?php $subsubCat 
Mage::getModel('catalog/category')->load($subsubcategory); ?>
                            <?php $open 
$this->isCategoryActive($subsubCat?>
                            
<li><a href="<?php echo $this->getCategoryUrl($subsubCat); ?>" <?php if($openecho ' class="final"'} ?>><?php echo $subsubCat->getName(); ?></a></li>
                            
<?php endforeach; ?>
                        
</ul>
                        
<?php endif; ?>
                    
</li>
                    
<?php endforeach; ?>
                
</ul>
                
<?php endif; ?>
            
</li>
            
<?php endforeach ?>
        
</ul>
    </
div>
</
div>

Add to (or replace) skin/[yourinterface]/[yourtheme]/css/menu.css with the following…
/***************VERTICAL**********************/
/*****ALL*****/

#vertical-nav ul {
    list-style-typenone/* get rid of the bullets */
    
padding:0;             /* no padding */
    
margin:0;              /* no margin for IE either */
}

#vertical-nav ul li {
    
margin0;
    
padding0;
    
display:block;
    
margin-top1px/* lines */
}

#vertical-nav ul ul li a,#vertical-nav ul li{
    
background-color#FFFFFF;
}
#vertical-nav ul li a {
    
displayblock;
    
padding3px 3px 3px 23px;
    
margin:0;
    
text-decorationnone;
    
height:15px;           /* hint for IE, alternatively remove whitespace from HTML */
    
background-color#CCCCCC;
}
#vertical-nav ul li .open, #vertical-nav .activesubsub, #vertical-nav .subopen {
    
font-weightbolder;
    
text-decorationunderline;
    
color:#000000
}
#vertical-nav .final{
background-color:#ECECEC;
}

#vertical-nav ul ul li a {
    
margin-left20px;
}

#vertical-nav ul ul ul li a {
  
margin-left40px;     /* indent level 2 */
}

#vertical-nav a {
  
color:#999999;
}
#vertical-nav a:hover {
  
color:#666666;
}
#vertical-nav ul li ul li a {
    
border-top-widththin;
    
border-bottom-widththin;
    
border-top-styledotted;
    
border-bottom-styledotted;
    
border-top-color#CCCCCC;
    
border-bottom-color#CCCCCC;
    
margin-bottom:0px;
    
margin-top:0px;
}
#vertical-nav ul li ul li {
    
margin-bottom:0px;
    
margin-top:0px;
}

I have followed these steps yet nothing is showing up on my site, do i need to call this out anywhere to make it appear? Here is my site http://www.grimedigital.com/beta

 
Magento Community Magento Community
Magento Community
Magento Community
 
golles
Sr. Member
 
Total Posts:  257
Joined:  2008-01-15
 
jay@grimestore - 17 June 2008 03:57 AM


I have followed these steps yet nothing is showing up on my site, do i need to call this out anywhere to make it appear? Here is my site http://www.grimedigital.com/beta

try refreshing all of the cache

admin>cache management

 
Magento Community Magento Community
Magento Community
Magento Community
 
cibernoid
Sr. Member
 
Avatar
Total Posts:  208
Joined:  2008-02-12
 

Cool, it works fine although looks like the menu somehow slow down the whole site. Does anyone experienced the same issue?

 
Magento Community Magento Community
Magento Community
Magento Community
 
StarGumbo
Jr. Member
 
Total Posts:  7
Joined:  2008-02-14
 

Has anyone figured out how to display the products within the category list?  I have a small catalog but would like to list products and subcategories under the categories in the left nav menu.

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