How can I pass properties via Neos.Neos:ContentCase?

Community Newcomer's Corner
1

I have a group, which can contain different types of Accordion-NodeTypes. I want to make the accordion (HTML Details) “exclusive” by setting the name attribute.

prototype(My.Site:Content.AccordionGroup) < prototype(Neos.Neos:ContentComponent) {
  @context.accordionGroupName = ${node.aggregateId}

  accordions = Neos.Fusion:Loop {
    items = ${q(node).children().get()}
    itemRenderer = Neos.Neos:ContentCase {
      @context.node = ${item}
    }
  }

  renderer = afx`
    <div class="accordion-group">
      {props.accordions}
    </div>
  `
}

Example of an Accordion-NodeType:

prototype(My.Site:Content.Accordion) < prototype(Neos.Neos:ContentComponent) {
  accordionGroupName = ${q(node).property('accordionGroupName')}

  renderer = afx`
    <details name={props.accordionGroupName}>
      <summary>Accordion Title</summary>
      <p>Accordion-Content</p>
    </details>
  `
}

I couldt set the itemRenderer to My.Site:Content.Accordion and pass the property accordionGroupName here. But that’s not a solution, because I have more than one Accordion-NodeType.

2

You can override the Accordion prototype inside the AccordionGroup prototype:

prototype(My.Site:Content.AccordionGroup) < prototype(Neos.Neos:ContentComponent) {
  accordions = Neos.Neos:ContentCollection

  prototype(My.Site:Content.Accordion) { 
    accordionGroupName = ${q(node).parent().get(0).aggregateId}
  }

  renderer = afx`
    <div class="accordion-group">
      {props.accordions}
    </div>
  `
}
1 Like
3

Thank you for the idea with overriding the prototype inside the AccordionGroup!

And I know about getting the children with the ContentCollection in one line. But in my case I had to split up the accordions into two columns. That’s why I looped by myself through the query.