Magento

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

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 !!

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

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

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

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!

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

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.

Peter Hamilton - 15 June 2008 02: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!

schmelzgeist - 16 June 2008 03:11 AM

you should name the PHTML File ‘vert_nav.phtml’

then it will work

but it is great, thanks Peter

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

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

thanks, didnt notice, now corrected.

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

overhaulmedia - 16 June 2008 12:38 PM

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

Peter Hamilton - 15 June 2008 02: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($open) { echo ' class="open"'; } ?><?php if($potential) { echo ' class="potential"'; } ?> ><?php if($potential&&$open) { echo 'v '; } elseif($potential) { echo '> '; }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($open) { echo ' class="subopen"'; } ?><?php if($potential) { echo ' class="potential"'; } ?><?php if(!$potential&&$open) { echo ' class="final"'; } ?> ><?php if($potential&&$open) { echo 'v '; } elseif($potential) { echo '> '; }?><?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($open) { echo ' 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-type: none; /* get rid of the bullets */
    padding:0;             /* no padding */
    margin:0;              /* no margin for IE either */
}

#vertical-nav ul li {
    margin: 0;
    padding: 0;
    display:block;
    margin-top: 1px; /* lines */
}

#vertical-nav ul ul li a,#vertical-nav ul li{
    background-color: #FFFFFF;
}
#vertical-nav ul li a {
    display: block;
    padding: 3px 3px 3px 23px;
    margin:0;
    text-decoration: none;
    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-weight: bolder;
    text-decoration: underline;
    color:#000000
}
#vertical-nav .final{
background-color:#ECECEC;
}

#vertical-nav ul ul li a {
    margin-left: 20px;
}

#vertical-nav ul ul ul li a {
  margin-left: 40px;     /* indent level 2 */
}

#vertical-nav a {
  color:#999999;
}
#vertical-nav a:hover {
  color:#666666;
}
#vertical-nav ul li ul li a {
    border-top-width: thin;
    border-bottom-width: thin;
    border-top-style: dotted;
    border-bottom-style: dotted;
    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