CGSimpleSmarty breadcrumbs

Het toevoegen van breadcrumbs is binnen CMSMS mogelijk met de {breadcrumbs} tag. Het nadeel van deze tag is dat deze maar beperkte mogelijkheden biedt met betrekking tot het stylen van je breadcrumbs.

In deze blog licht ik een alternatieve methode toe die gebruik maakt van de CGSimpleSmarty module en MenuManager hierbij heb je volledige controle over de opmaak.

Stappenplan

Stap 1: Installeer CGSimpleSmarty

• Extensions -> Module Manager -> CGSimpleSmarty

Stap 2: Maak een breadcrumbs MenuManager template aan

• Layout -> Menumanager "breadcrumbs"

{foreach from=$nodelist item=node name=menu}
{if $smarty.foreach.menu.first}
    <li class="first"><a>{$node->menutext}</a></li>
{/if}
{if $node->current == true}
    <li><a>{$node->menutext}</a></li>
{/if}
{/foreach}

Stap 3: Voeg CSS toe en koppel deze aan je template

• Layout -> StyleSheets
• Layout -> Templates "Attach StyleSheets"

#breadcrumbs {
    display: inline;
    float: left;
    color: #000000;
    width: 960px;
    height: 36px;
    padding: 8px 8px 8px 8px;
}

#breadcrumbs ul { 
    overflow: hidden;
}

#breadcrumbs ul li {
    display: inline;
    float: left;
    margin: 0px 4px 0px 4px;
    font-size: 110%;
    color: #000000;
    background-image: url('/images/bullet.gif');
    background-repeat: no-repeat;
    background-position: 0px 4px;
    padding-left: 18px;
    
}

#breadcrumbs ul li.first {
    display: inline;
    float: left;
    margin: 0px 4px 0px -10px;
    font-size: 110%;
    color: #FF0000;      
}

#breadcrumbs ul li a {
    color: #000000;
    text-decoration: none;
}

#breadcrumbs ul li.first a:hover { 
    text-decoration: underline;
}

#breadcrumbs ul li a:hover { 
    text-decoration: underline;
}

Stap 4: Voeg de volgende MenuManager / Breadcrumbs code toe aan je template

• Layout -> Templates

<div id="breadcrumbs">
    <ul>                
{if $cgsimple->has_children()} 	
    {menu start_page="$page_alias" template='breadcrumbs'}
{else} 	
    {menu start_page=$cgsimple->get_parent_alias() template='breadcrumbs'}
{/if}
    </ul>
</div>

Onbeperkt aantal niveaus met behulp van CGExtensions cge_setlist

Bovenstaande voorbeeld werkt perfect voor websites met 2 menu-niveaus. Op het moment dat je breadcrumbs wilt gebruiken voor een menu met bijvoorbeeld drie of vier menu-niveaus. Zou je met behulp van de modue CGExtensions cge_setlist functie en wat Smarty code het volgende kunnen doen:

{* breadcrumbs unlimited levels cgextensions -> cge_setlist *}

{assign var=level_array value="."|explode:$position}
{capture assign="level"}{$level_array|@count}{/capture}
{assign var="_key" value=""}

{section name="i" start=0 loop=$level step=1}
	{assign var=pointer value=$smarty.section.i.index}	
	{if $smarty.section.i.last}
		{capture assign="_key"}{$_key}{$level_array[$pointer]}{/capture}
	{else}
		{capture assign="_key"}{$_key}{$level_array[$pointer]}.{/capture}
	{/if}
	{capture assign="_setlist_key"}{$_key|replace:".":""}{/capture}
	{cge_setlist name='breadcrumb_array' key=$_setlist_key value=$pointer}
{/section}

<div id="breadcrumbs">
<ul>
{foreach from=$nodelist item="node" name="loop"}
	{capture assign="hierarchy_key"}{$node->hierarchy|replace:".":""}{/capture}
	{if isset($breadcrumb_array.$hierarchy_key)}
		{if $node->current == true}		
		<li{if $node->depth == 1} class="first"{/if}>{$node->pagetitle}</li>
		{else}
		<li{if $node->depth == 1} class="first"{/if}><a href="{$node->url}">{$node->pagetitle}</a></li>
		{/if}
	{/if}
{/foreach}
</ul>
</div>

Documentatie

• CG Simple Smarty documentatie