Brandammo ProNav

Brandammo ProNav is an extension that allows you to add custom HTML to your main menu navigation and dropdowns. Avalanche store owners often use this to add custom links to the main menu and images to the dropdowns. Keep in mind that if you simply want to add custom links you can do so by editing the following file:

/app/design/frontend/avalanche/default/template/page/html/header.phtml

<ul class="menu <?php echo $dropdownStyle ?>">
<li class="home"><a href="<?php echo $this->getUrl('') ?>" class="ir"><?php echo $this->__('Home') ?></a></li>
<?php echo $this->getChildHtml('topMenu') ?>
<li><a href="#">Custom Link</a></li>
<li><a href="#">Custom Link</a></li>
</ul>

First and foremost let’s make sure we review several things:

  • This extension is compatible with my version of Magento.
  • My store is backed up before installing anything on production.

Installation Time

1) Upload the ProNav files to their respective folders:

/app/code/local/Brandammo
/app/etc/modules/Brandammo_Pronav.xml
/app/design/frontend/base/default/layout/pronav.xml
/app/design/frontend/base/default/template/pronav
/app/design/adminhtml/default/default/layout/pronav.xml
/js/pronav
/skin/frontend/base/default/pronav

Keep in mind you could also store the /app/design files inside /avalanche/default rather than /base/default.

2) Ensure the extension is activated by reviewing /app/etc/modules/Brandammo_Pronav.xml:

<active>true</active>

3) If you’re logged into the Magento admin panel clear your cache then log out and log back in.

4) Verify the extension is installed by going to System > Configuration > Advanced. If you see Brandammo_Pronav you’re doing a great job so far!

5) You should now see ProNav under the CMS menu dropdown. Clicking it will take you to the ProNav Items Manager where you can add new links.

Don’t Panic!

You probably won’t see the ProNav menu on your store yet. This is where you learn the ways of Magento integration. Patience young grasshopper!

1) Enable the extension by going to System > Configuration > ProNav. Set Enabled to “Yes”.

2) Go to your homepage. You’ll notice the HTML for the ProNav menu is there but it looks funky. This is primarily a CSS integration challenge. Luckily for us ProNav injects itself into the main menu without too much friction. But look closer at the source code. What’s this?

<script type="text/javascript" src="http://magento17.com/js/pronav/jquery.1.4.2.js"></script>
<script type="text/javascript" src="http://magento17.com/js/pronav/jquery.hover.intent.js"></script>

Like most extensions ProNav assumes you don’t have jQuery but Avalanche includes jQuery by default. Avalanche also comes with jQuery Hover Intent. You should disable these plugins right away.

3) Edit the following file:

/app/design/frontend/base/default/layout/pronav.xml

The layout XML file is your guide map to how the extension injects itself into your Magento store. Always review it to see what JS/CSS files it’s adding. In this case, we’re going to comment out the JS files:

			<!--<action method="addJs">
				<js>pronav/jquery.1.4.2.js</js>
			</action>-->
 
			<!--<action method="addJs">
				<js>pronav/jquery.hover.intent.js</js>
			</action>-->

4) If you reload the homepage and you already created some dropdowns you might notice some JavaScript errors. This is because Avalanche includes jQuery at the bottom of the page (for best performance) and ProNav sloppily injects JavaScript right after their menu HTML. Get used to this because most Magento extensions have ugly JavaScript and spit it all over the place.

Fixing Messy Extension JavaScript

If you see your extension misbehaving and tossing jQuery code into your HTML markup you’ll want to include it in a JavaScript file so you can minify and cache it in your customer’s browser. Keeping it in the markup creates unnecessary bloat.

Personally I only do this for jQuery and not Prototype for two reasons:

1) Prototype is included at the top of the page. Magento itself dynamically generates JavaScript and spits it everywhere just like extensions do and if you move Prototype you’re going to suffer.

2) I don’t like to touch JavaScript relying on Prototype.

So what we have to do is figure out which template file has this inline JavaScript code:

/app/design/frontend/base/default/template/pronav/navigation_top.phtml

And now it’s obvious why the JavaScript code is inline. ProNav uses PHP to toss the configuration values into the JavaScript:

