Problem to use/output a content collection as a child node

Using Neos & Flow Frontend & Integration
1

I am working on my very first Neos project and have problems to output a content collection “teaserboxes” as a child node within a content element “Foo.Bar:TeaserBoxes”.

I created two of those content elements “teaserbox” in the content collection “teaserboxes” but the resulting output is not as expected:

  • only one “teaserbox” seems to be found via Eel expression
  • the node attributes (header, text) of the the “teaserbox” node are not output

I tried to solve my problems with the help of the Neos documentation - e.g. with this chapter:

http://neos.readthedocs.org/en/stable/References/NeosTypoScriptReference.html#typo3-typoscript-collection

NodeType configuration:

'Foo.Bar:TeaserBoxes':
  superTypes:
    'TYPO3.Neos:Content': TRUE
  ui:
    group: 'general'
    label: 'Teaser-Boxen'
    inspector:
      groups:
        teaserboxes:
          label: 'Teaser-Boxen'
  childNodes:
    teaserboxes:
      type: 'TYPO3.Neos:ContentCollection'
      constraints:
        nodeTypes:
          'Foo.Bar:TeaserBox': TRUE
          '*': FALSE
  properties:
    header:
      type: string
      defaultValue: 'Lorem Ipsum'
      ui:
        label: 'Überschrift'
        inlineEditable: TRUE
    text:
      type: string
      defaultValue: 'Sed pid vel amet, porta integer elit, est augue enim elementum pulvinar eu in odio sit, in mattis, lectus et sed, vel.'
      ui:
        label: 'Text'
        inlineEditable: TRUE

'Foo.Bar:TeaserBox':
  superTypes:
    'TYPO3.Neos:Content': TRUE
  ui:
    group: 'general'
    label: 'Teaser-Box'
    inspector:
      groups:
        teaserbox:
          label: 'Teaser-Box'
  properties:
    header:
      type: string
      defaultValue: 'Lorem Ipsum'
      ui:
        label: 'Überschrift'
        inlineEditable: TRUE
    text:
      type: string
      defaultValue: 'Sed pid vel amet, porta integer elit, est augue enim elementum pulvinar eu in odio sit, in mattis, lectus et sed, vel.'
      ui:
        label: 'Text'
        inlineEditable: TRUE

TypoScript2:

prototype(Foo.Bar:TeaserBoxes) < prototype(TYPO3.Neos:Content) {
  templatePath = 'resource://Foo.Bar/Private/Templates/TypoScriptObjects/TeaserBoxes.html'
  header = ${q(node).property('header')}
  text = ${q(node).property('text')}

  teaserboxes = TYPO3.TypoScript:Collection {
    collection = ${q(node).first('[instanceof TYPO3.Neos:ContentCollection]').children()}
    itemName = 'item'
    itemRenderer = TYPO3.TypoScript:Template {
      templatePath = 'resource://Foo.Bar/Private/Templates/TypoScriptObjects/Foo.html'
      item = ${item}
    }
  }
  foo = ${q(node).first('[instanceof TYPO3.Neos:ContentCollection]').children().count()}
}

prototype(Foo.Bar:TeaserBox) < prototype(TYPO3.Neos:Content) {
  templatePath = 'resource://Foo.Bar/Private/Templates/TypoScriptObjects/Bar.html'
  header = ${q(node).property('header')}
  text = ${q(node).property('text')}
}

…I am am quite sure that there is something wrong with my TypoScript2 configuration for Foo.Bar:TeaserBox - but I am not sure what it is. I guess having two templates Foo.html and Bar.html is also wrong.

Fluid template: (resource://Foo.Bar/Private/Templates/TypoScriptObjects/Foo.html)

<div class="col-md-6 col-sm-12 col-xs-12 wow fadeInLeft">
  <div class="media bord ins">
    <div class="media-left">
      <span class="fl-36-slim-icons-{item.icon_id}"></span>
    </div>
    <div class="media-body">
      <h5 class="media-heading">{item.header}</h5>
      <p>{item.text}</p>
    </div>
  </div>
</div>

Fluid template: (resource://Foo.Bar/Private/Templates/TypoScriptObjects/Bar.html)

{namespace neos=TYPO3\Neos\ViewHelpers}

<div class="col-md-6 col-sm-12 col-xs-12 wow fadeInLeft">
  <div class="media bord ins">
    <div class="media-left">
      <span class="fl-36-slim-icons-{icon_id}"></span>
    </div>
    <div class="media-body">
      <h5 class="media-heading">{neos:contentElement.editable(property: 'header', tag: 'span')}</h5>
      <p>{neos:contentElement.editable(property: 'text', tag: 'span')}</p>
    </div>
  </div>
</div>

Does anybody know what’s wrong here?

2

collection = ${q(node).first('[instanceof TYPO3.Neos:ContentCollection]').children()} looks wrong, it basically means take the first element in the context, the node (here a TeaserBoxes element) and find the children of that if there it’s a ContentCollection, which it isn’t.

You should try to see what collection variable in the collection contains using f:debug. You might be confused when using the foo variable to debug since it would actually work since it uses the document, finds the first ContentCollection child and then the first element is a TeaserBoxes element.

Anyway something like collection = ${q(node).children('[instanceof TYPO3.Neos:ContentCollection]').children()} instead should work™, or just skip the filter since there’s only one child node… .children().children()

3

You were right, this solves the problem:

collection = ${q(node).children().children()}

Thank you!