Getting Zend_Navigation menu to work with jQuery's Fisheye

Question

I\'m using Zend_Navigation (sweet addition to the framework, btw) to build my menu, after which it should be rendered in the page (self-evidently). I first set the container

Answer 1

Sorry, for the formatting issue on the previous post

To add your custom helper do the following, in your bootstrap:

protected function _initNavigation()
{
    $this->bootstrap('view');           // make sure we have a view
    $view = $this->getResource('view');     // get the view resource
    $config = new Zend_Config_Xml(APPLICATION_ROOT . '/config/navigation.xml','nav');
    $container = new Zend_Navigation($config);
    $view->navigation($container);

    // Tell Zend were it can find your custom helpers and what
    // the prefix is going to be.

   $view->addHelperPath(
          APPLICATION_ROOT . '/library/MyApp/View/Helper/Navigation',
          'MyApp_View_Helper_'
          );

}

Next create your custom view helper and put it in the ‘addHelperPath’ path. Depending on what you want to do you need to implement at least your own htmlify function. Take a look at Zend/View/Help/Navigation/Menu.php as an example.

class MyApp_View_Helper_MyMenu extends Zend_View_Helper_Navigation_Menu
{
    public function myMenu(Zend_Navigation_Container $container = null)
    {
        if (null !== $container) {
            $this->setContainer($container);
        }
        return $this;
    }

    protected function htmlify(Zend_Navigation_Page $page ) 
    {
        ...
    }
}

Next, in your phtml script:

   <?php echo $this->navigation()->myMenu()->setMaxDepth(0); ?>

or just

   <?php echo $this->navigation()->myMenu(); ?>

Now if you want to add your own custom properties to the generated HTML you can add them to your navigation ini or xml file. For example:

<home>
  <label>Home</label>
  <uri>/</uri>
  <img>
      <src>/images/MyIcon.gif</src>
  <img>
</home>

The custom xml tag <img> will be stored as a property of the navigation page and can be fetched like:

foreach ($iterator as $page) {

    ...

    $properties = new Zend_Config($page->GetCustomProperties());
    $myPicture = $properties->img->src;

    ...
}

Hope this helps. Peter

Answer 2

I haven't seen the way yet either in terms of making a custom renderer. Here's what I ended up doing though:

First, instead of rendering the default menu() call, create a partial to render into:

// menu.phtml is partial, cms is module
$partial = array('menu.phtml', 'cms');
$this->navigation()->menu()->setPartial($partial);
echo $this->navigation()->menu()->render();

Then (from the docs), you can create a "custom" render like so:

// -- inside menu.phtml
foreach ($this->container as $page) 
{
    // this just prints a "<a>" or "<span>" tag
    // depending on whether the page has a uri
    echo $this->menu()->htmlify($page), PHP_EOL;
}

I ended up making what I originally had (a menu with one level of submenus) with this script:

// -- another menu.phtml
<ul class="navigation">

<?php

$html = array();

foreach ($this->container as $page) 
{
    $html[] = "<li>";
    $html[] = $this->menu()->htmlify($page) . PHP_EOL;

    if (!empty($page->pages))
    {
        $html[] = "<ul>";
        foreach ($page->pages as $subpage) 
        {
            $html[] = "<li>";
            if ($href = $subpage->getHref()) $html[] = "<a href=\"{$href}\">";
            else $html[] = "<span>";
            $html[] = "<img src=\"/ui/cms/img/icons/edit.png\" alt=\"\"/>";
            $html[] = $subpage->getLabel();
            if ($href) $html[] = "</a>";
            else $html[] = "</span>";            
            $html[] = "</li>";
        }
        $html[] = "</ul>";
    }

    $html[] = "</li>";
}

echo join(PHP_EOL, $html);

?>
</ul>

You could just change the markup in the partial and add your images/icons there.