Developing (v7+)

Complex autonav questions, need page alias function.

Permalink November 14, 2010 at 8:14 PM

Thanks for any help,
First post and first concrete5 website here.

The navigation on the site I'm building requires a unique image per main <ul>link heading, as well as a jquery dropdown, not only that but there are 3 other unique navigation blocks also on each page. And to top it off the left autonav will also needs to function with the eCommerce module to narrow down results.

To make this simple, so far my big problem is finding a function that will display the page alias in place of the css ID and CLASS. I can't use

<div id="' . $ni->getName() . '" class="' . $ni->getName() . '">

because the page names need to be blank so they won't show up in the navbar(because they will be images instead).

I've attached an image of the homepage for a better visual of the finished site.

1 Attachment

Mnkras replied on Nov 14, 2010 at 9:46 pm Permalink Reply

there is an addon in the marketplace called kino's image menu that does what you want i believe :)

http://www.concrete5.org/marketplace/addons/kinos-image-menu/...

Mnkras replied on Nov 14, 2010 at 9:49 pm Permalink Reply

or, if you don't want to spend money, and easy way would be to use collection ids,

107studio replied on Nov 14, 2010 at 11:04 pm Permalink Reply

Thanks, the one in the market looks good, but it seems I'm close enough to a working version of my own, i'd like to just figure this out.

I tried some collection ids, havn't found any that will work well in my case though, is there a page with some more examples? I tried,

echo('<div id="' . $c->getCollectionID() . 'menu" class="' . $c->getCollectionID() . '"><ul>');

this just returned 1's for every loop.

I think I can have this working if I can just find the right function to plugin here.

an alias one would be the best in my opinion, because it would be more descriptive.

Shotster replied on Nov 19, 2010 at 5:21 pm Permalink Reply

1 is the collection ID of the home page, which is presumably the page you were on when testing your code. What you want are the collection ID's of the nav items themselves which, if I recall (don't have the code in front of me), are the $_c variables in the loop of the default autonav view template.

-Steve

107studio replied on Nov 19, 2010 at 3:58 pm Permalink Reply

I was able to figure out how to create my drop down code using the alias for the ids and classes. I'll add the code from view.php for anyone else who needs it.

This allows me to
1. include selected page to only the drop down menu

2.use a jquery rollover and drop down with images for main navigation.

3.use images for the drop down with a different class name based on the alias of the page.

It required that I modify the blocks/autonav/controller.php and add a new funtion that I got fromhttp://www.concrete5.org/community/forums/customizing_c5/auto-nav_w...

