Loop through hierarchical pages

Loops & Logic
1

Hi,

I’m confused trying to use hierarchical parameters in a Pages loop, to build a Table of Content for the current section being browsed by the user:

Here’s my pages hierarchy on 3 levels:

Level 1 page
– Level 2 pages
–– Level 3 pages

And i need to display the same section menu on all pages:

  1. The section title (Level 1 page)
  2. A list of Level 2 pages
  3. Lists of Level 3 pages nested under their Level 2 parents (above)

I guess my questions are:

  • For point 1: how to get Level 1 page from any level of the hierarchy (1, 2 or 3)?
  • For point 2 and 3: how to limit the loops to Level 2 and 3 pages?

Here’s how i did with CCS, now i need to reproduce with L&L:

<div class="title">
    [loop child=this]
        [if first]
            [field title-link]
            [set section_top_level][field slug][/set]
        [/if]
    [/loop]
</div>
<div class="menu">
    [pass vars]
    <ul>
        [loop type=page parent={SECTION_TOP_LEVEL} orderby=menu]
        <li>[field title-link]
            [-loop exists parent=this orderby=menu]
            <ul>
                [the-loop]
                <li>[field title-link]</li>
                [/the-loop]
            </ul>
            [/-loop]
        </li>
        [/loop]
    </ul>
    [/pass]
</div>

Thanks for your help!

2

For point 1 – Section Title – this seems to work:

<div class="title">
  <Loop field=ancestors reverse=true orderby=menu>
    <If first>
      <a href="{Field url}"><Field title /></a>
      <Set local=section_top_level><Field id /></Set>
    </If>
  </Loop>
</div>
3

And i think i get it for Levels 2 and 3, once the Level 1 ID is correctly Set/Get in a local variable and not name variable, apparently my initial mistake which returned anything or blank data:

<div class="menu">
  <ul>
    <Loop type=page parent="{Get local=section_top_level}" order=asc orderby=menu>
      <li><a href="{Field url}"><Field title /></a>
        <If loop exists type=page parent="{Field id}" include_children=true order=asc orderby=menu>
          <ul>
            <Loop>
              <li><a href="{Field url}"><Field title /></a></li>
            </Loop>
          </ul>
        </If>
      </li>
    </Loop>
  </ul>
</div>

To set the variable:

<Set local=section_top_level><Field id /></Set>

…and to get it from outside the first loop:

{Get local=section_top_level}
4

Hi @avanti,

Is it possible to use a menu loop instead? This might be easier if you don’t mind creating a WordPress menu for this solution.

https://docs.loopsandlogic.com/docs/learning-guides/dynamic-tags/loop/menu/#field

My previous solution using the menu loop is here:

5

Hi @Rips, thanks for your suggestion, it sounds like a good idea in order to match the output to a menu, no matter the real pages hierarchy in the backend > Pages list.

It would still require to detect the current page and get its top level ancestor in the menu, if there’s one.

It brings a second alternative though, depending on the goal.

6

Detecting the current page can be achieved with an If statement:

<If check="{Url site}/{Route}/" is value="{Field url}">

Getting the the top level ancestor should also be possible with another If statement.

It may require using Set and Get tags to make this solution work.

7

Yeah, i guess it’s possible to get the current page top level ancestor, then all children of this parent.

I was just thinking it might not be easier than my method above, based on the real pages hierarchy.
But it’s probably an interesting alternative, depending on the goal: pages hierarchy vs menu hierarchy.

1 Like