AFX and multiple item layouts

Community Newcomer's Corner
1

Hi there,

actually I’m learning the AFX-part of NEOS.

I’ve one question in relation to an item (a “Book”-article as example) which can have different html variants.

The FUSION Object of “ArticleBook.fusion” has following rendering:

renderer = afx`
        <div class="book">
            <h3>{props.title}</h3>
        </div>
    `

Now I need the “ArticleBook”-Item in further variants. I will need more than one layout type. With a short description. Or an additional date. How I have to think that?

Kind regards,
Maximilian

2

In simple cases you can add a boolean flag or an (enum) modifier to the component api. This makes sense when you are mostly adding a class or are enabling/hiding parts of a component without changing the general behavior.

If the deviation in rendering is greater i recommend to use a Neos.Fusion:Case to render the same data by different components. That way each component has a very specific use case that is actually testable:

renderer = Neos.Fusion:Case {
  special {
     condition = ${ ... whatever ... }
     renderer = afx`
        <Vendor.Site:Component.Special {...props} />
     `
  }
  default {
     condition = true
     renderer = afx`
        <Vendor.Site:Component.Default {...props} />
     `
  }
}

You can do it in a single afx block with inverted @if statements but i find this less good to read:

renderer = afx`
    <Vendor.Site:Component.Default @if.enabled=${ ... whatever ... } {...props} />
    <Vendor.Site:Component.Special @if.enabled=${ ! ... whatever ... } {...props} />

`
1 Like