Using the Menu Manager

For help using the Menu Manager and to find out how to create and maintain customised menus in Aurora, please see the Menu Manager section.

Adding Menus to the Front-end

There are two steps to doing this:

Create the Menu Template
Include the Menu Template Aurora Demo example available Aurora Demo Front-end Examples

Creating the Menu Template

This template must be a stand-alone file that can be included later during the "Include the Menu Template" stage.

This template can be of any design, from HTML to XML.

❗️
The template is going to be cached so if there is any Smarty template code that needs to run dynamically when the page is loaded, like the highlighting of the currently selected menu item in a navigation menu, this must be surrounded by "{literal}" tags to ensure they are not processed during the caching process.

Menu Manager Template Variables

This section describes the data sources available to the template when building a menu.

Variable Name	Type	Description
$navigation_nodes	Array [ $node ]	An array of nodes found at the root of the menu structure being used.
$node	Container	A Container holding all of a node's details.
$node.node_title	String	The title of the node.
$node.unmodified_node_url	String	This is the URL represented by this node in the Default Language (usually EN-GB). This URL always points to the Default location for the URL in question (where it is an internal Dynamic Aurora URL).
$node.node_url	String	This is the URL represented by the node and is normally relative, but this is not always the case, as static external URLs can be provided in the Menu Manager if desired. This URL will be presented with the current Language prefix in place if appropriate (where it is an internal Dynamic Aurora URL).
$node.node_content	String	Custom free-form text content can be assigned to a node for the general use in the templates. This is where said content can be found.
$node.note_type	[ categories \| fields \| fieldvalue \| attributes \| attributevalue ]	This field very loosely describes the type of information being represented by the node. This may not always be set in the case of the node being static.
$node.children	Array [ $node ]	An array of child nodes found within the current node.

Example Templates

Please see the following example templates that provide various levels of support for most of the Menu Manager's features.

Drop-down Menu with Single Level Categories and Brand Price Filters

This example will produce a menu providing a simple list of categories followed by a separate column Menu for any Filters you wish to configure, as shown in Figure 1a.

Figure 1a: Horizontal Menu Example

🚧
This template requires you to ensure that when configuring your list of categories in the Menu Manager, ALL of the categories listed have no children within them or that all their children are disabled. If this is not so, this template may produce unexpected results.

{strip} 
<div class="template_nav_main">
   <ul>
     <li class="template_nav_main_home"><a href="{if $language_iso}/{$language_iso}{/if}/"><img src="/templates/{$templates_dir}/_images/template/shim.png" width="10" height="36" alt="Home" /></a></li>
 
   {foreach from="`$navigation_nodes`" item="node" name="nodes"}
     <li {literal}{if $path.0 == "{/literal}{$node.node_url|trim:"/"}{literal}"} class="template_nav_main_selected"{/if}{/literal}>
       <a href="{$node.node_url}" title="" class="navitem">{$node.node_title|escape:"html":"UTF-8"}</a>
     {if $node.children|@count > 0}
       <div class="template_dropdown_container dropdown_{$smarty.foreach.nodes.iteration}">
 
         <div class="template_dropdown_pod">
           <ul>
       {foreach from="`$node.children`" item="subnode" name="subnodes"}
         {if !$subnode.children}
           {if $smarty.foreach.subnodes.first}
             <li>{site_text page="Navigation" part="Title: Filter By Category"}</li>
           {/if}
             <li><a href="{$subnode.node_url}">{$subnode.node_title|escape:"html":"UTF-8"}</a></li>
         {else}
           {if !$smarty.foreach.subnodes.first}
           </ul>
         </div>
         <div class="template_dropdown_pod">
           <ul>
           {/if}
             <li>{$subnode.node_title}</li>
           {foreach from=$subnode.children item="subnode2" name="subnodes2"}
             <li>
               <a href="{$subnode2.node_url}">
             {if $subnode2.node_url|strpos:"/p:"}
               {assign var="split_location" value=$subnode2.node_title|strpos:"-"}
                {assign var="min_price" value=$subnode2.node_title|substr:0:$split_location}
               {assign var="max_price" value=$subnode2.node_title|substr:$split_location+1}
               {if $min_price == '0'}
                 Under {$smarty.session.currency.pre_text|escape:"html":"UTF-8"}{$max_price}
               {else}
                 {$smarty.session.currency.pre_text|escape:"html":"UTF-8"}{$min_price}{if !$smarty.foreach.subnodes2.last} -  {$smarty.session.currency.pre_text|escape:"html":"UTF-8"}{$max_price}{else} or over{/if} 
               {/if}
             {else}
               {$subnode2.node_title|escape:"html":"UTF-8"}
             {/if}
               </a>
             </li>
           {/foreach}
         {/if}
       {/foreach}
           </ul>
         </div>
 
 
 
       {if $node.filter_info.brand}
       <div class="template_dropdown_pod">
         <ul>
           <li>{site_text page="Navigation" part="Title: Filter By Brand"}</li>
         {foreach from = $node.filter_info.brand item="filter"}
           <li><a href="{if $language_iso}/{$language_iso}{/if}/{$node.node_url}{$filter.url}">{$filter.return}</a></li>
         {/foreach}
         </ul>
       </div>
       {/if}
 
       {if $node.filter_info.ability}
       <div class="template_dropdown_pod">
         <ul>
           <li>{site_text page="Navigation" part="Title: Filter By Ability"}</li>
         {foreach from = $node.filter_info.ability item="filter"}
           <li><a href="{if $language_iso}/{$language_iso}{/if}/{$node.node_url}{$filter.url}">{$filter.return}</a></li>
         {/foreach}
           </li>
         </ul>
       </div>
       {/if}
 
       {if $node.filter_info.age}
       <div class="template_dropdown_pod">
         <ul>
           <li>{site_text page="Navigation" part="Title: Filter By Age"}</li>
         {foreach from = $node.filter_info.age item="filter"}
           <li><a href="{if $language_iso}/{$language_iso}{/if}/{$node.node_url}{$filter.url}">{$filter.return}</a></li>
         {/foreach}
           </li>
         </ul>
       </div>
       {/if}
 
       {if $node.filter_info.type}
       <div class="template_dropdown_pod">
         <ul>
           <li>{site_text page="Navigation" part="Title: Filter By Type"}</li>
         {foreach from = $node.filter_info.type item="filter"}
           <li><a href="{if $language_iso}/{$language_iso}{/if}/{$node.node_url}{$filter.url}">{$filter.return}</a></li>
         {/foreach}
           </li>
         </ul>
       </div>
       {/if}
 
       <div class="clear"></div>
       </div>
     {/if}
     </li>
   {/foreach}
   </ul> 
   <div class="clear"></div> 
