I have been developing a new site with a directory component lately and thought I would document the technique I am using to create this effect. It primarily uses Ditto and a snippet comprised of if else statements.
Document Structure
- Level One
- The Directory will be contained within a folder, lets say it’s in the root of the site. I usually place a [!FirstChildRedirect!] snippet call in the content area of this document. This document is just a container.
- Level Two
- The first child within this folder is used for a landing page. The content area describes the content/purpose of the directory. You can also create a dropdown navigational aid using another Ditto call (I will describe at the end of this article). This page is not a folder.
- The rest of the child documents below this first one are all folders. These containers are used as categories within the directory. If the end user wants to add a new category all they have to do is create a new directory and it’s contents.
- Level Three
- The children in this level are the individual items of the directory. These are individual documents contained within the Level 2 folders, no more containers at this level.
Documents Structure and Fields
I place the Ditto calls within the template (actually within an if else snippet, see below). I then create all of my text fields as Template Variables. I also use ManagerManager snippet to hide any unused fields from the end user. That way all that is seen are the fields that are needed.
I chose the normal internal pages template for the landing page. That way the Ditto calls would not show up on this page. By using ManagerManger to hide the template selection field the user cannot change this template setting.
The Snippet(s)
I am assuming that you have some familiarity with the Ditto snippet used with MODx. What you may be realizing is that within this structure we are requiring two different Ditto calls. One if you are viewing a Level 2 directory and it’s child documents (Level 3). Another if you are directly viewing a Level 3 document.
To accomplish this I have created a snippet that is just a PHP if else statement (below) that uses the documentObject to determine if a folder is or is not present:
<?php
$Folder = $modx->documentObject['isfolder'];
if ($Folder=="1")
$output="{{directoryFolder}}";
else
if ($Folder=="0")
$output="{{directoryPages}}";
return "$output";
?>
Depending on whether or not the document is a folder a slightly different Ditto call within a chunk is called in.
This is the {{directoryFolder}} call:
[!Ditto? &startID=`[*id*]` &depth=`2` &tpl=`physicianTPL` &sortBy=`lastName` &sortDir=`asc` &summarize=`10` &paginate=`1` &paginateAlwaysShowLinks=`1`!]
and this is the {{directoryPages}} call:
[!Ditto? &documents=`[*id*]` &depth=`2` &tpl=`physicianTPL2` &summarize=`10` &paginate=`1` &paginateAlwaysShowLinks=`1`!]
Notice that I did use similiar, but slightly different TPLs here for layout. This was a personal choice, but I found that the Level2 and Level3 presentation of the same document required slightly different data presentation.
I do want to mention the TPL, placeholder structure here. It is possible to create a statement that calls in a field only when there is data present. In the example below I created a field to display a website link that display nothing if the field is left blank. All of the placeholders can be formatted in this way:
[+docLink:isnot=``:then=`<a href="[+docLink+]" title="[+pagetitle+]'s Website" target="_blank">[+pagetitle+]'s Website</a>`+]
The Dropdown Navigation
Once again I use Ditto to create another feature of the Directory. I created a chunk that uses a little JavaScript for a clickable dropdown menu:
<script language="JavaScript">
<!--
function goToNextPage()
{
PageIndex=document.form_menu.My_Choice.selectedIndex
if (document.form_menu.My_Choice.options[PageIndex].value != "none")
{
location = document.form_menu.My_Choice.options[PageIndex].value
}
}
-->
</script>
<form name="form_menu">
<select name="My_Choice" size="1" onchange="goToNextPage()">
<option value="none" selected="selected">WRHS Physicians</option>
[!Ditto? &startID=`6` &tpl=`dropdownTPL` &depth=`2` &sortBy=`lastName` &sortDir=`asc` &hideFolders=`1` &filter=`id,[*id*],2`!]
</select>
</form>
As you can see in my Ditto call I found it necessary to hide the categories (folders) and then used the filter to remove the landing page from the output.
The Wayfinder Navigation
As I put all of this together I have also used a Wayfinder call in to create a listing of all of the Level 2 directories in the sidebar of my site. Using this approach I am only displaying the categories (Level 2 folder) and not the category contents (Level 3 documents):
[!Wayfinder? &startId=`[[UltimateParent? &topLevel=`0`]]`&level=`1` &firstClass=`titleinteriornav`!]
By using all of the wonderful MODx tools at my disposal this approach has given me exactly the view(s) I need and allows an end user to create new categories without droping in any additional code or even changing templates (as I mentioned above, that field was hidden too). On their end I don’t know how this could be made any more straightforward for an end user.
