Blog

Using the Mura Iterator to Create Custom Navigation from a Local Index

Often times you’ll need to output custom navigation based on the content of a specific Local Index (Feed), but need to have very specific markup. To do this, you’ll need to access Mura’s iterator.

In this example, we’ll use the iterator to loop through a Local Index called “News”, giving us the attributes we want to pull out.

Make sure you’ve created a Local Index and it is getting output correctly. You can verify that it is by clicking the "RSS" icon in the list of Local Indexes.

The markup we’d like to use is:

 <h3>Custom Nav</h3><ul><li><a href=””>Title</a></li><li><a href=””>Title</a></li><li><a href=””>Title</a></li><ul> 

Since most front-end developers have limited CFML knowledge at best, we won’t go into how the following code works, we’ll just use it to output what we need. You can simply copy and paste the code below into your include or template.

Create a new include file

We’ll be calling this custom code into the template as an include to make sure it’s portable. Add a file called “nav_custom.cfm” to:

{siteID}/includes/display_objects/custom/nav_custom.cfm

Set up the feed iterator to look at the Local Index called “News”

Paste the following into nav_custom.cfm. While this may look like a lot of code to worry about, the only thing you need to make sure you do is point the iterator at your feed by setting the “name” attribute to “News.”

 <cfset feed=$.getBean("feed").loadBy(name="News",siteID=$.event("siteid"))><cfset iterator=feed.getIterator()><cfif iterator.hasNext()> 

Add your markup and the items you’d like to output using the Mura Scope

Next, use the iterator to loop through your Local Index, pulling out attributes as necessary. Note that since we are creating a single unordered list, we make sure we put the <ul>’s outside the opening and closing <cfloop> tags.

Inside the <cfloop> tags and after the <cfset item=iterator.next()>, we’ll add a single <li> with the attributes we want. We use the simple “Mura Scope” syntax to pull out the attributes. Note, since we’re in the iterator, we’ll use “item” instead of other scopes such as “content” or “user”.

 <cfset feed=$.getBean("feed").loadBy(name="News",siteID=$.event("siteid"))><cfset iterator=feed.getIterator()><cfif iterator.hasNext()><cfoutput><h3>Custom Nav</h3><ul class=”navCustom”><cfloop condition="iterator.hasNext()"><cfset item=iterator.next()><li><a href="#item.getURL()#">#item.getMenuTitle()#</a></li></cfloop></ul></cfoutput></cfif>

Create a Component

Create a Component in the Mura Admin that calls nav_custom.cfm using the mura tag. This enables portability within your site, allowing you to place your custom nav as an object within Mura itself.

[mura ]$.dspInclude('display_objects/custom/nav_custom.cfm')[/ mura]

Note: Be sure to remove the spaces in the Mura tags. They've been added to ensure the tags don;t get rendered.

Note: When using the dspInclude method, it’s pathing begins in “/{siteID}/includes/” and all files will be called relative to that.

Finally...

  • Save your component
  • Place your component
  • Edit the homepage in Mura, adding your new component as a Content Object.
  • Load the page to view your results

Comments

Andy Ford

You can also add a "you are here" kind of CSS hook by changing the LI element like so:

<li<cfif (item.getContentId eq $.content('contentId'))> class="current"</cfif>>

November 9, 2010, 4:30 AM
Reply
Flag as Spam
Sean Schroeder

Great tip, Andy. Thanks for sharing!

November 11, 2010, 6:27 AM
Reply
Flag as Spam
Jeff Pierson

Thanks for the great write up on this, I just used it on a recent site.

One thing to note on the "you are here" hook.

In my if statement I had to use:

item.getContentId() - note the use of the open close parenthesis after the method name

December 2, 2010, 3:36 AM
Reply
Flag as Spam
Post a Comment

Required Field