Ochutnávač HlidameNaftu LuciCat AutoZávodník Pension a Restaurace 338 Penzion Dřevěnice

Tvorba menu v MODx Evolution pomocí Wayfinder

menumaticZákladní instalace systému MODx obsahuje snippet Wayfinder, který slouží jako menu builder, tedy nástroj pro "snadné" vytváření menu. Slovo snadné jsem úmyslně dal do uvozovek, protože začátečník se může nejprve cítit trochu ztracen při pokusu vykouzlit funkční menu, ale při bližším studiu zjistíte, že hezké menu se dá vytvořit docela snadno... Pokud si nainstalujete s MODx i vzorovou šablonu stránky, je zde Wayfinder menu již vytvořeno a pomocí CSS jej lze snadno upravit a implementovat do vlastní stránky. Náhled této vzorové šablony a menu si můžete prohlédnout na www.trymodx.com.

Pro ty co se hodlají dostat Wayfinderu pořádně na kobylku bude určitě užitečný několikastránkový manuál v pdf, kde jsou veškeré funkce podrobně popsány s příklady.

Wayfinder strukturaPokud si chcete vytvořit menu rychleji, bez sáhodlouhé studie manuálu, doporučuji si přečíst vzorový příklad na MODx Wikipedii, kde najdete názorný příklad jak implementovat "placeholders" (kusy kódu Wayfinderu) do html kódu. Je zde i názorný obrázek, ukazující strukturu jednotlivých vrstev kódu.

Na internetu existuje spousta hezkých animovaných menu volně ke stažení, využívající třeba scripty jQuery nebo MooTools, o kterých byla řeč v minulém článku mého blogu. Tyto menu nejsou přímo dělané na Wayfinder, ale jednouchou úpravou je lze použít. Jak implementovat tyto menu do Wayfinderu si nyní ukážeme na vzorovém příkladu s MenuMatic.

Předpokladem je, že již máme vytvořenou základní html stránku, do které budeme vkládat menu. Ze stránky www.greengeckodesign.com si stáhneme ZIP archiv s menu a rozbalíme. MenuMatic vyžaduje script  MooTools 1.2, musíme jej tedy do html kódu připojit (viz minulý čánek).

V archívu nalezneme dvě vzorové menu, horizontal a vertical. Já použiji vertical a nakopíruji celý adr. na server s instalací MODx do adresáře se svojí webovou šablonou. Odkazy na JavaScripty a CSS taky nezapomeňte přiložit do svého html kódu.

Vložené odkazy budou vypadat nějak takto:

<link rel="stylesheet" media="screen" charset="utf-8" type="text/css" href="assets/templates/[NAZEV]/mm/css/MenuMatic.css" />
<!--[if lt IE 7]>
  <link rel="stylesheet" media="screen" charset="utf-8" type="text/css"  href="assets/templates/[NAZEV]/mm/css/MenuMatic-ie6.css" />
<![endif]-->
<script src="assets/templates/[NAZEV]/mm/js/mootools.js" type="text/javascript"></script>
<script src="assets/templates/[NAZEV]/mm/js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/templates/[NAZEV]/mm/js/mm-start.js" type="text/javascript" charset="utf-8"></script>

Soubor mm-start.js jsem si vytvořil zvlášť a do něj vložil kód

window.addEvent('domready', function() { var myMenu = new MenuMatic(); });

Který spouští MenuMatic jako událost domready. Tento kód může být taky samostatně uveden v html kódu místo zvláštního souboru.

Nyní si musíme vytvořit konfigurační soubor pro Wayfinder. Do něj vložíme kód uvedený níže, pojmenujeme jej mm.config.php a uložíme na server s instalací MODx do adr. /assets/snippets/wayfinder/configs. Název souboru může být samozřejmě libovolný, ale musí být ve tvaru xxx.config.php.

<?php
    $level = 3;
    $parentClass = '';
    $rowClass = '';
    $selfClass = '';
    $innerClass = '';
    $outerTpl = '@CODE:<div id="container">
                <ul id="nav"> [+wf.wrapper+] </ul></div>';
    $rowTpl = '@CODE:<li><a href="[+wf.link+]" title="">
              [+wf.linktext+]</a></li>';
    $parentRowTpl = '@CODE:<li><a [+wf.classes+] href="[+wf.link+]"
                    title="">[+wf.linktext+]</a>[+wf.wrapper+]</li>';
    $innerTpl = '@CODE:<ul> [+wf.wrapper+] </ul>';
?>

Hodnota level = 3 znamená, do jaké hloubky může Wayfinder menu generovat, ostatní třídy Class a šablony Tpl jsou popsané v článku na wikipedii a výše přiloženém obrázku. Pro nás jsou dostačující proměnné $outerTpl, $rowTpl, $parentRowTpl a $innerTpl. Tyto proměnné obsahují části kódu s tagy <ul> a <li> jenž tvoří html kód menu, tak jako ve vzorovém index.html souboru MenuMatic.

Do šablony html stránky MODx vložíme tento kód pro Wayfinder snippet:

[!Wayfinder?startId=`0` &config=`mm`!]

Kde název "mm" je název našeho konfiguračního soboru mm.config.php nahraného do adr. s Wayfinderem.

Po vytvoření stránek s menu v systému MODx, bychom měli mít menu vypadající takto.