Changing the top menu. Changing the top menu Dropdown menu on wayfinder modx

Let's start lesson 8 of MODx Revolution for beginners. Let me remind you that we are making a website for studying MODx Revolution. In the last lesson, we looked at the concept of snippets, which are pieces of PHP code that allow us to add functionality to our website. In this lesson we will look at a special snippet - Wayfinder, and we will use it to create a dynamic menu for our website.

What is Wayfinder?

Wayfinder is a snippet that displays an unsorted list of links to resources in your site tree; the type of list output depends on the snippet call and the parameters of this call. In general terms, this means that when you place a Wayfinder call in your template, it starts looking for resources that meet the parameters specified in it and returns a list of links to those resources in an unsorted list format or in a format you define.

Why use Wayfinder?

I usually use Wayfinder to create dynamic site navigation, that is, menus. Since the majority HTML template If you use unordered lists to create menus, Wayfinder is the perfect tool for this purpose. When creating a site, you can painstakingly insert your URLs into the navigation menu, just as you did before in a static HTML site. At the same time, every time you need to delete or create a page, you need to make the appropriate changes to your menu, change the URLs. Using the Wayfinder snippet to dynamically generate your menus avoids this headache because it automatically detects changes and changes your menu accordingly.

Wayfinder is quite a flexible tool and allows you to determine what resources to include or exclude from the menu, what the menu template is, how deep the menu of your site is. The limit of your capabilities is determined by your HTML/CSS code.

How to use Wayfinder?

As we already mentioned in the previous lesson, the syntax for calling snippets looks like this: [[!somesnippet]]

This is just a basic call and it is not enough, besides this we must define some properties of this call. In the case of Wayfinder, the very minimum that needs to be defined in the properties: where in the resource tree Wayfinder should start building a list of resources. Thus, in calling the Wayfinder snippet, you must specify at least one parameter - the initial ID. The basic call to the Wayfinder snippet in this case will look like this:

This call tells the Wayfinder to start at the root of the tree ( ID 0 means the root of the site) and shows all resources that are published and that do not have a checkmark in the checkbox Hide from Menus.

If we take a look at the template we're using, we can see a top menu with several options and drop-down lists.

Let's take a look at the template and the code that outputs this menu:

As you can see, this is a nested unordered list. Let's replace this code with a basic Wayfinder call and see what we get. Delete the code above and paste in its place:

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

If you're using the same template as me, your code will look something like this:

Save the template and look at home page, it should look like this:

Fantastic! You can see that our previous menu, which had several options, has now been replaced with a simple menu with only one item - Home. This tells us that Wayfinder is working as expected and is taking one page from our site and displaying its title as a menu item.

Let's create a couple more resources. I'm going to add an About page with 3 child pages (MODx, Tutorials, Contact and FAQ pages). You can create any resources or pages for your site. The goal of this exercise is to create several resources so that Wayfinder has something to display.

I'm done creating pages and my site resource tree looks like this:

Now we have several pages, let's see how calling Wayfinder will generate a menu for our site:

