[SOLVED] Onepager navigation best practice

Using Neos & Flow
1

Hey,
I wonder whats the best practise to realise a onepager navigation, with (in best case) menu items editable by the editor.

2

I found this repo from mittwald, they work with section anchor and title in the sub nodes. Should work for us!

3

Yep, somethnig like that I would suggest as well.

4

I tried to implement it but i miss something here.

I have issues to get the child nodes to render the menu.

This is what the structure looks like:

Mixin for the content nodes who should be able to be linked in the menu:
This mixin is set as superType on the content nodes.

'WG.BaseSite:Mixin.SectionSettingsOnepager':
  abstract: true
  ui:
    inspector:
      tabs:
        onepager:
          label: 'Onepager settings'
          position: 40
          icon: 'icon-bars'
      groups:
        options-onepager:
          label: 'Section settings'
          position: 500
          tab: onepager
  properties:
  # Checkbox für die Onepager Navigation
    SectionVisible:
      type: boolean
      ui:
        label: 'Show in onepager navigation'
        inspector:
          group: options-onepager
          position: 0
        help:
          message: i18n

  # Titel für die Onepager Navigation
    SectionTitle:
      type: string
      ui:
        label: 'Section title'
        inspector:
          group: options-onepager
          position: 1
        help:
          message: i18n

The Header Component, this is where i miss something
I trie to get all child nodes with the property SectionVisible=true but i dont get any.

if i query like this: collection = ${q(documentNode).children().get()} I get an empty nav element, but it should be two in my test so i feel i dont get the right elements there.

<li class="nav-item"><a class="nav-link" href="/#"></a></li>

prototype(WG.BaseSite:Component.HeaderOnepager) < prototype(Neos.Fusion:Component) {
    homeLink = Neos.Neos:NodeUri {
        node = ${site}
    }

      menuItems = Neos.Fusion:Collection {
          # Query all child nodes of the current document node
          collection = ${q(documentNode).children('[SectionVisible=true]').get()}
          itemName = 'node'
          itemRenderer = WG.BaseSite:Components.NavigationEntryOnepager
      }

A Template to render the navigation entries:

prototype(WG.BaseSite:Components.NavigationEntryOnepager) < prototype(Neos.Fusion:Tag) {
    tagName = 'li'
    attributes {
        class = 'nav-item'
    }
    content = Neos.Fusion:Tag {
        tagName = 'a'
        attributes {
            class = 'nav-link'
            href = Neos.Fusion:Array {
                url = Neos.Neos:NodeUri {
                    node = ${documentNode}
                }
                anchor = ${'#nav-' + Transliterater.urlize(node.properties.SectionTitle)}
            }
        }
        content = ${node.properties.SectionTitle}
    }
}
5

Found a solution, this works:

   menuItems = Neos.Fusion:Collection {
        collection = ${q(documentNode).children('main').find("[instanceof Neos.Neos:Content][sectionVisible=true]").get()}
        itemName = 'node'
        itemRenderer = Neos.Fusion:Component {
            identifier = ${node.identifier}
            sectionTitle = ${node.properties.sectionTitle}
            title = ${node.properties.title}

            renderer = afx`
                <li>
                    <a href={'#nav-' + props.identifier}>
                      <span>
                        {props.sectionTitle || props.title}
                        </span>
                    </a>
                </li>
            `
        }
    }
1 Like