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 9
left side caterogy list
 
James B
Jr. Member
 
Total Posts:  19
Joined:  2007-11-13
 

I was following another thread on how to get the left hand side category list showing on the home page. All was going well untill it started to reference folders and files that are no longer in the current build. So is there a tutorial somewhere on here that is up to date?

Thanks,
James.

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

I’m interested tooooo :-D

 
Magento Community Magento Community
Magento Community
Magento Community
 
i960
Guru
 
Avatar
Total Posts:  633
Joined:  2007-10-01
Bakersfield, CA
 

I need this too.  I have 15 main categories right now and I’ll be adding a few more.  Having them all across the top looks too cluttered.

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

The same here.

 
Magento Community Magento Community
Magento Community
Magento Community
 
armin
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2008-01-15
 

Guys, Why don’t you try put the header category navigation in left navigation bar?. do i make sence?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Black Cat
Mentor
 
Avatar
Total Posts:  3481
Joined:  2008-02-14
Assemini / Cagliari (Italy)
 

’m interested too

 
Magento Community Magento Community
Magento Community
Magento Community
 
James B
Jr. Member
 
Total Posts:  19
Joined:  2007-11-13
 

Armin you make perfect sence! however trying to lock pick the right files to provoke a reaction from magento is like trying to break an enigma :D Its taken me 3 days to move the search box, but even that isnt where i want it.
I am really digging Magento, however the documentation is still in the theory not practice stage, so it is holding me back.

 
Magento Community Magento Community
Magento Community
Magento Community
 
armin
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2008-01-15
 
James B - 24 March 2008 02:30 AM

Armin you make perfect sence! however trying to lock pick the right files to provoke a reaction from magento is like trying to break an enigma :D Its taken me 3 days to move the search box, but even that isnt where i want it.
I am really digging Magento, however the documentation is still in the theory not practice stage, so it is holding me back.

Hi James B

James B, if you don’t mind I’ll try to help you just let me know what do you to do?

 
Magento Community Magento Community
Magento Community
Magento Community
 
dan_w
Sr. Member
 
Total Posts:  290
Joined:  2008-01-04
 

Creating a vertical left-side category menu really is pretty easy. All that you have to do is create a new (really just copied) template and adjust the css. For the navigation, magento outputs an unordered-list, making it pretty easy to put in a vertical format using a couple of lines of css. There are three things that need to be done in order to output a vertical category structure:
1. Create vertical category template
2. Create CSS
3. Reference in xml files.

1. Create Vertical Category Template
Open template/catalog/navigation/top.phtml. Which should look like

<div class="header-nav-container">
    <
div class="header-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>
    
<?php echo $this->getChildHtml('topLeftLinks'?>
</div>
Change:
header-nav-container to vertical-nav-container
header-nav to vertical nav
nav to nav_vert

Which would make look like:

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

Save this file as template/catalog/navigation/vert_nav.phtml.
2. Create CSS for vertical menu
Now that you have the template for the vertical navigation, you need to adjust the css to make it vertical. Copy the css below into you menu.css file:

/**********************************************Vertical Nav ****************************************/
#nav_vert { padding:0 20px; font-size:1em; z-index:999; width:190px; }

/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */
#nav_vert li {
width:175px;
list-style:none;
position:relative;
text-align:left;
}
#nav_vert li.over { z-index:999; }
#nav_vert li.active { z-index:999; } /* to prevent the li separator from showing through on mouseover on li */
#nav_vert a { line-height:1.3em; }
#nav_vert a, #nav_vert a:hover { display:block; text-decoration:none; }
#nav_vert span { display:block; cursor:pointer; }

/************ 1ST LEVEL ***************/
#nav_vert li { float:left; background:url(../images/nav_bg.gif) repeat-x 50%; height:30px; margin-right:1px; }
#nav_vert li.active a { color:#4c6a16; }
#nav_vert a {

float:left;
padding:5px 12px 6px 8px;
color:#4c6a16;
font-weight:bold;
font-family:Trebuchet MS;
font-size:13px;}
#nav_vert li.over a, #nav_vert a:hover { color:#CCCCCC; }

/************ 1ST LEVEL RESET ************/
#nav_vert ul li, #nav_vert ul li.active {

float:none;
height:auto;
background:none;
margin:0;
}
#nav_vert ul a, #nav_vert ul a:hover {
float:none;
padding:0;
background:none;
}
#nav_vert ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ***********/
#nav_vert ul {
position: absolute;
width:15em;
margin-left:125px;
top:5px;
left:-10000px;
border:1px solid #666666;
}

/* Show menu */
#nav_vert li.over ul { left:0; }
#nav_vert li.over ul ul { left:-10000px; }
#nav_vert li.over ul li.over ul { left:100px; }

