Create a top image menu

Last modified by center on Fri, June 25, 2010 09:26
Source|Old Revisions  

Hello, This post to share a small function I wrote in order to show image instead of text in the category menu.

You need to create a Navigation.php in the app/code/local/Mage/Catalog/Block. If these folders don’t exist just create them with the write permissions.

This Navigation.php file is just a copy of the one from magento. I’ve just added the following function :

public function drawImgItem($category, $level=0, $last=false){ $html = ;

      $categoryName = '';
      if (!$category->getIsActive()) {
           return $html;
      }
 $children = $category->getChildren();
      $hasChildren = $children && $children->count();
      $html.= '<li';
      if ($hasChildren) {
           $html.= ' onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"';
      }
      $html.= ' class="level'.$level;
      $html.= ' nav-'.str_replace('/', '-', $category->getRequestPath());
      if ($this->isCategoryActive($category)) {
          $html.= ' active';
      }
      if ($last) {
          $html .= ' last';
      }
      if ($hasChildren) {
          $cnt = 0;
          foreach ($children as $child) {
              if ($child->getIsActive()) {
                  $cnt++;
              }
          }
          $html .= ' parent';
      }
      $html.= '">'."n";
      $categoryName    = $category->getName();
      $categoryName = htmlentities($categoryName, ENT_NOQUOTES, 'utf-8');    
      $categoryName = preg_replace('#&([A-za-z])(?:uml|circ|tilde|acute|grave|cedil|ring);#', '1', $categoryName);
      $categoryName = preg_replace('#&([A-za-z]{2})(?:lig);#', '1', $categoryName);
      $categoryName = preg_replace('#&[^;]+;#', '', $categoryName);
  
      $url = Mage::getDesign()->getSkinUrl('images/'.strtolower(str_replace(" ","_",$categoryName)).'.jpg');
      $html.= '<a href="'.$this->getCategoryUrl($category).'"><span><img src="'.$url.'" alt=" '.$this->htmlEscape($category->getName()).'"></span></a>'."n";
      if ($hasChildren){
          $j = 0;
          $htmlChildren = '';
          foreach ($children as $child) {
              if ($child->getIsActive()) {
                  $htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt);
              }
          }
          if (!empty($htmlChildren)) {
              $html.= '<ul class="level' . $level . '">'."n"
                      .$htmlChildren
                      .'</ul>';
          }
      }
      $html.= '</li>'."n";
      return $html;
  }

Next thing you need to is to change the design/frontend/default/template/catalog/navigation/top.phtml Old Code <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): ?>

/* This is the line you need to change */ <?php echo $this→drawItem($_category) ?> <?php endforeach ?>

      </ul>
  </div>
  <?php echo $this->getChildHtml('topLeftLinks') ?>

</div> New Code <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): ?>''

/* This is the line you need to change */

          ''<?php echo $this->drawImgItem($_category) ?>''
      ''<?php endforeach ?>
      </ul>
  </div>
  <?php echo $this->getChildHtml('topLeftLinks') ?>

</div>’’

the images will be fetch in the images of your default skin folder. You will need to have them called just like the name of the category all lower case and space replaced with underscore

for example : if your category is name My default Category,

your image should be called my_default_category.jpg

the last thing to do is to change your CSS in order to get it the way you want.

drawbacks :

Your are limited in the number of categories regarding the width of your image.

you can see an example at :

www.kamivolt.com

enjoy,




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs