Call-back icon  Sales: Call 877.832.5289 (N America)|310.295.4144 (International)

Magento

eCommerce Software for Online Growth

725 users online   

Magento Forum

   
Page 4 of 8
Vertical category menu
 
FetchDesigns
Member
 
Avatar
Total Posts:  47
Joined:  2008-04-11
Chicago, IL
 

I tried the same thing as asfaltagmail and got the same results… nothing happened.  Any ideas?

 Signature 

Stephanie
Web Design & Development… FetchDesigns.com

 
 
Posted: April 23 2008
   |  top  |  # 46 
 
Magento Community Magento Community
Magento Community
Magento Community
 
josh_trivera
Member
 
Avatar
Total Posts:  62
Joined:  2008-02-12
Wisconsin, USA
 

I am back with 1.0 and a successful navigation element that covers all 243 of Eins’s categories.

app/design/.../template/catalog/navigation/left.phtml (i renamed the default, got rid of the layered nav)

<ul class="navhead">
        <div class="box layered-nav">
    <?php
            foreach ($this->getStoreCategories() as $_category)
            {
                       echo $this->drawItem($_category);
            
            } 
    ?>  
        </div>
 </ul>

app/code/core/Mage/Catalog/Block/Navigation.php (backed up)
code is being updated* (cleaner, but this works)

public function drawItem($category, $level=0, $last=false)
    {
        //set output
        $html = '';
        //return if empty categories request
        if (!$category->getIsActive()) {
            return $html;
        }
        //set sub-categories and sub-count
        $children = $category->getChildren();
        $hasChildren = $children && $children->count();        
        //display only Populated Main Categories kills Home category empty display
        if ($level == 0 && $hasChildren != 'false'){
            return $html;
        }
        else{
        //open category encapsulation
        if($level == 0){
           $html .= '<div class=head><dt class="title"';
        } 
        if ($level == 1){
        $html .= '<dt' ;
        }
        /* performed in extended drawItem2 
        else {
        $html .= '<dd><ul><li' ;
        }    
        //add in javascript
        if ($level > 0) {
             $html .= ' onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"';
        }
    */
        //define class level of categories for css/javascript
        $html .= ' class="level'.$level;
        //define if the category will be displayed
        if ($this->isCategoryActive($category)) {
            $html .= ' active';
        }
       //define if the last category item for css/javascript
     /*   if ($last) {
            $html .= ' last';
        }
    */  //figure out if / how many subcategories
            if ($hasChildren) {
                $cnt = 0;
                foreach ($children as $child) {
                    if ($child->getIsActive()) {
                        $cnt++;
                    }
                }
            // if you have children, you are set parent
                $html .= ' parent';
            }
       // closing of opening encapsulation
       $html .= '" >';  
 //------------------------------------------------------------------------------------  
        //Displaying Category Name/Link
        $html .= '<a href=" ' . $this->getCategoryUrl($category) .' " >';
        if($level == 0){
        $html .= 'Shop by ' . $category->getName() . '</a>' ; }
        elseif($level == 1) {
        $html .= $category->getName() . '</a>';}
        else{
        $html .= $category->getName() . '</a>';}
        //------------------------------------------------------------------------------------           
        //close Category Encapsulation
        if($level == 0){
        $html .= '</dt></div>';
        }
        if ($level == 1){
        $html .= '</dt>';
        }
        /*else {
        $html .= '</li></ul></dd>' ;
        }*/        
        //create border-encapsulation for child Categories
        if($level == 0){
        $html.= ' <div class ="border-creator"><div class="narrow-by"><dl id="narrow-by-list"> ';
        $html .= '<a href=" ' . $this->getCategoryUrl($category) .' " >';
        $html .= '<span id="view"> View All ' . $category->getName() . '</a></span>'."\n" ;
        }
           //Sub level Display
        if ($hasChildren){
            $jab = 0;
            $htmlChildren = '';
            foreach ($children as $child) {
            //pull from drawitem2()
           $htmlChildren.= $this->drawItem2($child, $level+1, ++$jab >= $cnt);
            }    
            if (!empty($htmlChildren)) {
            $html.= '<ul class="level' . $level . '">'."\n".$htmlChildren.'</ul>';
            }    
        }         
        //close border-encapsulation
        if ($level == 0){
        $html.='</dt></div></div><br />';
        }      
        return $html;
        }
    }


//--------Extension of drawItem

