Today's Fusion blogpost is small, but nevertheless very helpful. It shows you how to find a parent node that has a certain property value in Neos Fusion.
Implementing "Property Inheritance" in Fusion
The following situation is a very common case. You have a site with several pages and sub-pages, all of which can have logos. The following requirements apply:
- Pages display their own logos if they have one.
- If they do not have their own logo, pages render the logo of the first parent which has one.
In the example above, the following rendering would result from these requirements.
- Page 1 would render its own logo
- Page 2 would render the logo of page 1
- Page 3 would render its own logo
- Page 4 would render the logo of page 1
In order to achieve this, we can instruct Fusion to find the first parent node which has a certain non-empty property. Here's how to do this.
logo = ${q(node).closest("[instanceof Neos.Neos:Document][logo][logo != '']").property('logo')}
Two things are interesting about this. The first one is the "closest()" FlowQuery operation. It starts with the current node, then traverses the tree upwards until it finds a node which matches the given filter. The filter which we use is a Fizzle expression that has two parts. The first one, using the instanceof operator, filters the selection down to only Document nodes (which is not strictly necessary here, but which I include for demo purposes anyway). The second part, "[logo]", will pass if the given node not only has the property "logo", but also has a value in it. Since that value can also be an empty string (if the property has been set and emptied again), we have the additional filter "[logo != '']", which will filter out properties with an empty value. If an empty string is a valid value for your use case, feel tree to omit this part. With this expression, you can make Fusion rendering "inherit" properties from further up the tree, without having to know where exactly the property has been set.
