Answered Change CSS class in Wayfinder MODx menu dependent on page template

Hi,

I've got a dropdown menu created with Wayfinder in MODx. Basically I'm trying to style specific page links in the dropdown, depending on a template variable I've set up. I've got a TV called [*status*] which can be set to 1 of 3 radio options when editing a page.

So fx. if a page's [*status*] is set to "A", its link in the dropdown gets the class A - and class "A" can be styled.

How would you do this?

I would also like to order the page links in the dropdown, according to their page's [*status*].

Thanks!

On first blush it seems like you'd be better off just designing the menu statically in the template and testing against the TVs there.

How often are the menu items going to change? How often are your statuses changing or the styles associated with the statuses?

Frankly I'd just do it all manually unless it is very dynamic and changing all the time. In that case, you may have to combine Wayfinder with your own assembly code, or build the menu with your own custom snippet and skip WF entirely.

Thanks a lot for your answer!

Yeah, I've thought about that too.
The menu isn't going to change that often, so that could be fine. The statuses are changing several times a month, so that has to be automated.

How would you do it with a static menu and TVs switching the class/look og the links automatically?

You can access TVs like anything else, so I'm guessing in your HTML menu just do something like:



Here I'm just using a basic if/then on the TV option. If the option is "Opt1", then class="Option1Class". If nothing matches, you'll end up with an empty line. You could also put that inside the TV test like this:



You said the status changes many times a month, that shouldn't be a problem. If the class names themselves changed, then you'd have to be editing the code.

It would be easier to just assign the same class as the TV value.


The TV could be set to Option1, Option2, Option3 via a drop down. I'd also make sure the TV is required for the Resource to be saved.

Quote from: wshawn at Mar 09, 2015, 03:13 PM

It would be easier to just assign the same class as the TV value.

<ul>
  <li><a href="..." class="[[*myTV]]Class">Menu item1</a></li>
</ul>

The TV could be set to Option1, Option2, Option3 via a drop down. I'd also make sure the TV is required for the Resource to be saved.

I believe doing this would make ALL the links have the same class, and therefore couldn't style just a particular link only when a particular option was set in the TV.

@almegaard

I am an Evo user, but I think the same can be achieved in Revo - which I presume you are using.

OPTION 1:

In each page you create, you can set the "Link Attributes", so, for each ID that will be shown in the menu you can add the class either per hand or via your TV.

This goes for individual items as well, so if you don't want all child items to have the same status class, this is the best option as you can set them individually.

Example - add either of the following (manual or dynamic) to the link attribute section on each page where needed:

This is probably the better solution:


OPTION 2:

Instead of the above, you could use the individual templates for WayFinder, which would simplify things (one less element to have to remember to fill in), this will add the class to all of the elements, but if the status isnt selected you get an empty output, example:


Create a new chunk, call it whatever you want and add one of the following to it.

Example - Modified rowTpl:

Once you have the chunk setup modify your Wayfinder call so that it knows it should use your chunk, example:

In theory, you should be able to sort the order using your TV, example:


Forgot something:

I personally would set up the status TV as followed:

TV input type:
DropDown List Menu

Input option values:
||A==class_a||B==class_b||C==class_c

Where the input values & class names are the values that you require. This way you can use the status TV directly as your class name.

Adding "||" at the beginning of the input options generates an empty option, which, if you don't select "A,B or C" and you are using the Wayfinder option, generates the empty class. [ed. note: iusemodx last edited this post 11 years, 6 months ago.]

Thanks you so much for helping out, all of you!

isuemodx:

I've tried both Option 1 and 2 and it's almost working. Except it isn't showing pulling the [status], the class is empty.
It looks like this when checking the source code, even though I've gone through everything.



Any ideas?

Which system are you using, Evo or Revo ?

Which solution / option are you using, 1 or 2 ?

Running Evolution 1.0.13.

I tested both options, are using option 1 now with the [status] in the link attribute. But the class is just blank.