0
votes

I'm trying to get this code working:

<f:if condition="{item.spacer} || {item.current}">
  <f:then>
    <li class="{f:if(condition:item.current, then:'nav-item active')}{f:if(condition:item.spacer, then:'nav-item spacer')}">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:then>
  <f:else if="{item.children} && {item.active}">
    <li class="nav-item dropdown active">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:else>
  <f:else if="{item.children}">
    <li class="{f:if(condition:item.children, then:'nav-item dropdown')}">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:else>
  <f:else if="{item.active}">
    <li class="{f:if(condition:item.active, then:'nav-item active')}">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:else>
  <f:else>
    <li class="nav-item">
      <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
  </f:else>
</f:if>

The li-tag is closed afterwards in parent partial. The only thing not working ist the combined condition in the first else if. Altough item.children and item.active are true, the condition only consisting of item.active is rendered. What am I doing wrong here?

Thanks, Jonathan

1
What does <f:debug>{item.children}</f:debug> tell you? And, although it doesn't address your issue, you could omit many of the if-statements here, such as: <f:else if="{item.active}"> <li class="nav-item active">phvt
The output of <f:debug> is an array with the subpages of the page. I know that some if-statements are unnessesary, i had some more in it and didn't delete it.Jonathan
I tested this on my environment without errors. Can you improve your else if conditions to "{item.children} && !{item.active}" and "!{item.children} && {item.active}"? This is a bit more safe as actually both "{item.children} && {item.active}" and "{item.children}" are true in your case. So the order matters. Maybe that solves?Mikel Wohlschlegel
It doesn't work for me. I also tried putting it at the end now, but it makes no difference.Jonathan
When I put {item.children} && {item.active} in the first if condition, it works.Jonathan

1 Answers

1
votes

Active MenuItems have current=1 and active=1. In the first If-condition, current is checked and if =1, the following 'then' gets executed. After this, none of the others is checked and because of that, it didn't work. As I don't need {item.spacer} || {item.current}, this code works for me:

<f:if condition="{item.children} && {item.active}">
<f:then>
  <li class="nav-item dropdown active">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:then>
<f:else if="{item.children}">
  <li class="nav-item dropdown">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:else>
<f:else if="{item.active}">
  <li class="nav-item active">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:else>
<f:else if="{item.spacer}">
  <li class="nav-item spacer">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:else>
<f:else>
  <li class="nav-item">
    <f:render partial="Navigation/Elements/Link" arguments="{item: item}"/>
</f:else>
</f:if>