Example Overview

To create a product overview page it makes sense to read information from child elements. Below you can see two ways you can do this. In the first example I also use a pagination of the results, but in order to use this effectively we have to consider some of the caching of Neos.


Get childs by node.children()



Get childs by Neos.Fusion:Loop (more customizable)



Look what's behind it:

'Arsors.Neos:Overview':
superTypes:
'Neos.Neos:Content': true
ui:
label: 'Item Overview'
icon: 'icon-th'
help:
message: 'Lorem ipsum dolor amet sit bobo.'

prototype(Arsors.Neos:Overview) < prototype(Neos.Neos:ContentComponent) {

# For readability i have created prototypes for each example
renderer = afx`
<Arsors.Neos:GetNodesByNodeChildren />
<Arsors.Neos:GetNodesByNeosFusionLoop />
`

#
# For both methods:
# Neos has a hard caching built in for high performance.
# We have to create a special rule here so that changes to the subitems are registered and cached anew
#
@cache {
mode = 'cached'

maximumLifetime = '86400'

entryIdentifier {
node = ${ node }
}

entryTags {
# Whenever one of the parent nodes changes the layout could change
1 = ${Neos.Caching.descendantOfTag(documentNode)}
}
}

}


prototype(Arsors.Neos:GetNodesByNodeChildren) < prototype(Neos.Neos:ContentComponent) {

# Get childs by node.children()
items = ${ q(documentNode).children('[instanceof Arsors.Neos:Page]').get() }

renderer = afx`
<hr />
<h2>Get childs by node.children()</h2>
<hr />
<div class="list-group">

<Neos.Fusion:Loop items={props.items} item="item">
<Neos.Neos:NodeLink node={item} attributes.class="list-group-item list-group-item-action">

<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{item.properties.title}</h5>
</div>

<p @if.foundDesc={item.properties.description} class="mb-1">{item.properties.description}</p>
<p @if.noDesc={!item.properties.description} class="mb-1"><i>No description found</i></p>

</Neos.Neos:NodeLink>
</Neos.Fusion:Loop>

</div>
`

}


prototype(Arsors.Neos:GetNodesByNeosFusionLoop) < prototype(Neos.Neos:ContentComponent) {

# Get childs by Neos.Fusion:Loop (more customizable)
items = Neos.Fusion:Loop {
items = ${ q(documentNode).children('[instanceof Arsors.Neos:Page]') }
itemName = 'item'
itemRenderer = Neos.Fusion:Component {
headline = ${ String.stripTags( q(q(item).find('[instanceof Neos.NodeTypes:Headline]').get(0)).property('title') ) }
title = ${q(item).property('title')}
description = ${q(item).property('description')}

renderer = afx`
<Neos.Neos:NodeLink node={item} attributes.class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{props.title}</h5>
</div>

<p class="mb-1" @if.hasDesc={props.description}>{props.description}</p>
<p class="mb-1" @if.hasNoDesc={!props.description}><i>No description found</i></p>

<small @if.hasHeadline={props.headline}>Neos.NodeType:Headline: <strong>{props.headline}</strong></small>
<small @if.hasNoHeadline={!props.headline}>No Neos.NodeType:Headline found</small>
</Neos.Neos:NodeLink>
`
}

}

renderer = afx`
<hr />
<h2>Get childs by Neos.Fusion:Loop (more customizable)</h2>
<hr />
<div class="list-group">
{props.items}
</div>
`

}
Last cache from 2020-10-25 at 02:03:27 (Example Eel Helper)