The good news is that all our pages have appeared in the menu and by clicking on each menu item we are taken to the corresponding page. (To test this element, add some text to each page, for example on the About page you could add “This is an About page” and this message will appear when you open the page. Remember that we need to define a template for each page, but in this moment I'm not going to worry about it).

The bad news is that the menu formatting is broken, but we can fix it. Click right click mouse to the web page and look source(or use firebug for this), you will see that now Wayfinder generates HTML like this:

  • Home
  • About
    • MODx CMS
    • The Coding Pad
      • The Blog
      • The Services
  • Contact Us
  • Tutorials
  • FAQ

As you can see this looks very similar to our initial static code with a few exceptions. First, Wayfinder generated

    item without class sf-menu which was used in our static code. The template needs this class to work with CSS. It is also clear that
  • items have a parameter span, which refers to the link text elements in the original static code and is not present in the generated Wayfinder code. In addition, our static HTML code has a class current-page-item, which is not represented in our Wayfinder snippet code. All these missing pieces make our menu look unsightly.

    How to customize the output style of a Wayfinder snippet

    Looking at how Wayfinder generates the code, a very natural question arises: “How can we add the missing pieces of code so that we want to display the menu in the form we need?” The answer is very easy, we use template chunks to format the output of the Wayfinder snippet.

    Wayfinder is a flexible tool and with the help of parameters you can define appearance output. Some general parameters allow you to determine at what level to start building a menu, which items not to include in the menu, etc. Other options are template options that allow you to specify html code template for your menu, etc. Descriptions of the latter can be found in the official documentation – http://rtfm.modx.com/display/ADDON/Wayfinder.

    Take note: Some Wayfinder parameters have default values.

    This explains, for example, why in the menu generated by Wayfinder, the Home page item has the class name “ first active" This is the default class, but we can override it by defining our own classes in template chunks.

    We'll be using several Wayfinder options in this tutorial, but I encourage you to explore them all and practice using them as much as possible to understand all of their capabilities. Since Wayfinder's default settings are clearly documented on the official website, it would be foolish to talk about them here. We'll be using more and more of these as we work through different menus.

    To start working on the menu template, let's create several mini-templates and save them in chunks. You'll see that in these chunks we're using HTML code, but replacing dynamic elements fillers(or placeholders as they are also called) the syntax of which looks like this: [[+placeholder]]. The placeholders we use are specific to the Wayfinder snippet and their definition is obvious from the name, but you can always refer to the MODx documentation for more complete help.

    Here are the chunks I'll use to create our template:

    7in1menuOuter– will contain the HTML code for our external ul container.

      [[+wf.wrapper]]

    You can see that I have added a class for the outer ul. Alternative way to do this is to use the wf.classes placeholder and then add the class name to the current wayfinder call using the parameter outerClass. But for simplicity, let's use the first method, but both of them will work fine...

    7in1menuRow– will contain the HTML code of the first level menu items

  • [[+wf.linktext]][[+wf.wrapper]]

    • The main idea here is that I added the tag to the menu link text as in the original static HTML code. I also included the wf.classes placeholder and this will allow me to define a class for the current page that will override the default “active” class.

    7in1menuInner– will contain the HTML code of the internal ul containers

      [[+wf.wrapper]]

    7in1menuInnerRow– will contain HTML code for lines of internal level items

  • [[+wf.linktext]][[+wf.wrapper]]

    • That's it, now our template chunks are in place, as you can see (for the sake of order, I placed them in a separate category):

    Now we can change the Wayfinder call so we can use these mini templates to output the Wayfinder. If you look at the list of templating parameters (it would be useful to have http://rtfm.modx.com/display/ADDON/Wayfinder open in front of you, or print it out and keep it near the screen), you will see that I called my chunks similar to the corresponding ones snippet call parameters. I did this for convenience, it helps me keep track of what's what when I start constructing my call. Let's add parameters and call our chunks. The Wayfinder call will now look like:

    [[!Wayfinder? &startId=`0` &outerTpl=`7in1menuOuter` &rowTpl=`7in1menuRow` &innerTpl=`7in1menuInner` &innerRowTpl=`7in1InnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` ]]

    Parameter values ​​are placed in apostrophes (`) rather than single quotes (').

    Great, let's take a look at this challenge. You can see that we use templating options to call our chunks so that Wayfinder outputs the HTML we need with the correct classes. I have defined the callee hereClass parameter and gave it a value current_page_item so that it matches the static HTML template. You may notice that I left the parameters firstClass And lastClass empty. The reason for this is that my HTML template does not set the class for the first and last point menu, so to avoid overlaps I overwrote empty lines in them.

    It can be seen that our menu looks exactly the way we wanted. The correct styles are used in the dropdown menu. If you look at the source code you will see that the generated Wayfinder‘om HTML code has changed beyond recognition:

    • Home
    • About
      • MODx CMS
      • The Coding Pad
        • The Blog
        • The Services
    • Contact Us
    • Tutorials
    • FAQ

    This code matches the original static code of our template, but it was generated by calling Wayfinder.

    There are many other options that you can use along with Wayfinder for building your menus. In the following lessons we will look at complex menus and how to integrate them into Wayfinder. To summarize: our website has now taken some form and we have a functional and dynamic menu.

    Greetings, dear readers. In the last lesson we filled the site with some content (), now it’s time display everything in the menu so that users can navigate to them.

    Create dynamic menu in MODX we will use a snippet PdoMenu from the package pdoTools. Before you begin, please read the main documentation.

    pdoMenu Documentation

    Options

    Template Options

    CSS Class Options

    Official examples


    You can read the official documentation here. Now let’s look at the most typical menu calls.

    Call PdoMenu

    Option 1. In place of this static menu call the pdoMenu snippet, for this in the resource tree, on the “ tab Elements” in the snippets section, expand the thread pdoTools, then click on pdoMenu left mouse button (do not release the button) and drag this snippet to the place where you want to call the menu, then fill in the window that opens required parameters and press " Save«.

    Option 2. We just write the call manually.

    Typical examples

    Regular one-level menu

    For example, we have the most common menu, with the following html markup.

    The result is the following code for calling the menu:

    []

    • &parents=`0` - list of parents (in my case I don’t limit the selection, since I’ll only output anyway certain pages);
    • &level=`1` — nesting level (in in this case she is not there);
    • &resources=`2,3,4,5` — list of resources that need to be displayed in the menu;
    • &firstClass=`0` — class for the first menu item (not which one);
    • &lastClass=`0` — class of the last menu item (not which one);
    • &outerClass=`top-menu` — menu wrapper class (substituted in ul);
    • &hereClass=`current-menu-item` — class for the active menu item (substituted in li);
    • &rowClass=`menu-item` — class of one menu line (substituted in li).

    Two-level custom bootstrap menu

    Static html code looks like this:

    Its output code will be like this:

` &tplInner=`@INLINE
    [[+wrapper]]
` &tplStart=`@INLINE [[+menutitle]][[+wrapper]]` ]]