中国21世纪

The main top menu in Magento is the perfect navigation bar for your customers. You can easily add Categories into the menu, by selecting ‘Yes’ from the dropdown ‘Include in Navigation Menu’ when you manage your Categories in the backend of Magento.

Adding a Page into the top navigation menu though, has always been a bit of a hassle. There are numerous solutions to accomplish this task, but the one I prefer is a mixture of a custom CMS Static Block, 1 line of code implementation and using a custom made widget. Although at first glance you might think this is a bit of an overkill, I’d like to keep in mind that in most cases my clients must be able to use Magento in a simple way. And adding Pages to a menu… well, that should not be too hard for them, should it? Since we’re more or less living in the point ‘n click ‘n that’s that – world, we have to provide our clients a simple way to accomplish a simple task.

So, let’s make things easy for both developer and client and follow the instructions. Please keep in mind that this Widget only works as of Magento CE 1.4.2 and up.

Step 1 – Create a Static Block

Go to CMS -> Static Blocks -> Add New Block
Inside this static block the links to the Pages that you want to be in your main menu, will be placed. Let’s call this block: ‘menu’. To simplify things, both Block Title and Block Identifier will have this name. Be sure to Enable the Static Block. The content, for now, can be empty.

Step 2 – Add a line of code to top.phtml

The file app\design\frontend\default\default\template\catalog\navigation\top.phtml is where your menu is called from (or your theme’s top.phtml of course). To be able to insert the Static block ‘menu’, we’re going to add a line of code to this file

<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if($_menu): ?>
<div>
 <ul id="nav">
 <?php echo $_menu ?>
   <!-- add the following line of code -->
   <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('menu')->toHtml(); ?>
 </ul>
</div>
<?php endif ?>

As you can see from the above code, the $_menu variable will insert the Categories into the top menu. The added line of code will insert the Static Block ‘menu’ that you’ve created in Step 1.

Step 3 – Use the widget functionality of Magento (1.4 and up)

Although you could use the standard Widget of a CMS Page Link, let’s extend this Widget with one other option. Why? Well, the CMS Page Link Widget provides two templates (block and inline), but we are in need for another template, rendered into HTML-list-elements.
To add the third template option, just download this zip file, unpack and upload it to your Magento installation. In fact, it is a (small) module, that will extend the CMS Page Link Widget with the third template. Let’s go through the files one by one.

app/code/local/Scorgit/TopNavMenu/etc/widget.xml

<widgets>
 <cms_page_link type="cms/widget_page_link" translate="name description" module="cms">
 <parameters>
 <template translate="label">
 <values>
 <link_list translate="label">
 <value>cms/widget/link/link_list.phtml</value>
 <label>CMS Page Link List Template</label>
 </link_list>
 </values>
 </template>
 </parameters>
 </cms_page_link>
</widgets>

Basically, what we’ve done here, is copy the existing widget.xml file, which can be found in app/code/core/Mage/Cms/etc, add our own option inside the <values>-tag, and get rid of all other tags. Upon loading, Magento will combine all XML-config files into one big config-file, and this widget.xml (which in fact can be seen as another config XML file) will thus be merged with all other config xml files, in this case with the original widget.xml .

app/code/local/Scorgit/TopNavMenu/etc/config.xml

As with all Magento Modules (and extensions), in the config.xml you’ll provide the name of the module and some other stuff. That is however, beyond the scope of this article.
In fact, this simple module will run fine even with just <config></config> as content of the config.xml file.

app/design/frontend/default/default/template/cms/widget/link/link_list.phtml

As you can see in the widget.xml file, in the <value> tag, this is the path to the phtml file in which our markup code will go. For this ‘tutorial’ or module, the contents are:

<li>
 <a <?php echo $this->getLinkAttributes() ?>>
 <span><?php echo $this->htmlEscape($this->getAnchorText()) ?></span>
 </a>
</li>

Mind the <li> tag! The top navigation menu is built as an unordered list (<ul>), so all we need to do is make sure that our CMS Pages that we will select to appear in the menu, will be inside a <li> tag. Even better: look at some existing code from a default Magento installation, and you will see the exact same HTML-markup as above.

app/etc/modules/Scorgit_TopNavMenu.xml

This one is standard Magento Module logic, to enable the module.
You can enable the module by going to System -> Configuration -> Advanced -> Scorgit_TopNavMenu and select ‘Enable’ (and Save of course). By enabling the module, you give Magento the instructions to merge the widget.xml file into its other xml files.

Ok, I did all that, but how do I use it?

Well, those are the steps. If you’ve done everthing to the letter, you should have a third template option if you insert a CMS Page Link into your newly created ‘menu’ Static Block.

	So, return to your static block ‘menu’. Open it up, and go to the content area. Click on the Widget Button and …
	… select the CMS Page Link as your Widget Type.
	As you can see, there is our third template
	When we’ve selected a page and return to the content editor, we see the Magento Widget Icon
	And if we switch between de WYSIWYG and normal mode, you can see that the newly created template will be used. Be careful in this step, because you see the HTML-p-tag? Delete that on both the beginning and the end of the widget code.
	To check, we’ll go to our homepage and see that the link to the page has been added!

All in all, this is a fairly simple way for both developer and client, to enable the incorporation of CMS Pages into your Magento web shop.

文章来源：

http://www.scorgit.com/blog/magento-widget-pages-in-your-top-menu/