Tesla CMS Helpdesk

Het is heel gemakkelijk om een submenu toe te voegen. We gaan de onderstaande html overzetten naar een bruikbaar en dynamisch submenu.

<div class=”submenu”>
	<ul>
		<li>
			<a href=”head-item/subitem-1” class=”active”>Subitem 1</a>
		</li>
		<li>
			<a href=”head-item/subitem-2”>Subitem 2</a>
		</li>
	</ul>
</div>

We willen de bovenstaande html code terug laten komen in iedere pagina van de website behalve op de home pagina. Daarom voegen we het submenu in bij de content. 

We gaan dus naar de map /public/templates/onze_template/content/

Hierin vinden we standaard 2 files namelijk:

• Index.tpl
  
• Home.tpl
  

Omdat we het op alle pagina’s willen hebben behalve de home passen we de file index.tpl aan.

We plaatsen op de plek waar wij het submenu willen hebben de volgende code

{active_submenu=@submenu.tpl} 

Laten we deze code een ontleden;

• {
  
• Geeft aan dat we beginnen met een template code
• Active_
  
• Geeft aan dat we het actieve submenu van de huidige pagina reeks willen hebben
• Submenu
  
• Geeft aan `dat het gaat om het submenu
• =@
  
• Geeft aan dat je 1 element terug verwacht als aanwezig namelijk het submenu
• Submenu.tpl
  
• De naam van het bestand waar we de data verder in specificieren
• }
  
• Geeft aan dat je eindigt met de template code

We slaan nu de index.tpl op. Als we nu zouden kijken zien we een foutmelding “submenu.tpl not found”. Dit komt omdat we submenu.tpl nog niet hebben aangemaakt. Laten we dit doorvoeren.

We gaan naar de map /public/templates/onze_template/components/navigation

We maken in deze map een nieuwe file aan genaamd submenu.tpl

We openen nu de file submenu.tpl en plaatsen daarin onze huidige html code.

<div class=”submenu”>
	<ul>
		<li>
			<a href=”head-item/subitem-1” class=”active”>Subitem 1</a>
		</li>
		<li>
			<a href=”head-item/subitem-2”>Subitem 2</a>
		</li>
	</ul>
</div>

We willen nu de code dynamisch maken zodat als er subitems door een gebruiker aangemaakt worden deze te zien zijn. Daarom vervangen we de volgende code van het orgineel

<li>
	<a href=”head-item/subitem-1” class=”active”>Subitem 1</a>
</li>
<li>
	<a href=”head-item/subitem-2”>Subitem 2</a>
</li>

Met de volgende template code {submenu= list.tpl} Laten we ook deze code even ontleden

• {
• Geeft aan dat het gaat om het begin van een template code
• Submenu
• Geeft aan dat het gaat om het submenu
• =
• Geeft aan dat we 1 of meerdere elementen terug verwachten als deze er zijn
• List.tpl
• De naam van het bestand waarin we de data verder gaan specificeren
• }
• Geeft aan dat het gaat om het einde van de template code

We slaan nu submenu.tpl op.

Als we nu op de website zouden kijken zien we weer een foutmelding “menu.tpl not known”. Dit komt omdat ook dit bestand nog niet is aangemaakt. We gaan deze aanmaken.

We gaan naar de volgende folder /public/templates/onze_template/components/navigation/elements/submenu/

We maken in deze folder een nieuwe file aan genaamd list.tpl

We openen list.tpl en plaatsen daarin onze subitem html code

<li>
	<a href=”head-item/subitem-1” class=”active”>Subitem 1</a>
</li>

In dit bestand kunnen we van de volgende tags gebruik maken

• {$active}
  
• Hierin komt de tekst “active” te staan als het gaat om een actief menu item
• {$url}
  
• Hierin komt de url van de pagina te staan
• {$title}
  
• Hierin komt de naam van de pagina te staan

We vervangen in onze html de elementen die dynamisch moeten worden. Onze code zal er nu als volgt uitzien;

<li>
	<a href=”{$url}” class=”{$active}”>{$title}</a>
</li>

We slaan het bestand item.tpl op.

Gefeliciteerd het is u gelukt om een synamisch submenu toe te voegen.