Post by make-oc » Wed Apr 22, 2009 1:30 pm

This is not much of a contrib, but it took me some time finding the bits and pieces, so I'll just share it here…

I needed to add more styling to the navigation in the categories block and decided it would be best if each list element had its own ID in the tag.
So in /catalog/controller/module/category.php at line 32(OC 1.2.6.) I found the needed code:

Code: Select all

foreach ($results as $result) {   
    if (!$current_path) {
        $new_path = $result['category_id'];
    } else {
        $new_path = $current_path . '_' . $result['category_id'];
    }
// -- Line can be deleted           $output .= '
// -- Line can be deleted   <li>';
   
    $children = '';
   
    if ($category_id == $result['category_id']) {
        $children = $this->getCategories($result['category_id'], $new_path);
    }
   
    if ($this->category_id == $result['category_id']) {
// ++ Added this bit id="CatNav-'.$new_path.'" to the <li>
        $output .= '
<li id="CatNav-'.$new_path.'"><a href="' . $this->url->http('product/category&path=' . $new_path)  . '"><b>' . $result['name'] . '</b></a>';
    } else {
// ++ Added this bit id="CatNav-'.$new_path.'" to the <li>
        $output .= '
<li id="CatNav-'.$new_path.'"><a href="' . $this->url->http('product/category&path=' . $new_path)  . '">' . $result['name'] . '</a>';
    }
   
    $output .= $children;

    $output .= '</li>';
}

if ($results) {
    $output .= '
</ul>
';
Also added line breaks here and there for better formating.

So now your source looks like this:

Code: Select all

<ul>
  <li id="CatNav-20"><a href="/index.php?route=product/category&path=20">Desktops</a></li>
  <li id="CatNav-18"><a href="/index.php?route=product/category&path=18">Laptops & Notebooks</a></li>
    <li id="CatNav-25"><a href="/index.php?route=product/category&path=25"><b>Components</b></a>
<ul>
  <li id="CatNav-25_32"><a href="/index.php?route=product/category&path=25_32">Web Cameras</a></li>
  <li id="CatNav-25_29"><a href="/index.php?route=product/category&path=25_29">Mice and Trackballs</a></li>
  <li id="CatNav-25_30"><a href="/index.php?route=product/category&path=25_30">Printers</a></li>
  <li id="CatNav-25_31"><a href="/index.php?route=product/category&path=25_31">Scanners</a></li>
  <li id="CatNav-25_28"><a href="/index.php?route=product/category&path=25_28">Monitors</a></li>
</ul>
And now you can add specific CSS styles using the ID selector

Code: Select all

#CatNav-20{
    list-style: url('../image/blue_bullet_2.png');
}
#CatNav-25{
    list-style: url('../image/red_bullet_2.png');
}
#CatNav-25_30 a{
    color: #F00;
}
I needed this for color coding the navigation, as well as highlighting some Categories.

Having these IDs is always a good idea… "when you walk the DOM IDs are your best friends"

And some people may actually use them to attach some jQuery.

Cheers

New member

Posts

Joined
Tue Apr 07, 2009 2:17 pm

Post by Nahuel » Thu Apr 23, 2009 12:01 am

Thanks!! :D Very helpfull

New member

Posts

Joined
Fri Mar 13, 2009 9:35 am

Post by tommix » Thu Apr 23, 2009 12:41 am

What it does? next time provide screenshot, not everybody reads your mind :)

Active Member

Posts

Joined
Mon Apr 20, 2009 5:21 am

Post by make-oc » Thu Apr 23, 2009 6:33 am

tommix
What it does? next time provide screenshot, not everybody reads your mind :)
It does what's written…
It adds IDs to the Cat-Navi
<ul>
<li id="CatNav-20"><a href="/index.php?route=product/category&path=20">Desktops</a></li>
<li id="CatNav-18"><a href="/index.php?route=product/category&path=18">Laptops </a></li>
<li id="CatNav-25"><a href="/index.php?route=product/category&path=25">Components</a>
<ul>
What you can do with it is up to you and what you're capable of… I just laid the groundworks.
Adding code to the stylesheet is what I've done — and this gives you millions of possibilities, so just use your imagination ;-)

Cheers

New member

Posts

Joined
Tue Apr 07, 2009 2:17 pm
Who is online

Users browsing this forum: No registered users and 7 guests