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.
This is a custom field. It was added to the Arsors.Neos:Page NodeType (inherited from Neos.Neos:Document).
No description found
No description found
This is a custom field. It was added to the Arsors.Neos:Page NodeType (inherited from Neos.Neos:Document).
Neos.NodeType:Headline: Everything you need to know about product 1No description found
No Neos.NodeType:Headline foundNo description found
No Neos.NodeType:Headline found'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>
`
}