</div>
{/strip}

Simple List Template

This template is really just intended to illustrate the basic method used to loop through each menu item and display them in your template. This might look something like Figure 1b, which can easily be adjusted using CSS to match your stylised menu system.

Figure 1b: Simple List Menu Example

<ul>        
{foreach from=$navigation_nodes item="node" name="nodes"}
  <li>
    <a href="{$node.node_url}" title="">{$node.node_title|escape:"html":"UTF-8"}</a>
    <ul>
  {foreach from="`$node.children`" item="subnode" name="subnodes"}
      <li><a href="{$subnode.node_url}">{$subnode.node_title|escape:"html":"UTF-8"}</a></li>
    {if $subnode.children}
      <li>
        <ul>
      {foreach from=$subnode.children item="subnode2" name="subnodes2"}
          <li>
            <a href="{$subnode2.node_url}">
        {* THIS CODE DEALS WITH THE SPECIAL DISPLAY PROPERTIES ASSOCIATED WITH PRICE RANGES *}
        {if $subnode2.node_url|strpos:"/p:"}
          {assign var="split_location" value=$subnode2.node_title|strpos:"-"}
          {assign var="min_price" value=$subnode2.node_title|substr:0:$split_location}
          {assign var="max_price" value=$subnode2.node_title|substr:$split_location+1}
          {if $min_price == '0'}
              Under {$smarty.session.currency.pre_text|escape:"html":"UTF-8"}{$max_price}
          {else}
              {$smarty.session.currency.pre_text|escape:"html":"UTF-8"}{$min_price}{if !$smarty.foreach.subnodes2.last} - {$smarty.session.currency.pre_text|escape:"html":"UTF-8"}{$max_price}{else} or over{/if} 
          {/if}
        {else}
              {$subnode2.node_title|escape:"html":"UTF-8"}
        {/if}
            </a>
          </li>
      {/foreach}
        </ul>
      </li>
    {/if}
  {/foreach}
    </ul>
  </li>
{/foreach}
</ul>

📘
Your Menus will only display as many 'levels' as you write into your template. By this we mean if you only add a "foreach" loop for one level of children, then only that one level will ever be shown, regardless of how many you configure in the Menu Manager.

Including Smarty Tags for Page Load

To begin, it's important to understand that the template you are creating is to be used to produce a template in itself to then be saved and included as needed. As such, you cannot access many of the usual Aurora or Session values that you might normally in the standard template. This is because the template is in fact merged by a CLI and not by Apache when the user requests it. This being said, you are able to include these snips of code if you need to tailor the output of the menu at request if necessary.

To include any Smarty tags in your final request template, whether a variable ("{$value}") or construct ("{if $value}...{/if}"), you must use the "{literal}" tags to prevent them from being processed during the CLI caching process. This can look a bit messy at times when working with it, but is necessary.

Below is an example of how to add a condition to check the current page being requested by the user and adding a class to denote it is selected.

<li{literal}{if $path.0 == ''} class="selected"{/if}{/literal}"><a href="/">Home</a></li>

{* This will output: <li{if $path.0 == ''} class="selected"{/if}"><a href="/">Home</a></li>" *}

To break this down a little, it is exactly the same as the code you might normally use, but the 'if' statement has been wrapped in the 'literal' tags to ensure that this is left there for the final template to process. A slightly more complex example that does the same thing but for a dynamic URL can be seen below. This example allows the value to be processed from "$node.node_url" and passed into the final template, but preserves all other logic.

<li{literal}{if $path.0 == "{/literal}{$node.node_url|trim:"/"}{literal}"}class="selected"{/if}{/literal}"><a href="/">Home</a></li>

{* If "$node.node_url" is "/clothing/", this will output: <li{if $path.0 == "clothing"} class="selected"{/if}"><a href="/">Home</a></li>" *}

Include the Menu Template

Once the Menu Template is ready to be included, the "menu_embed" command can be used as shown below.

<!-- To load the "Main Menu" -->
{menu_embed file="menu-manager-examples-template.tpl.html" menu="Main Menu"}

<!-- To load the "Testing Sidebar Menu" -->
{menu_embed file="menu-manager-examples-template.tpl.html" menu="Testing Sidebar Menu"}

This method will include a cached copy of the Menu, which can be cleared for regeneration at any time from the Menu Manager: Menu Caching article.