1

I'm trying to track click events in our 2 level drop down category navigation menu - located in the header.

All I'm trying to do is add some attributes to the <a href> tags but this is proving to be harder than it sounds. I can't figure out where the $_menu variable referenced in topmenu.phtml is coming from. (any ideas?) I've found 2 solutions to the this problem that only seem OK and don't think either is best practice.

Option 1

Use an observer to intercept and modify the HTML.. This is roughly what the Anowave Tag Manager Module does.

Option 2

Use this example to create a fully custom top menu.. which exactly what's there already with some extra <a href> attributes.

Thoughts

Option 2 requires create pretty redundant code because whatever is there is 99.9% good.. I'm just trying to include an attribute like data-value='category name' etc.

ANSWER NOTES

Both @sander & @denisa posted answers that solved my problem. However, as @denisa mentioned, you need to know if you're using using the newer RWD template or the older template. I was using a newer install of Magento but and Non-RWD template. Once you know this, use either @denisa's answer or @sander's

Improve this question
8
  • $_menu is generated by app/code/core/Mage/Catalog/Block/Navigation.php
    – ddavidn
    Apr 20, 2015 at 20:03
  • @ddavidn, it appears you're right. Can you comment on the best way to integrate a new attribute or two, or even a JS onClick() into the menu items?
    – JustinP
    Apr 20, 2015 at 20:20
  • Justin, I'm going to leave that to an expert. ;)
    – ddavidn
    Apr 20, 2015 at 20:21
  • @ddavidn .. sounds good. Definitely seems like something more than a few us should be implementing.
    – JustinP
    Apr 20, 2015 at 20:23
  • 1
    @ddavidn That's the old navigation menu. The new one (1.6 or 1.7 and later) it is the Top Menu.
    – user4351
    Apr 20, 2015 at 20:23

2 Answers 2

Reset to default
1

Since you didn't extend from rwd theme, renderer.phtml won't be rendered if you will add it in your custom theme. I would do something like that: extend Mage_Page_Block_Html_Topmenu and modify protected function _getHtml with my code. You will see there $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>' - that's the place where you have to add you own code.

Improve this answer
1
  • I created a module to extend the Mage_Page_Block_Html_Topmenu [app\code\core\Mage\Page\Block\Html\Topmenu.php]. Worked perfect! Thank you!
    – JustinP
    Apr 22, 2015 at 14:09
1

Adding extra data can be done in the template file app/design/frontend/rwd/default/template/page/html/topmenu/renderer.phtml or whatever template you're using.

On line 54 you'll find the following line

$html .= '<a href="'. $child->getUrl() .'" class="'. $outermostClassCode .' '. $_hasChildren .'">'. $this->escapeHtml($this->__($child->getName())) .'</a>';

Change that to, for example

$html .= '<a data-value="'. $this->escapeHtml($this->__($child->getName())) .'" href="'. $child->getUrl() .'" class="'. $outermostClassCode .' '. $_hasChildren .'">'. $this->escapeHtml($this->__($child->getName())) .'</a>';
Improve this answer
6
  • the /rwd/default directory is new to me.. IS this something we should we extend into our custom template?? IF that's the case. maybe my theme is already extending it? so close I can feel but it's not quite working yet.
    – JustinP
    Apr 20, 2015 at 20:42
  • might be. RWD was introduced in 1.9(?) as the default theme but the file should be the same in any theme falling back to base/default
    – Sander Mangel ♦
    Apr 20, 2015 at 20:46
  • It isn't. It's specific to rwd. I'm guessing because only the top level is rendered I the rwd theme they have split it it, but did not want to cause issues with legacy templates.
    – user4351
    Apr 20, 2015 at 22:25
  • Just to clarify.. should I create my own app/design/frontend/[theme]/[folder]/template/page/html/topmenu/renderer.phtml to edit instead of editing that directly?
    – JustinP
    Apr 20, 2015 at 22:29
  • 2
    Justin, renderer.phtml won't be rendered if you will add it in your custom theme since you don't extend from rwd. I would do something like that: extend Mage_Page_Block_Html_Topmenu and modify protected function _getHtml with my code. You will see there $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>' - that's the place where you have to add you own code.
    – Denisa
    Apr 21, 2015 at 11:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.