#nav_vert ul li a { background:#FFFFFF/*#ecf3f6*/; }
#nav_vert ul li a:hover { background: #F2F1D2; /*#d5e4eb;*/ }
#nav_vert ul li a span { background:url(../images/nav_divider.gif) repeat-x 0 100%; }
#nav_vert ul li a, #nav_vert ul li a:hover { color:#2f2f2f !important; }
#nav_vert ul span, #nav_vert ul li.last li span { padding:3px 15px 4px 15px;}
#nav_vert ul li.last span { background:none; }

/************ 3RD+ LEVEL ************/

#nav_vert ul ul { top:5px;}
#nav_vert ul ul ul { left:-10000px;}
#nav_vert li.over ul li.over ul ul { left:-10000px;}
#nav_vert li.over ul li.over ul li.over ul { left:100px; }

/* Fix for the IE bug */

#nav_vert iframe {
position: absolute;
left: -1px;
top: 0;
z-index: -1;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

Note: The css is essentially the same for the horizontal nav, except for two spots. nav_vert and nav_vert li. Notice, we put a width on these two items, which will restrict the category menu to the width of the column, thus creating a vertical, rather than horizontal menu, which doesn’t have a defined width for the line items. You’ll also notice that we created a new container and box for the vertical menu called vertical-nav-container and vertical-nav. these allow for additional markup and styling that can be added to the main boxes.css file. Here, I will leave them blank. Also, please note that the above css was copied and altered from one of our test sites, so it may reference background-images that you do not have. Like I said the important think is putting the width restriction on the main vert_nav div and the vert_nav li. The rest can be customised for your site.

3. Reference your new menu
Ok, now you have a new vertical category menu that is not showing up anywhere. Great. You need to reference the new template in the catalog.xml for your template. In the <default></default> block of you catalog.xml file add:
<reference name="left">
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" />
</reference>
The default block should be at the top of your catalog.xml file.

There is one thing that I should point out, this will appear after the layered navigation on the left-hand column. This is just one-way, I’m sure, of how to achieve this, and was put together hastily.

 
Magento Community Magento Community
Magento Community
Magento Community
 
dan_w
Sr. Member
 
Total Posts:  290
Joined:  2008-01-04
 

@ James B: Sorry, but I didn’t read your original post closely enough. If you just wanted to added the vertical nav to the homepage, don’t alter the catalog.xml file (step 3). Instead, got to admin ->cms->manage pages and edit your homepage. Click “customer design” on the left column and add
<reference name="left">
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" />
</reference>
to the Layout Update XML field. Make sure the layout is set to 2 columns left bar or 3 columns. This will just add the vertical navigation to the homepage.

 
Magento Community Magento Community
Magento Community
Magento Community
 
donWon
Jr. Member
 
Total Posts:  2
Joined:  2008-03-17
 

Great post! While we’re at it, can we have the manufacturer’s list show on the left side also? Statistics show that my customer demographic knows the brands they want and generally click on it at first glance… Helps conversion.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lilquit
Jr. Member
 
Total Posts:  23
Joined:  2008-01-05
 

yes manufacturer list is important too!

 
Magento Community Magento Community
Magento Community
Magento Community
 
dan_w
Sr. Member
 
Total Posts:  290
Joined:  2008-01-04
 

Yes, we have been looking into how we are going to accomplish this as well. Since manufacturers is an attribute, we have yet to decide on how we will design this. I am going to look at it this afternoon and see if we can make any head way. Any suggestions from others would be appreciated.

 
Magento Community Magento Community
Magento Community
Magento Community
 
donWon
Jr. Member
 
Total Posts:  2
Joined:  2008-03-17
 

That would be awesome! It would also be nice to have it SEO friendly as well and I know Magento is built to have anything SEO friendly but maybe to have it automated to where if I added a manufacturer “Apple” the link will be http://www.store.com/Apple.html. I would even go as far to say the manufacturer should be a separate module just for future customizations…

 
Magento Community Magento Community
Magento Community
Magento Community
 
cshontz
Sr. Member
 
Avatar
Total Posts:  91
Joined:  2007-11-07
 

Anyone make any progress on vertical manufacturer list?

 
Magento Community Magento Community
Magento Community
Magento Community
 
breastfed
Sr. Member
 
Avatar
Total Posts:  194
Joined:  2007-09-24
Münster - Germany
 

The Result of adding:

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

To the Home Page is this Error:

Fatal error: Call to a member function getChildren() on a non-object in D:\xampp\htdocs\dev\magento\app\code\core\Mage\Catalog\Block\Navigation.php on line 76

What have i done wrong?

Thank you!

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