public function drawItem2($category, $level=0, $last=false)
    {
        //set output
        $html = '';    
        //return if empty categories request
        if (!$category->getIsActive()) {
            return $html;
        }
        //set sub-categories and sub-count
        $children = $category->getChildren();
        $hasChildren = $children && $children->count();    
        
        //open category encapsulation
        $html .= '<li' ;
        //add in javascript will need to modify later with prototype /skin.../js/
         $html .= ' onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"'; 
        //define class level of categories for css/javascript
        $html .= ' class="level'.$level;
        //define if the category will be displayed
        if ($this->isCategoryActive($category)) {
            $html .= ' active';
        }
       //define if the last category item for css/javascript
        if ($last) {
            $html .= ' last';
        } 
           //figure out if we have and how many subcategories
            if ($hasChildren) {
                $cnt = 0;
                foreach ($children as $child) {
                    if ($child->getIsActive()) {
                        $cnt++;
                    }
                }
            // if you have children, you are set parent
                $html .= ' parent';
            }
       
       // closing of opening encapsulation
       $html .= '" >';

 
 
Posted: April 25 2008
   |  top  |  # 47 
 
Magento Community Magento Community
Magento Community
Magento Community
 
josh_trivera
Member
 
Avatar
Total Posts:  62
Joined:  2008-02-12
Wisconsin, USA
 

//Displaying Category Name/Link
        $html .= '<a href=" ' . $this->getCategoryUrl($category) .' " ><span class = "sublevel'. $level . '">' . $category->getName() . '</span></a>';
        //------------------------------------------------------------------------------------
        
           
    //need to check registry to make sure categories are active to use: getCurrentCategoryPath and OpenCategoryItem    
        if(Mage::registry('current_category')){
        
        if (in_array($category->getId(), $this->getCurrentCategoryPath())){
            
            $children = $category->getChildren();
            $hasChildren = $children && $children->count();

            if ($hasChildren) {
                $jab = 0;
                $htmlChildren = '';
                
                foreach ($children as $child) {
                    $htmlChildren.= $this->drawOpenCategoryItem($child);
                }

                if (!empty($htmlChildren)) {
                    $level = ++$level;
                    $html.= '<ul class="sub' . $level .'">'."\n"
                            .$htmlChildren
                            .'</ul>';
                }
            }
            }
            }
        
        //Sub level Display v2 in development 
        
      /*  
          if(Mage::registry('current_category')){
        
        if (in_array($category->getId(), $this->getCurrentCategoryPath())){
              
            if ($hasChildren){
            $josh_trivera = 0;
            $htmlChildren = '';
            
            foreach ($children as $child) {
            
           $htmlChildren.= $this->drawItem2($child, $level+1, ++$jab >= $cnt);
            }    
            
            if (!empty($htmlChildren)) {
            $html.= '<ul class="level' . $level . '">'."\n".$htmlChildren.'</ul></br>';
            }    
        
        }}
        } */
    
        
        
      
      //close Category Encapsulation
        $html .= '</li>' ;
      
        return $html;
        
    }




//---------------------------------------------------


/**
     *Category Drawer Modified by Josh_trivera
     *
     * @param Mage_Catalog_Model_Category $category
     * @return string
     */
    public function drawOpenCategoryItem($category) {
        $html = '';
        if (!$category->getIsActive()) {
            return $html;
        }
        $level = 0;
        $html.= '<li';

        if ($this->isCategoryActive($category)) {
            $html.= ' class="active"';
        }

        $html.= '>'."\n";
        $html.= '<a href="'.$this->getCategoryUrl($category).'"><span>'.$category->getName().'</span></a>'."\n";
        
        if (in_array($category->getId(), $this->getCurrentCategoryPath())){
            
            $children = $category->getChildren();
            $hasChildren = $children && $children->count();

            if ($hasChildren) {
                $htmlChildren = '';
                foreach ($children as $child) {
                    $htmlChildren.= $this->drawOpenCategoryItem($child);
                }

                if (!empty($htmlChildren)) {
                    $html.= '<ul class ="subsub'. $level .'">'."\n"
                            .$htmlChildren
                            .'</ul>';
                }
            }
            
        }
        $html.= '</li>'."\n";
        return $html;
    }
http://www.eins1.us

Image Attachments
nav_sample2.pngnav_sample1.png
Click thumbnail to see full-size image
 
 
Posted: April 25 2008
   |  top  |  # 48 
 
Magento Community Magento Community
Magento Community
Magento Community
 
emagine
Member
 
Total Posts:  35
Joined:  2007-12-10
 

<div class="box layered-nav">
    <div class="head">
      <h3><?php echo $this->__('Browse By') ?></h3>
    </div>
    <div class="border-creator">
      <div class="narrow-by">
           <dl id="narrow-by-list">
           
         <dd>
         <ol>        
        <?php foreach ($this->getStoreCategories() as $_category): ?>
            <dt>
             <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="active"<?php endif ?>><?php echo $this->htmlEscape($_category->getName()) ?></a>
            </dt>
        <?php endforeach ?>
        
       </ol>
      </dd>
      </dl><script type="text/javascript">decorateDataList('narrow-by-list')</script>
    </div>
   </div>
