Magento

Magento Forum

Vertical category menu

LorenzoG Total Posts: 32 Joined: 2007-09-03 Ignore user	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 Click thumbnail to see full-size image
	Posted: September 27 2007 \| top

Dan Orsborne Total Posts: 72 Joined: 2007-09-20 Ignore user	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 -->` Signature http://www.igentics.com Igentics are Internet Engineers, we like to look at things from a different angle. The end result being a fully integrated system encompassing the whole supply chain from supplier to end user, incorporating all legacy systems and data. This increases profits and reduces cost.
	Posted: September 28 2007 \| top \| # 1

LorenzoG Total Posts: 32 Joined: 2007-09-03 Ignore user	Thanks Dan for taking your time and writting this I’ll take a look and play with it during the weekend.
	Posted: September 28 2007 \| top \| # 2

YoavKutner Total Posts: 479 Joined: 2007-08-08 Ignore user	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
	Posted: September 28 2007 \| top \| # 3

k9ert Total Posts: 3 Joined: 2007-09-10 Ignore user	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”
	Posted: October 1 2007 \| top \| # 4

seldon Total Posts: 92 Joined: 2007-11-08 Ignore user	YoavKutner - 28 September 2007 12:28 PM 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
	Posted: November 11 2007 \| top \| # 5

YoavKutner Total Posts: 479 Joined: 2007-08-08 Ignore user	We should add more Magento design packages early next year. Thanks yoav
	Posted: November 12 2007 \| top \| # 6

seldon Total Posts: 92 Joined: 2007-11-08 Ignore user	So, that currently means i should implement it myself
	Posted: November 12 2007 \| top \| # 7

Spek Total Posts: 62 Joined: 2007-11-28 Ignore user	YoavKutner - 11 November 2007 11: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')?>   </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.
	Posted: January 16 2008 \| top \| # 8

Pablo Lopez Total Posts: 51 Joined: 2008-01-17 Ignore user	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 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....
	Posted: January 18 2008 \| top \| # 9

Spek Total Posts: 62 Joined: 2007-11-28 Ignore user	Pablo Lopez - 18 January 2008 06: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.
	Posted: January 18 2008 \| top \| # 10

Pablo Lopez Total Posts: 51 Joined: 2008-01-17 Ignore user	@ben - I see that you come around with a way to do the menu vertically, but is more a “hack” than the right way 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
	Posted: January 18 2008 \| top \| # 11

Joe Total Posts: 60 Joined: 2007-08-31 Ignore user	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')?>  </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_category, 10); ?> <?foreach ($_sub_categories as $_sub_category):?> <li>   -><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. Thanks, Joe.
	Posted: January 21 2008 \| top \| # 12

Joe Total Posts: 60 Joined: 2007-08-31 Ignore user	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_category, 10); 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>  -><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.
	Posted: January 22 2008 \| top \| # 13

: Pablo Lopez

Total Posts: 51
Joined: 2008-01-17

Ignore user

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

eCommerce Software for Online Growth

Magento Forum