jQuery(this).find(".sub").stop().fadeTo(<?php echo $this->getNavConfig('fadein')?>, 1, function(){

It doesn’t have to be this way. ProNav could add these as data attributes to the markup. But I digress. As a compromise we’re going to split the template file into two and include the JavaScript portion below jQuery. We could also remove the configuration PHP variables but we’ll keep them for the convenience.

Cut all of the code below line 25 of navigation_top.phtml (copy the <script> portion):

<script>

And paste it in a new file inside /template/pronav called “navigation_bottom.phtml”. Next we’re going to update the pronav.xml layout file inside /app/design/frontend/base/default/layout:

<?xml version="1.0"?>
<layout version="0.1.0">
	<default>
               <reference name="foot">
                    <block type="page/html" name="pronav.navigation.bottom" template="pronav/navigation_bottom.phtml"/>
               </reference>
        </default>
</layout>

Now we’ve included the JavaScript at the bottom where it belongs to prevent JavaScript errors.

Back in Action

Now we’re going places. The next thing we need to do is look at this markup in our homepage source:

<ul class="menu mega-dropdowns">
<li class="home"><a href="http://magento17.com/" class="ir">Home</a></li>
<ul id="pronav"><li id="" class=""><a href="awesome" id="" class=""><span>Awesome Link</span></a></li><div style="clear:both;"></div></ul>

We really don’t want a list inside a list like this since the nested list isn’t inside an <li>. So we can do one of two things:

A: Edit an Avalanche template file to accomodate the #pronav <ul>.
B: Edit the extension template file and remove the #pronav <ul>.

I prefer editing Avalanche because the ProNav template file in question is a little messy with PHP.

Preparing for Upgrade Friendliness

Before we can edit any Avalanche template files we need to do it in an upgrade-friendly way. You only need to do this once per store.

1) Create a new folder inside /app/design/frontend/avalanche called “yourstore” — you know, the name of your store. This is your theme folder. Avalanche is the package and your folder is the new theme.

Magento has a really cool fallback system in place with the following priority for template files:

– /yourstore
— /avalanche/default
—- /base/default

So any files you place inside /app/design/frontend/avalanche/yourstore will have top priority. If Magento can’t find the file there it will fall back to /avalanche/default and then finally to /base/default. So if you upgrade Avalanche you’re not going to overwrite /yourstore.

2) Update your store to the new theme. Go to System > Configuration > Design. Set default to “yourstore”, or the name of your store.

For more information: How do I make upgrade-friendly changes to Avalanche?

Back in Business

Now we need to make our template file that fixes up that HTML. Copy the code from this file:

/app/design/frontend/avalanche/default/template/page/html/header.phtml

And make a new file here (you’ll have to build the folders):

/app/design/frontend/avalanche/yourstore/template/page/html/header.phtml

Paste in the code. Make a change. Pow! You now have an upgrade-friendly custom template file. Change the following code:

74
75
76
77

<ul class="menu <?php echo $dropdownStyle ?>">
			<li class="home"><a href="<?php echo $this->getUrl('') ?>" class="ir"><?php echo $this->__('Home') ?></a></li>
			<?php echo $this->getChildHtml('topMenu') ?>
		</ul>

To this code:

74

<?php echo $this->getChildHtml('topMenu') ?>

Now you have the menu all to yourself and all that’s left is some custom CSS work. If you want you could also edit the ProNav CSS file but it’s probably best that you store your custom changes elsewhere.

Custom CSS

Avalanche comes bundled with a custom.css file for your changes. Don’t edit the style.css file! It’s generated automagically every time you save your configuration. If you need store variables like colors you’ll need to make a copy of your style.less file and make sure you backup the original.

1) In System > Configuration > Avalanche Desktop set Custom CSS to “Yes”.

2) Edit the following file: /skin/frontend/avalanche/default/css/custom.css. If you’re even more daring you can add your own custom.css in /skin/frontend/avalanche/yourstore/css. Yes, you can override the custom.css file for each store!

3) Now we can add our custom CSS. I’m going to keep this basic. Let’s wrap this up:

ul#pronav li { float: left !important; }
ul#pronav li a { color: #000 !important; }
ul#pronav li a:hover { color: red !important; }

Congratulations!

You’ve just integrated Brandammo ProNav into Avalanche. If you made it all the way here without crying in a corner or completely destroying your server you’re well on your way to becoming a Magento Integration Specialist.

If you have any questions or feedback please leave a comment below.

  • Guy

    Ha ! Jake that was a brilliant read ! And a good example of just how multi disiplined you need to be to work with magento … which I’m not ! Thanks , Guy

  • Allande

    Hello,

    I’ve just a problem with cms static block arent display on avalanche theme. Do you have an example navigation_bottom.phtml and navigation_top.phtml ?

    • http://droidtune.com/ biotech

      Hi!

      For correct work of Static block in ProNav you can try this way:

      1. not need remove script and create navigation_bottom.phtml , just leave script in navigation_top.phtml as default.

      2. after you comment include jQuery and hover intent lub in extension layout, go to little modify Avalanche head.phtml & foot.phtml: comment this lines in foot.phtml:

      <!–
      var $jQ = jQuery.noConflict()–>

      next – modify head.phtml and add same code after other code :

      var $jQ = jQuery.noConflict()

      After this you do this, you get worked static blocks in you ProNav.

  • http://twitter.com/burtflaxton Travis Harshaw

    I too am unable to get any static blocks to show on the front end. I inspect the page, but I do not even see the block rendered.

    Maybe something has changed for the NavPro on 1.7.0.2.

    I also would like a representation of how the navigation_top.phtml & navigation_bottom.phtml look.

    • Allande

      I ‘ve the same problem on Magento 1.5.1. i dont see static block on frontend… Maybe a problem with navigation_bottom.phtml ?

  • Tony

    Do you guys have any examples of sites that use the avalanche them along with this extension? I would like to see it in action. Thanks