CAPÍTULO 3. ANÁLISIS Y DISEÑO DEL SISTEMA
3.4 C ONCLUSIONES
Lesson #10 at a glance [+wf.docid+]
[+wf.description+]
[+wf.introtext+]
[*document_field_name*]
[+template_variable_name+]
Welcome to lesson #10!
The [+wf.docid+] placeholder
If you wish to output the MODx document id of the items in your Wayfinder menu you can do this easily by using the placeholder [+wf.docid+]. Similar to most of the other Wayfinder placeholders, the [+wf.docid+] is only applicable in row level templates. Wayfinder will output the respective MODx document id of your menu items (at all levels) where you put the [+wf.docid+] placeholder in your template. In the example below, the placeholder has been added to the &rowTpl.
<li [+wf.id+] [+wf.classes+] >
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+][+wf.docid+]</a>
[+wf.wrapper+]
</li>
The resultant menu is as follows:
Use of [+wf.docid+] inserts document ids in the menu output
87
The [+wf.description+] placeholder
Using the [+wf.description+] placeholder, you can output the contents of your MODx documents'
"Description" field to the Wayfinder menu output. This too is a row template placeholder. To illustrate how this placeholder works, we will create a mini menu for our Velito Restaurant. This menu will be placed not within our website's template but will be within the content of the document "Menus".
We will start by creating a &rowTpl for this mini menu since I would like to structure the menu differently from the main one. You can do this by either creating a new chunk or duplicating the existing &rowTpl, then renaming and editing it. I have called my chunk menu2Rows and it has the following as its content:
<li [+wf.id+] [+wf.classes+] >
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.description+]</a>
[+wf.wrapper+]
</li>
Notice that the chunk does not have a [+wf.linktext+] placeholder. I have opted to use [+wf.description+] placeholder instead. The contents of the description field for each menu item will be respectively inserted in this placeholder.
For each of the documents that will form our menu, make sure you add some text in their respective
"Description" fields. I have already done this for my 3 documents.
Now open the document "Menus" for editing and add the Wayfinder call below within the Document content text area:
[[Wayfinder? &startId=`4` &outerTpl=`menuContainer` &rowTpl=`menu2Rows` &level=`1`]]
Notice that the &startId=`4` - this is of course the id of the document "Menus". Notice also the
&rowTpl we are using for this mini menu, i.e. menu2Rows.
88 Wayfinder called within a document
In addition, modify the &level parameter within the Wayfinder call that we have in our Velito website template to &level=`1`. This is just a matter of preference for me since I do not want the child documents of the parent menu item "Menus" to be part of the main menu of the site. Since there will be no sub-menus in the main menu, I have also done away with the &hideSubMenus parameter.
[[Wayfinder? &startId=`0` &outerTpl=`menuContainer` &rowTpl=`menuRows` &level=`1`]]
The final step is to add some CSS rules to target the menu items of the mini menu. I have created a 3 column list using the CSS below.
89
#main_content ul { list-style-type: none; margin:0px; padding: 0; width: 675px; float:left; }
#main_content ul li a {color: #BEFF1F; text-decoration: none; font-size: 2em; float:left; margin: 0px 7px; padding:5px; width: 200px; outline: yellow dashed thin; background: black; text-align: center;}
#main_content ul li a:hover {color: white; background: #DE7C05;outline: white dashed thin;}
The image below illustrates the menu output
You could get even fancier by using the &rowIdPrefix within the mini menu. This would enable you to use the id selectors of the menu items to style them differently. We will see an example of this in chapter 15.
The [+wf.introtext+] placeholder
The [+wf.introtext+] placeholder will allow you to insert the contents of the "Summary (introtext)"
field of your MODx documents in a Wayfinder menu. This could probably be used as a teaser for your menu items. This placeholder is only applicable to row level items. I do not need to provide an example of its use since the process is pretty much the same as for the [+wf.description+]
placeholder; place the [+wf.introtext+] within your Wayfinder template where you want the contents of your documents' "Summary (introtext)" to appear.
Other document field names
You can include other MODx document field names (Document Variables) in your Wayfinder output by referencing them using the syntax [*document_field_name*] within your Wayfinder templates.
For instance, to include the "longtitle" field in the &rowTpl of our main menu (or any menu for that matter), we would do this as follows:
90 <li [+wf.id+] [+wf.classes+] >
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+][*longtitle*]
</a>
[+wf.wrapper+]
</li>
This would output the "longtitle" of the respective documents where the [*longtitle*] was placed in the Wayfinder template.
For a list of MODx document fields visit this link:
http://svn.modxcms.com/docs/display/MODx096/Document+Variables
Using Template Variables in Wayfinder
Using MODx Template Variables (TVs) within your Wayfinder menu is really quite easy. You will need to reference the TVs you want to appear in your menu using the following syntax:
[+template_variable_name+]
!
You will notice from the above syntax that this is not the normal MODx way of referencing a TV!However, this is how it is done in Wayfinder
Note that for each document in your menu, the respective values of their TVs will be output. To better understand this, let us modify the mini menu we earlier looked at in this lesson.
Create an image type TV and give it a name. I have called mine menutv. Make that TV accessible to the template you are using for your website. What we want to do is use images in our 3 mini menu items – i.e. "Monday – Thursday", "Friday" and "Saturday – Sunday". We want the value of the menutv of each of these documents to be output in their corresponding rows. Instead of using the [+wf.description+] as our text of menu, we will use the menutv instead. I have gone ahead and prepared three 200px by 200px images that I will use as the values of the menutv for each of my documents respectively. I have uploaded these images to my assets folder within my MODx install.
These images are now available for the menutv.
I have then edited each of the above three documents and inserted an image in their respective menutv TVs.
It is now time to edit the Wayfinder template where I want this TV to be inserted. I will be using the
&rowTpl of the mini menu, i.e. menu2Rows. I have edited it as follows:
91 <li [+wf.id+] [+wf.classes+] >
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><img src="[+menutv+]"</a>
[+wf.wrapper+]
</li>
Please note where and how I have referenced my TV in the above Wayfinder template. What should happen is that the value (in our case the path to the image) that we gave each document should be output to the corresponding row of each document. In addition, that image should be a link since it will be enclosed within anchor tags <a>.
Here is the resultant menu using the above &rowTpl:
Use of Template Variables within Wayfinder menu
How far you can go into combining the power of TVs with Wayfinder's brilliance and robustness is perhaps limited only by your imagination.
Well, that is all for this lesson. In the next lesson we will look at how we can instruct Wayfinder to embed CSS or JS into the HEAD section of the page in which it is called. Let us do a recap before we move on.
Summary of lesson #10
1. The [+wf.docid+] placeholder if used will cause Wayfinder to insert the MODx document ids of the for each and every document that is part of the menu items.
92
2. Using the [+wf.description+] placeholder will cause Wayfinder to output the contents of the
"Description" field of the respective documents in your menu.
3. The [+wf.introtext+] placeholder will allow you to insert the contents of the "Summary (introtext)" field of your MODx documents in a Wayfinder menu.
4. To output other Document Variables to your Wayfinder menu, you can use the syntax [*document_field_name*] in the row level templates of your Wayfinder menu. For instance, [*longtitle*].
5. To use a TV within your Wayfinder menu, call it using the following syntax in your row level Wayfinder templates; [+template_variable_name+].
93