</div>

Is there any way to make this code so only the sub categories of the current clicked category shows up?

 
 
Posted: April 26 2008
   |  top  |  # 49 
 
Magento Community Magento Community
Magento Community
Magento Community
 
Spek
Member
 
Total Posts:  62
Joined:  2007-11-28
 
emagine - 26 April 2008 09:00 AM

<div class="box layered-nav">
    <div class="head">
      <h3><?php echo $this->__('Browse By') ?></h3>
    </div>
    <div class="border-creator">
      <div class="narrow-by">
           <dl id="narrow-by-list">
           
         <dd>
         <ol>        
        <?php foreach ($this->getStoreCategories() as $_category): ?>
            <dt>
             <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="active"<?php endif ?>><?php echo $this->htmlEscape($_category->getName()) ?></a>
            </dt>
        <?php endforeach ?>
        
       </ol>
      </dd>
      </dl><script type="text/javascript">decorateDataList('narrow-by-list')</script>
    </div>
   </div>
</div>

Is there any way to make this code so only the sub categories of the current clicked category shows up?

You can do that with css. Active categories are tagged that way automatically. So you just need to hide all subcategories but those with class .active. (From the top of my head so you should check)

With firefox you can select a ‘piece of webpage’, say for instance a couple subcategories, richt click it and “view selection source”, do the same for active subcategories so you can compare the code. All that’s left is applying the correct style.

something like this:

li li { display:none;}
li li.active { display:block}

Lots of tutorials on the web to explain you in detail how this works.
This is one to get you started: http://www.alistapart.com/articles/dropdowns

BTW, you’re working with a template that has layered navigation and category navigation mixed together. For menu’s I think you’re better off working with lists, for instance:

<div class="left-nav-container">
    <div class="left-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>
</div>

asfaltagmail - 15 April 2008 03:50 PM

Ben:
I followed your steps but don’t see any change at my frontpage. Can you please be more specific about where edit and replace or add your code?

Thank you very much
Andrea

Sorry, I’m not always getting notifications of replies so I missed yours.

I’ll try to be more specific, btw, did you set your categories to be anchors?

catalog.xml:

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

More detailed version:

<default>

        <!-- Mage_Catalog -->
        <reference name="top.menu">
            <block type="catalog/navigation" name="catalog.nav" template="catalog/navigation/top.phtml" />
        </reference>
        <reference name="left">
            <block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/left_cat_nav.phtml" />
        </reference>

I then created the following file in magento/app/design/frontend/default/templatename/template/catalog/navigation/


left_cat_nav.phtml

<div class="left-nav-container">
    <div class="left-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>
</div>

Also make sure that in the backend, under “design” in the configuration section, that you enter “templatename” 3 times; for “templates”, “skin” and “layout”.

 
 
Posted: April 26 2008
   |  top  |  # 50 
 
Magento Community Magento Community
Magento Community
Magento Community
 
Autofittings
Jr. Member
 
Total Posts:  18
Joined:  2008-04-03
 

Any Ideas why the following isnt working?
If anyone knows a better method please reply.
Thanks. Alex

adriancid - 09 April 2008 11:12 PM

I have created a menu in version 1.0 using these steps

1-. Create a file named “left_menu1.phtml” in “magento\app\design\frontend\default\default\template\catalog\navigation\”

left_menu1.phtml

<div class="box layered-nav">
    <div class="head">
      <h3><?php echo $this->__('Browse By') ?></h3>
    </div>
    <div class="border-creator">
      <div class="narrow-by">
           <dl id="narrow-by-list">
           
         <dd>
         <ol>        
        <?php foreach ($this->getStoreCategories() as $_category): ?>
            <dt>
             <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="active"<?php endif ?>><?php echo $this->htmlEscape($_category->getName()) ?></a>
            </dt>
        <?php endforeach ?>
        
       </ol>
      </dd>
      </dl><script type="text/javascript">decorateDataList('narrow-by-list')</script>
    </div>
   </div>
</div>

2-. Go to: CMS->Manage Pages, and click in Homepage, select in the left “Custom Design” and write this code in “Layout Update XML”:

<reference name="left">
    <block type="catalog/navigation" name="catalog.leftnavig" before="-" template="catalog/navigation/left_menu1.phtml"/>
</reference>

3-. Save and enjoy smile
 
 
Posted: April 28 2008
   |  top  |  # 51 
 
Magento Community Magento Community
Magento Community
Magento Community
 
Autofittings
Jr. Member
 
Total Posts:  18
Joined:  2008-04-03
 

All sorted.

 
 
Posted: April 28 2008
   |  top  |  # 52 
 
Magento Community