<?php
  defined('C5_EXECUTE') or die("Access Denied.");
  $aBlocks = $controller->generateNav();
  $c = Page::getCurrentPage();
  echo('<div class="brandNavWrapButton">');
  $containsPages = false;
  $nh = Loader::helper('navigation');
  //this will create an array of parent cIDs 
  $inspectC=$c;
  $selectedPathCIDs=array( $inspectC->getCollectionID() );
  $parentCIDnotZero=true;  
  while($parentCIDnotZero){
    $cParentID=$inspectC->cParentID;
    if(!intval($cParentID)){
      $parentCIDnotZero=false;

Viewing 15 lines of 96 lines. View entire code block.

<?php
  defined('C5_EXECUTE') or die("Access Denied.");
  $aBlocks = $controller->generateNav();
  $c = Page::getCurrentPage();
 
  echo('<div class="brandNavWrapButton">');
 
  $containsPages = false;
 
  $nh = Loader::helper('navigation');
 
  //this will create an array of parent cIDs 
  $inspectC=$c;
  $selectedPathCIDs=array( $inspectC->getCollectionID() );
  $parentCIDnotZero=true;  
  while($parentCIDnotZero){
    $cParentID=$inspectC->cParentID;
    if(!intval($cParentID)){
      $parentCIDnotZero=false;
    }else{
      $selectedPathCIDs[]=$cParentID;
      $inspectC=Page::getById($cParentID);
    }
  }   
 
  foreach($aBlocks as $ni) {
    $_c = $ni->getCollectionObject();
    if ($_c->getCollectionAttributeValue('include_dropdown')) {
 
        if (!$pageLink) {
            $pageLink = $c->getCollectionID();
         }
 
 
      $target = $ni->getTarget();
      if ($target != '') {
        $target = 'target="' . $target . '"';
      }
      if (!$containsPages) {
        // this is the first time we've entered the loop so we print out the UL tag
        echo('<div id="'.$ni->getAlias().'menu" class="'.$ni->getAlias().'"><ul>');
      }
 
      $containsPages = true;
 
      $thisLevel = $ni->getLevel();
      if ($thisLevel > $lastLevel) {
        echo("<ul><!-- 1first on the list -->");
      } else if ($thisLevel < $lastLevel) {
        for ($j = $thisLevel; $j < $lastLevel; $j++) {
          if ($lastLevel - $j > 1) {
         echo("</li></ul><!-- 2second on the list -->");   
      } else {
            echo('</li></ul></li><!-- 3third on the list --></ul>
         <br style="clear: left" />
      </div>
   </div>
 
   <div class="brandNavWrapButton">
      <div id="'.$ni->getAlias().'menu" class="'.$ni->getAlias().'">
         <ul>');
          }
        }
      } else if ($i > 0) {
        echo('</li><!-- 4th on the list --> ');
      }
 
      $pageLink = false;
 
      if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
        $subPage = $_c->getFirstChild();
        if ($subPage instanceof Page) {
          $pageLink = $nh->getLinkToCollection($subPage);
        }
      }
         if (!$pageLink) {
         $pageLink = $ni->getURL();
      }
 
 
      if ($ni->getAlias() == "can_am") { 
        echo('<li class="menubgTop"><a ' . $target . ' href="#"></a><!-- 1st if can am -->');
      } 
     elseif ($ni->getAlias() == "ski_doo") { 
        echo('<li class="menubgTop"><a ' . $target . ' href="#"></a><!-- 2nd if ski do -->');
      } 
     elseif ($ni->getAlias() == "sea_doo") { 
        echo('<li class="menubgTop"><a ' . $target . ' href="#"></a><!-- 3rd if sea do -->');
      } 
     elseif ($ni->getAlias() == "kymco") { 
        echo('<li class="menubgTop"><a ' . $target . ' href="#"></a><!-- 4th if kymco -->');
      } 
 
     elseif ($c->getCollectionID() == $_c->getCollectionID()) { 
        echo('<li class="menubg"><a href="' . $pageLink . '" ' . $target . '></a><!-- 2st link -->');
      } else {
        echo('<li class="menubg"><a href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a><!-- 3rd link -->');
      }  
      $lastLevel = $thisLevel;
      $i++;
 
 
    }
  }
 
  $thisLevel = 0;
  if ($containsPages) {
    for ($i = $thisLevel; $i <= $lastLevel; $i++) {
      echo("</li></ul><!-- last on the list -->");
    }
  }
echo ('<br style="clear: left" />
      </div>
   </div>');
?>

107studio replied on Nov 19, 2010 at 4:04 pm Permalink Reply

Another quick question, how can you create an editable area inside an autonav, or is that even possible.

I would like for the side menu headings to be included in the autonav block, but I would like it if I could also somehow modify what is in the <h2> tag without having to change the view.php file.

As in this code which has 'Showroom'. I would like a way to change that in the dashboard or in context editor.

if (!$containsPages) {
        // this is the first time we've entered the loop so we print out the UL tag
        echo('<h2 class="leftNavHeader">Showroom</h2><ul class="leftNav">');
      }

107studio replied on Nov 21, 2010 at 12:18 am Permalink Reply

Well, no use answering the last question if this question can be answered.

I'll try to make this simple, how can you add a unique class to the top level <li> givin this html.

<ul>
               <li class="leftNavHeader"><h2>Showroom</h2>
                   <ul>
                  <li class="leftNavList"><a class="leftNavLinks" href="#">Link1</a></li>
                  <li class="leftNavList"><a class="leftNavLinks" href="#">Link2</a></li>
                    </ul>
                </li>
         </ul>

See where it says Showcase, that needs it's own style so it will be a larger font.

Havn't found a way to do that with the autonav code so far, is that possible?

Shotster replied on Nov 21, 2010 at 12:48 am Permalink Reply

I guess I don't understand the question, as it appears your issue can be addressed with simple CSS. I mean, the thing you're trying to style is inside an <h2> element, which is inside an <li> element having a class of leftNavHeader. It seems to me nothing else is needed to target the "Showroom" text via CSS. Or am I missing something?

-Steve

107studio replied on Nov 21, 2010 at 2:07 am Permalink Reply

I'll elaborate this time, this part is for the left side menu that you can see in the attachment on the first post.

my sitemap looks like this

home
>showroom
>>can-am
>>ski-doo

The goal here is to make the autonav style the top level in the list such as showroom with it's own class called leftNavHeader. And the children of those pages styled with the class of leftNavList.

This is the autonav code for the left menu so far.

<?php
  defined('C5_EXECUTE') or die("Access Denied.");
  $aBlocks = $controller->generateNav();
  $c = Page::getCurrentPage();
  $containsPages = false;
  $nh = Loader::helper('navigation');
$isFirst = true;
  //this will create an array of parent cIDs 
  $inspectC=$c;
  $selectedPathCIDs=array( $inspectC->getCollectionID() );
  $parentCIDnotZero=true;  
  while($parentCIDnotZero){
    $cParentID=$inspectC->cParentID;
    if(!intval($cParentID)){
      $parentCIDnotZero=false;

Viewing 15 lines of 74 lines. View entire code block.

 
<?php
  defined('C5_EXECUTE') or die("Access Denied.");
  $aBlocks = $controller->generateNav();
  $c = Page::getCurrentPage();
  $containsPages = false;
 
  $nh = Loader::helper('navigation');
$isFirst = true;
  //this will create an array of parent cIDs 
  $inspectC=$c;
  $selectedPathCIDs=array( $inspectC->getCollectionID() );
  $parentCIDnotZero=true;  
  while($parentCIDnotZero){
    $cParentID=$inspectC->cParentID;
    if(!intval($cParentID)){
      $parentCIDnotZero=false;
    }else{
      $selectedPathCIDs[]=$cParentID;
      $inspectC=Page::getById($cParentID);
    }
  }   
 
  foreach($aBlocks as $ni) {
    $_c = $ni->getCollectionObject();
    if ($_c->getCollectionAttributeValue('include_left_menu')) {
 
 
      $target = $ni->getTarget();
      if ($target != '') {
        $target = 'target="' . $target . '"';
      }
      if (!$containsPages) {
        // this is the first time we've entered the loop so we print out the UL tag
        echo('<ul>');
      }
 
      $containsPages = true;
 
      $thisLevel = $ni->getLevel();
      if ($thisLevel > $lastLevel) {
        echo("<ul>");
      } else if ($thisLevel < $lastLevel) {
        for ($j = $thisLevel; $j < $lastLevel; $j++) {
          if ($lastLevel - $j > 1) {
            echo("</li></ul>");
          } else {
            echo("</li></ul></li>");
          }
        }
      } else if ($i > 0) {
        echo("</li>");
      }
 
      $pageLink = false;
 
      if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
        $subPage = $_c->getFirstChild();
         if ($subPage instanceof Page) {
            $pageLink = $nh->getLinkToCollection($subPage);
        }
      }
 
 
 
     if (!$pageLink) {
        $pageLink = $ni->getURL();
      }
 
      if ($c->getCollectionID() == $_c->getCollectionID()) { 
        echo('<li class="leftNavHeader"><h2>' . $ni->getName() . '</h2>');
      } elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
        echo('<li class="leftNavList"><a class="leftNavLinks" href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
      } else {
        echo('<li class="leftNavList"><a class="leftNavLinks" href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
      }  
      $lastLevel = $thisLevel;
      $i++;
 
    }
  }
 
  $thisLevel = 0;
  if ($containsPages) {
    for ($i = $thisLevel; $i <= $lastLevel; $i++) {
      echo("</li></ul>");
    }
  }
 
?>

clearly the part that needs to change is here:

if ($c->getCollectionID() == $_c->getCollectionID()) { 
        echo('<li class="leftNavHeader"><h2>' . $ni->getName() . '</h2>');
      } elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
        echo('<li class="leftNavList"><a class="leftNavLinks" href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
      } else {
        echo('<li class="leftNavList"><a class="leftNavLinks" href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
      }

Specifically the first if statement, as it is now, the first if is always false, so the leftNavHeader class never gets used.

Hope that helps clear it up.

Also I know I could just hard code it as, if $ni->getName() == 'showcase' use the header class. But that's hopefully my last resort.

Shotster replied on Nov 21, 2010 at 1:03 pm Permalink Best Answer Reply

> The goal here is to make the autonav style the top
> level in the list such as showroom with it's own class
> called leftNavHeader. And the children of those pages
> styled with the class of leftNavList.

But WHY? It seems completely unnecessary to me. You can uniquely style those items without the need for special classes. As long as each menu level is its own unordered list <ul>, just target them via CSS with a higher degree of specificity. You might want to assign a class of "nav" or something to the top level <ul>, but that's it.

Assuming your main menu at the top of the page resides within an element having an id of "myPageHeader," you could do something like this...

// style the main menu (at top of page)
//
#myPageHeader ul.nav li {
   // style the top level items of main menu
}
#myPageHeader ul.nav ul li {
   // style the 2nd level items of main menu
}
#myPageHeader ul.nav ul ul li {
   // style the 3rd level items of main menu
}

For the side menu, assuming it resides in an element with an id of "mySidebar," you could do something like this...

// style the side menu
//
#mySidebar ul.nav li {
   // style the top level items of side menu
}
#mySidebar ul.nav ul li {
   // style the 2nd level items of side menu
}
#mySidebar ul.nav ul ul li {
   // style the 3rd level items of side menu
}

If that still doesn't help, then I don't understand the issue and hopefully someone else will jump in to assist.

Regards,

-Steve

107studio replied on Nov 28, 2010 at 6:38 pm Permalink Reply

Thank you VERY much for the help. It certainly can be done with css. I have remade my side bar and footer bar with that in mind.

I now have all 5 autonavs working great!
Concrete5 is an amazing CMS!

Shotster replied on Nov 28, 2010 at 7:45 pm Permalink Reply

> I now have all 5 autonavs working great!

Excellent! Glad you found the info helpful. BTW, really nice job on the design. It's a very attractive site.

-Steve

Forums

Developing (v7+)

Complex autonav questions, need page alias function.

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?